ФОРМЫ
Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения
Создание фильтра элементов DIV
Шаг 1) Добавить HTML:
<!— Control buttons —><div id=»myBtnContainer»> <button class=»btn active» onclick=»filterSelection(‘all’)»> Показать все</button> <button class=»btn» onclick=»filterSelection(‘cars’)»> Машины</button> <button class=»btn» onclick=»filterSelection(‘animals’)»> Животные</button> <button class=»btn» onclick=»filterSelection(‘fruits’)»> Фрукты</button> <button class=»btn» onclick=»filterSelection(‘colors’)»> Цветы</button> </div><!— Фильтруемые элементы. Примечание что некоторые из них имеют несколько имен классов (это может быть использовано, если они принадлежат к нескольким категориям) —><div class=»container»> <div class=»filterDiv cars»>БМВ</div> <div class=»filterDiv colors fruits»>Апельсин</div> <div class=»filterDiv cars»>Вольво</div> <div class=»filterDiv colors»>Красный</div> <div class=»filterDiv cars animals»>Мустанг</div> <div class=»filterDiv colors»>Синий</div> <div class=»filterDiv animals»>Кот</div> <div class=»filterDiv animals»>Собака</div> <div class=»filterDiv fruits»>Арбуз</div> <div class=»filterDiv fruits animals»>Киви</div> <div class=»filterDiv fruits»>Банан</div> <div class=»filterDiv fruits»>Лимон</div> <div class=»filterDiv animals»>Корова</div></div>
Шаг 2) Добавить CSS:
.container { overflow: hidden;}.filterDiv { float: left; background-color: #2196F3; color: #ffffff; width: 100px; line-height: 100px; text-align: center; margin: 2px; display: none; /* Скрыто по умолчанию */}/* В класс «show» добавляется к отфильтрованные элементы */.show { display: block;}/* Стиль кнопок */.btn { border: none; outline: none; padding: 12px 16px; background-color: #f1f1f1; cursor: pointer;}/* Добавить светло-серый фон на наведении курсора мыши */.btn:hover { background-color: #ddd;}/* Добавить темный фон для активной кнопки */.btn.active { background-color: #666; color: white;}
Шаг 3) Добавить JavaScript:
filterSelection(«all»)function filterSelection(c) { var x, i; x = document.getElementsByClassName(«filterDiv»); if (c == «all») c = «»; // Добавить класс «show» (display:block) к отфильтрованным элементам и удалите класс «show» из элементов, которые не выбраны for (i = 0; i < x.length; i++) { w3RemoveClass(x, «show»); if (x.className.indexOf(c) > -1) w3AddClass(x, «show»); }}// Показать отфильтрованные элементыfunction w3AddClass(element, name) { var i, arr1, arr2; arr1 = element.className.split(» «); arr2 = name.split(» «); for (i = 0; i < arr2.length; i++) { if (arr1.indexOf(arr2) == -1) { element.className += » » + arr2; } }}// Скрыть элементы, которые не выбраныfunction w3RemoveClass(element, name) { var i, arr1, arr2; arr1 = element.className.split(» «); arr2 = name.split(» «); for (i = 0; i < arr2.length; i++) { while (arr1.indexOf(arr2) > -1) { arr1.splice(arr1.indexOf(arr2), 1); } } element.className = arr1.join(» «);}// Добавить активный класс к текущей кнопке управления (выделите ее)var btnContainer = document.getElementById(«myBtnContainer»);var btns = btnContainer.getElementsByClassName(«btn»);for (var i = 0; i < btns.length; i++) { btns.addEventListener(«click», function() { var current = document.getElementsByClassName(«active»); current.className = current.className.replace(» active», «»); this.className += » active»; });}
Сдвиги изображений с помощью object-position
Поддержка браузерами — 89,7% (на 11.2017)
Аналогично дополняющему background-position свойству background-size, существует свойство object-position, которое дополняет object-fit.
Свойство object-position позволяет сдвинуть изображение внутри его контейнера. Координаты можно указывать в абсолютных и относительных величинах, использовать ключевые слова или комбинировать различные значения (top 20px right 5px, center right 80px).
HTML
<div id='container'> <img src="/rose.png' alt="rose flower'> </div>
CSS
#container {
width: 300px;
height: 300px;
}
img {
width: 100%;
height: 100%;
object-position: 150px 0;
}
CSS
body { background-color: #ededed; } h1 { text-align: center; font-family: "Oswald", sans-serif; font-size: 32px; text-transform: uppercase; } .imageholder { width: 80%; margin: 0px auto; padding: 0px; } .imageholder img { width: 20%; padding: 0px; margin: 0px; margin-right: 4.671%; } .imageholder .blur { -webkit-filter: blur(2px); } .imageholder .grayscale { -webkit-filter: grayscale(1); } .imageholder .dropshadow { -webkit-filter: drop-shadow(12px 12px 20px black); } .imageholder .sepia { -webkit-filter: sepia(1); } .imageholder .brightness { -webkit-filter: brightness(2.3); } .imageholder .contrast { -webkit-filter: contrast(10); } .imageholder .hue-rotate { -webkit-filter: hue-rotate(120deg); } .imageholder .invert { -webkit-filter: invert(1); } .imageholder .saturate { -webkit-filter: saturate(8.1); } .imageholder .opacity { -webkit-filter: opacity(0.6); }
Изображения
Слайд-шоуГалерея слайд-шоуМодальные изображенияЛайтбоксАдаптивная Сетка изображенияСетка изображенияГалерея вкладокОверлей изображенияСлайд с наложенным изображениемМасштабирование наложения изображенияНазвание наложения изображенияЗначок наложения изображенияЭффекты изображенияЧерно-белое изображениеТекст изображенияТекстовые блоки изображенийПрозрачный текст изображенияПолное изображение страницыФорма на картинкеГерой изображениеПараллельные изображенияОкругленные изображенияАватар изображенияАдаптивные образыЦентрировать изображенияМиниатюрыПознакомьтесь с командойЛипкое изображениеОтражение изображенияВстряхните изображениеПортфолио галереяПортфолио с фильтрациейМасштабирование изображенияИзображение увеличительное стеклоПолзунок сравнения изображений
Усиление резкости изображений с image-rendering
Поддержка браузерами — 90,82% (на 11.2017)
При масштабировании изображения браузер сглаживает его, чтобы оно не выглядело пиксельным, но в зависимости от разрешения изображения и экрана, результат не всегда получается приемлемым. Вы можете контролировать поведение браузера при сглаживании изображения с помощью свойства image-rendering.
Это широко поддерживаемое свойство контролирует алгоритм, применяемый браузером при масштабировании. Оно имеет 2 значения: crisp-edges и pixelated.
Значение crisp-edges удерживает цветовой контраст между пикселями. Другими словами, никакого сглаживания не производится, что отлично подходит для создания контраста.
Когда используется pixelated, соседние пиксели определенного пикселя объединиться с ним, создавая впечатление, будто они образуют один большой пиксель, отличный для экранов с высоким разрешением.
Если вы внимательно посмотрите на края цветов на gif-изображении, представленном ниже, вы сможете увидеть разницу между изображениями: обычным и с примененным CSS-свойством image-rendering: pixelated.
CSS
img {
image-rendering: pixelated;
}
Фильтры Webkit
Расплывшиеся очертания
HTML
<div class="blur pic"> <img src="https://2.bp.blogspot.com/-5uNuklpf00g/UhhoACTie0I/AAAAAAAAGH8/V0MvkAqt-2E/s000/airplains.jpeg" alt="plane"> </div>
CSS
/*Расплывшиеся очертания*/
.blur img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blur img:hover {
-webkit-filter: blur(5px);
}
Обесцвечивание
HTML
<div class="bw pic"> <img src="https://2.bp.blogspot.com/-4M2ucdYdH0k/UhhoGb30DGI/AAAAAAAAGI8/oJx9BlfFBfY/s000/sea2.jpeg" alt="sea"> </div>
CSS
/*Обесцвечивание*/
.bw {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.bw:hover {
-webkit-filter: grayscale(100%);
}
Полировка / яркость
HTML
<div class="brighten pic"> <img src="https://2.bp.blogspot.com/-54vP-i9Cgxc/UhhoC02MU1I/AAAAAAAAGIg/sh8WYeYTT2o/s000/dj.jpeg" alt="sea"> </div>
CSS
/*Полировка*/
.brighten img {
-webkit-filter: brightness(-65%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.brighten img:hover {
-webkit-filter: brightness(0%);
}
Код HTML
Code
<!— Lets make some simple hover effects with CSS3 Filters —> <div id=»gallery»> <a href=»#»> <!— Title and classes —> <span class=»title»>Насыщенность</span> <img src=»http://thecodeplayer.com/uploads/media/forest.jpg» class=»saturate» /> </a> <a href=»#»> <span class=»title»>Оттенки серого</span> <img src=»http://thecodeplayer.com/uploads/media/lake.jpg» class=»grayscale» /> </a> <a href=»#»> <span class=»title»>Контраст</span> <img src=»http://thecodeplayer.com/uploads/media/tree.jpg» class=»contrast» /> </a> <a href=»#»> <span class=»title»>Яркость</span> <img src=»http://thecodeplayer.com/uploads/media/leaves.jpg» class=»brightness» /> </a> <a href=»#»> <span class=»title»>Размытие</span> <img src=»http://thecodeplayer.com/uploads/media/redflower.jpg» class=»blur» /> </a> <a href=»#»> <span class=»title»>Инверсия</span> <img src=»http://thecodeplayer.com/uploads/media/zebra.jpg» class=»invert» /> </a> <a href=»#»> <span class=»title»>Сепия</span> <img src=»http://thecodeplayer.com/uploads/media/tree2.jpg» class=»sepia» /> </a> <a href=»#»> <span class=»title»>Замена цвета</span> <img src=»http://thecodeplayer.com/uploads/media/landscape.jpg» class=»huerotate» /> </a> <a href=»#»> <span class=»title»>Прозрачность</span> <img src=»http://thecodeplayer.com/uploads/media/mountain.jpg» class=»opacity» /> </a> </div>
Проверка изображений в SE Ranking
В SE Ranking вы можете проверить изображения с помощью инструментов «Аудит сайта» и «SEO-проверка страницы».
Секция «Изображения» в подразделе «Отчет об ошибках» определит, если на сайте есть картинки слишком большого размера или с незаполненным текстом alt:
Кроме этого, в «Анализе сайта» есть подраздел «Найденные ресурсы», где можно просмотреть URL-адреса каждого изображения, код ответа сервера, размер и скорость загрузки:
«SEO-проверка страницы» также определяет проблемы с заполнением атрибута alt и имени файла, а также анализирует уникальность изображений:
С помощью SE Ranking вы также можете проверить, какие спецэлементы сайт получил в выдаче Google — ведь большинство из них так или иначе связаны с картинками. Для этого анализируйте колонку «Элементы поиска» в таблице «Позиций».
«Пять китов» оптимизации изображений
Важно оптимизировать картинки, чтобы поисковики их правильно поняли и проиндексировали. Вот какие факторы влияют на ранжирование сайта:
Качество и разрешение. Поисковики лучше оценят изображения высокого качества — желательно в разрешении от 1200 пикселей в ширину и 800 пикселей в высоту (естественно, точный размер будет зависеть от специфики изображения и преследуемых целей). Вы можете ставить на страницу картинку в сжатом виде и предлагать пользователям возможность открыть ее в лучшем качестве в новой вкладке или всплывающем окне (например, это полезно для оригинальных фотографий, иллюстраций или инфографики).
Доступность. Пользователи с нарушениями зрения не смогут понять, что изображено на картинках, если вы не опишите их в атрибуте alt. Также текст этого атрибута будет показываться на странице, если изображение не загрузится, поэтому стоит сделать его максимально точным и информативным. Атрибуты alt также важны для удобства голосового поиска или когда сайт просматривают на мобильном устройстве с отключенной загрузкой изображений. Не прописывайте какой-то текст на самих изображениях — ведь не все смогут его увидеть и он не будет распознан при переводе страницы.
Контекст. Один из главных аспектов — то, как изображения вписываются в контекст страницы. Довольно часто сайты используют не очень релевантные картинки, но нет смысла заполнять контент визуальными элементами просто ради того, чтобы он лучше смотрелся. Например, если вы пишете статью о способах приготовления кофе и добавляете стоковые фото с кофейными чашками — они не сделают вашу страницу более полезной и привлекательной. А если вы добавите собственные фотографии, иллюстрирующие каждый описанный способ приготовления кофе, — ваша статья будет выглядеть более емко и авторитетно.
Уникальность. Сделанные специально для вашего сайта фотографии, иллюстрации, инфографики и пр. — всегда лучше, чем стоковые картинки. Представители Google рекомендуют использовать уникальные изображения, да и сами пользователи замечают и больше ценят уникальный контент.
Оптимизация скорости загрузки и адаптивные изображения
Чрезвычайно важно, чтобы первая видимая часть страницы грузилась быстро. Так как изображения обычно самые тяжеловесные элементы, их оптимизация напрямую влияет на скорость загрузки
Кроме этого, важно использовать адаптивные картинки, которые подстраиваются под любой размер экрана.
Примечания
Вы можете объединять любое количество функций для управления отображением, но их порядок при этом имеет значение. Например, использовав grayscale() после sepia(), и дополнительно обработав blur CSS. На выходе вы получите полностью серое изображение.
Передаваемое значение (кроме «none») определяет, как контекст укладывается в стек, таким же образом, как работает непрозрачность CSS. Свойство filter не оказывает никакого влияния на геометрию поля целевого элемента, хотя фильтры могут задавать вывод различных эффектов за пределами границ поля элемента. Фильтры применяются ко всем частям целевого элемента. В том числе: к контенту, фону, рамкам, оформлению текста, контуру и видимому механизму прокрутки.
В спецификации также определена функция filter (image-URL, filter-functions), оборачивающая функцию для изображений. Она позволяет применять фильтры к изображениям, которые используются в CSS. Например, можно размыть фоновое изображение, не применяя CSS blur background (размытие) к самому тексту. Эта функция еще не поддерживается в браузерах. Но чтобы создать такой эффект, можно применить фон и фильтр к псевдо-элементу.
Изменение режима смешивания и непрозрачности смарт-фильтра
Ещё одним преимуществом смарт-фильтров является то, что у них можно регулировать режим наложения и непрозрачность отдельно от самого слоя, чего не скажешь об обычном фильтре. Если вы уже знакомы с режимами смешивания в Photoshop, то, наверно, знаете, что эта вкладка располагается в верхнем левом углу панели слоёв и предназначена она непосредственно для слоя. Давайте попробуем сменить Обычный режим, который установлен по умолчанию на Перекрытие.
Посмотрите, что получилось в итоге, размытый текст смешался с синим фоном.
Верните режим наложения снова на Обычный.
Мы вернулись к предыдущему эффекту.
На этот раз я буду изменять режим смешивания не слоя (смарт-объекта), а самого смарт-фильтра. Для этого кликните по значку, находящемуся непосредственно справа от названия смарт-фильтра. Сколько бы мы не добавили смарт-фильтров, у всех у них можно будет регулировать режим наложения и непрозрачность отдельно.
Этими действиями откроется диалоговое окно Параметры наложения (Размытие в движении). Все изменения этого окна будут влиять только на смарт-фильтр.
В качестве режима смешивания так же установите Перекрытие и Непрозрачность понизьте до 80%, чтобы эффект размытия был не столь интенсивным.
Нажимаем OK, после закрытия окна у нас получился совершенно другой результат. Размытый текст больше не сливается с синим фоном, текст хорошо читаем. Мы понизили непрозрачность именно для эффекта размытия, он стал менее интенсивным, но на сам текст это не повлияло, непрозрачность у него осталась без изменения 100%.
Посмотрите, что произойдёт, если я теперь изменю режим смешивания на Перекрытие для смарт-объекта, то есть текста.
Мы видим ещё один результат, который отличается от первых двух. Сначала Photoshop смешал размытие с текстом, но текст при этом остался читабельным. Затем полученный эффект смешал с синим фоном. Но вот с обычными фильтрами этого проделать невозможно.
Для смарт-объекта я вернул режим Нормальный, а для смарт-фильтра оставил Перекрытие.
Теперь смарт-объект больше не смешивается с синим фоном, мы снова видим белый текст.
CSS эффект описываем каркас блоков для трансформации
Скачиваем подготовленный шаблон, в нем два файла, Index в котором подключен CSS. В CSS сбросили отступы, установили шрифт, и подключили на задний фон изображение. В самой папке /img лежат два файла, фон и картинка для примеры.
Начальный шаблон — скачать
Описываем все блоки, которые нужно вывести на страницу, и заполняем их текстовым содержанием.
div.dws>div.blocImg>img+div.blocText>div.text>h2+p
<section>
<div class="dws">
<div class="blocImg"><img src="img/1.jpg" alt="CSS эффект">
<div class="blocText">
<div class="text">
<h2>CSS эффект <span>при наведении</span></h2>
<p>transition<br> transform scale(x,y)<br>:hover ::before ::after</p>
</div>
</div>
</div>
</div>
</section>
Описываем основные стили картинки / эффект на css
Задаем блоку с картинкой фиксированную ширину и высоту, а при помощи overflow: hidden, скрываем все лишнее за ее пределами, добавляем курсор.
.blocImg {
width: 600px;
height: 338px;
overflow: hidden;
cursor: pointer;
}
Позиционируем для удобства блок посередине экрана.
.dws {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Затем картинке делаем ширину в 100% и вешаем плавное анимирование в пол секунды.
.blocImg img {
width: 100%;
transition: .5s;
}
Далее трансформируем, немного разворачиваем rotate(-10deg), и увеличиваем в размере scale(1.3).
Задаем фильтр размытия в 1 пик. filter: blur(1px) и затемним фон, а для этого допишем классу .blocImg черный фон, а при наведении саму картинку делаем на половину прозрачной opacity: .5;.
.dws:hover .blocImg img {
transform: rotate(-10deg) scale(1.3);
filter: blur(1px);
opacity: .5;
}
Теперь приступим к стилилизации текста.
Оформляем текстовое содержание блока
Абсолютно родителя позиционируем блок с текстом .blocText и задаем отступы по всем краям в 30 пик. По рамке в дальнейшем сделаем анимированное ее появление.
.blocText {
outline: 1px solid orange;
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
}
Для текста задаем белый цвет, делаем заглавными буквами, устанавливаем padding по краям.
.text {
color: #fff;
text-transform: uppercase;
padding: 0 20px;
}
Заголовку второго уровня задаем 25 пик.
.text h2 {
font-size: 25px;
}
Вторую его часть делаем оранжевым цветом, устанавливаем отступы с низу для черты, и делаем нижнее подчеркивание в 2 пик .
.text h2 span {
color: orange;
padding-bottom: 3px;
border-bottom: 2px solid #fff;
}
Параграф позиционируем абсолютно, опускаем его на 180 пик. задаем ширину его блока в 250 пик. Добавляем с левой стороны border в 4 пик. и задаем внутренние отступы.
.text p {
position: absolute;
top: 180px;
width: 250px;
border-left: 4px solid #ffb611;
padding: 0 10px;
}
Описываем псевдоэлементы ::before и ::after
Уберем обводку outline, которую до этого задавали классу .blocText и зададим ее для псевдоэлементов.
Создаем псевдоэлементы ::before ::after , описываем их основные стили.
Позиционируем их абсолютно, задаем ширину и высоту по 100% и платное появление в пол секунды.
.blocText::before,
.blocText::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Отдельно ::before присваиваем бордюр с верху и низу в 1 пик. и задаем трансформацию для оси Х transform: scale(0,1).
.blocText::before {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: scale(0,1);
}
Тоже самое делаем для ::after только бордюр теперь с левой и правой стороны, а трансформация по оси Y
.blocText::after {
border-left: 1px solid #fff;
border-right: 1px solid #fff;
transform: scale(1,0);
}
А для их появления, трансформацию для всех осей указываем в 1.
.dws:hover .blocText::before,
.dws:hover .blocText::after {
transform: scale(1,1);
}
И остается скрыть текст, для этого классу .text присвоим opacity: 0 и добавим плавное его появление.
А по наведении текст отображаем.
.dws:hover .text {
opacity: 1;
}
В конечном итоге получили классный Hover Effects при наведение на картинку.
Урок подготовил Горелов Денис.
Скрываем эффекты фильтров при помощи маски
И последней важной особенностью смарт-фильтров в Photoshop является встроенная маска слоя, которая позволяет нам оставить эффект только в некоторых областях текста
Обратите внимание на панель слоёв, над списком смарт-фильтров располагается миниатюра маски, заполненная белой заливкой. На все применённые смарт-фильтры приходится одна маска
Чтобы использовать маску, для начала кликните по её миниатюре, чтобы выбрать.
Подробную информацию о маске вы можете узнать здесь. Как работает маска, я объясню вкратце. Если миниатюра маски заполнена белым цветом, то эффекты смарт-фильтров видны на документе. Наша маска заполнена белым цветом, поэтому мы можем видеть все эффекты.
Чтобы скрыть эффекты смарт-фильтров в определённой части текста, просто заполните эту область чёрным цветом. Например, мне хочется скрыть эффекты на слове Smart и оставить их видимыми только на слове Filters. На панели инструментов выберите Прямоугольная область (M).
Выбранным инструментов выделите слово Smart.
Убедитесь, что у вас выбрана маска и заполните выделенную область чёрным цветом при помощи команды Fill (Выполнить заливку). Находится она во вкладке Edit (Редактирование) или вызовите её нажатием клавиш Shift + F5.
В диалоговом окне в параметре Contents (Содержание) установите чёрный цвет, остальные настройки оставьте без изменения.
Нажмите OK, чтобы закрыть окно. Photoshop заполнит на маске выделенную область чёрным цветом. Для снятия выделения перейдите в меню Select > Deselect (Выделение – Отменить выделение) или нажмите комбинацию клавиш Ctrl + D.
Посмотрите на текст, возле слова Smart эффекты фильтра больше не видны.
Обратите внимание на панель слоёв, на миниатюре маски появилась область, заполненная чёрным цветом
Ну вот, вроде, и всё, что я хотел вам рассказать про смарт-фильтры. Теперь вы можете применять к тексту любые эффекты и в то же время сам текст и применённые к нему эффекты останутся всегда редактируемыми.
В заключение
Если вы читаете Smashing Magazine, скорее всего, вы уже пытаетесь создать самые
лучшие условия из всех возможных для восприятия вашего сайта его аудиторией. Так
что в следующий раз, когда вы будете создавать что-то красивое и полезное для
мобильных пользователей, попробуйте одно из этих решений для отзывчивых
изображений и сделайте свой сайт еще лучше. Пользователи на мобильных
устройствах скажут вам спасибо!
Хотите копнуть глубже?
Джереми Кит сделал несколько чудесных заметок к презентации Скотта Джела
“Отзывчивый и ответственный” на An Event Apart в Атланте. * Джордан Мур
написал превосходную статью, которая глубже рассматривает соображения
ответственности в отзывчивом дизайне. * Вы запутались и ничего не
понимаете? Все нормально, мы пытаемся понять эту штуку — отзывчивый дизайн — все
вместе. Джош Лонг призывает нас всех собраться и поделиться опытом в статье:
“Понятия не имею, что я творю, когда делаю отзывчивый дизайн”. * Хотите
пойти еще дальше? Включайтесь! Объедините силы с ребятами в группе сообщества
по отзывчивым изображениям. А еще можно подписаться на них в Twitter.
