CSS фильтры изображений. Фильтрация и проверка данных PHP

CSS3-фильтры воспроизводят в браузере визуальные эффекты, похожие на фильтры Photoshop. Фильтры можно добавлять не только к изображениям, но и к любым непустым элементам.

Набор фильтров не ограничивается предустановленным в браузере. Вы также можете использовать фильтры SVG, загрузив их по ссылке вместе с элементом svg.

Изначально фильтры были созданы как часть спецификации SVG. Их задачей было применение эффектов, основанных на пиксельной сетке к векторной графике. С поддержкой SVG браузерами появилась возможность использовать эти эффекты непосредственно в браузерах.

Браузеры обрабатывают страницу попиксельно применяя заданные эффекты и отрисовывают результат поверх оригинала. Таким образом, применяя несколько фильтров можно достигать различных эффектов, они как бы накладываются друг на друга. Чем больше фильтров, тем больше времени требуется браузеру, чтобы отрисовать страницу.

Можно применять несколько фильтров одновременно. Классический способ применения таких эффектов — при наведении на элемент:hover .

Поддержка браузерами

IE: не поддерживает
Edge: 13.0 кроме url()
Firefox: 35.0
Chrome: 18.0 -webkit-
Safari: 9.1, 6.0 -webkit-
Opera: 40.0, 15.0 -webkit-
iOS Safari: 9.3, 6.1 -webkit-
Android Browser: 53.0, 4.4 -webkit-
Chrome for Android: 55.0, 47.0 -webkit-

filter

blur()	Значение задается в единицах длины, например px , em . Применяет размытие по Гауссу к исходному изображению. Чем больше значение радиуса, тем больше размытие. Если значение радиуса не задано, по умолчанию берется 0 .
brightness()	Значение задается в % или в десятичных дробях. Изменяет яркость изображения. Чем больше значение, тем ярче изображение. Значение по умолчанию 1 .
contrast()	Значение задается в % или в десятичных дробях. Регулирует контрастность изображения, т.е. разницу между самыми темными и самыми светлыми участками изображения/фона. Значение по умолчанию 100% . Нулевое значение скроет исходное изображение под темно-серым фоном. Значения, увеличивающиеся от 0 до 100% или от 0 до 1 , будут постепенно открывать исходное изображение до оригинального отображения, а значения свыше будут увеличивать контраст между светлыми и темными участками.
drop-shadow()	Фильтр действует подобно свойствам box-shadow и text-shadow . Использует следующие значения: смещение по оси Х смещение по оси Y размытость растяжение цвет тени. Отличительная особенность фильтра заключается в том, что тень добавляется к элементам и его содержимому с учетом их прозрачности, т.е. если элемент содержит текст внутри, то фильтр добавит тень одновременно для текста и видимых границ блока. В отличие от других фильтров, для этого фильтра обязательно задание параметров (минимальное — величина смещения).
grayscale()	Извлекает все цвета из картинки, делая на выходе черно-белое изображение. Значение задается в % или десятичных дробях. Чем больше значение, тем сильнее эффект.
hue-rotate()	Меняет цвета изображения в зависимости от заданного угла поворота в цветовом круге. Значение задается в градусах от 0deg до 360deg . 0deg — значение по умолчанию, означает отсутствие эффекта.
invert()	Фильтр делает негатив изображения. Значение задается в % . 0% не применяет фильтр, 100% полностью преобразует цвета.
opacity()	Фильтр работает аналогично со свойством opacity , добавляя прозрачность элементу. Отличительная особенность — браузеры обеспечивают аппаратное ускорение для фильтра, что позволяет повысить производительность. Дополнительный бонус — фильтр можно одновременно сочетать с другими фильтрами, создавая при этом интересные эффекты. Значение задается только в % , 0% делает элемент полностью прозрачным, а 100% не оказывает никакого эффекта.
saturate()	Управляет насыщенностью цветов, работая по принципу контрастного фильтра. Значение 0% убирает цветность, а 100% не оказывает никакого эффекта. Значения от 0% до 100% уменьшают насыщенность цвета, выше 100% — увеличивают насыщенность цвета. Значение может задаваться как в % , так и целым числом, 1 эквивалентно 100% .
sepia()	Эффект, имитирующий старину и «ретро». Значение 0% не изменяет внешний вид элемента, а 100% полностью воспроизводит эффект сепии.
url()	Функция принимает расположение внешнего XML-файла с svg-фильтром, или якорь к фильтру, находящемся в текущем документе.
none	Значение по умолчанию. Означает отсутствие эффекта.
initial	Устанавливает это свойство в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Как использовать

Для начала нужно скачать архив плагина со страницы разработчика и распаковать его в директорию на вашем сайте. Доступны две версии - минимизированная (Production version) и для разработчиков (Development version). В версии для разработчиков текст плагина представлен в структурированном виде с комментариями, что удобно для того, чтобы разобраться в принципе работы (в исходниках к уроку содержится версия плагина для разработчиков с переведенными комментариями).

Затем в секцию страницы, на которой планируется использовать фильтрацию, нужно вставить код подключения плагина:

$(document).ready(function() { $("элемент_для_фильтрации").liveFilter("опция"); });

Нужно заменить “/путь_к_плагину/ ” на путь, где расположен плагин liveFilter , который вы распаковали ранее. Также нужно заменить “элемент_для_фильтрации ” селектором CSS, который соответствует нужному элементу.

Параметр плагина "опция" управляет использованием анимации при скрытии и выводе элементов во время фильтрации. Доступны следующие значения: basic - элементы просто отключаются/включаются без какой-либо анимации, slide - фильтруемые элементы будут сворачиваться/разворачиваться, fade - фильтруемые элементы будут постепенно включаться/выключаться.

Например:

$(ul#filter_me").liveFilter("slide");

Выше приведенный код указывает плагину LiveFilter фильтровать неупорядоченный список с id “filter_me ” и использовать анимацию “slide ”.

Плагин можно использовать для неупорядоченных и упорядоченных списков и таблиц. Нужно указать требуемый селектор при вызове плагина.

Важно! Для работы плагина нужно добавить на страницу поле ввода текста с классом “filter” . Данное поле будет использоваться для ввода текста фильтрации:

Пример страницы с использованием фильтра:

Пример использования плагина LiveFilter $(document).ready(function() { $(ul#filter_me").liveFilter("slide"); });

• Пункт № 1.
• Пункт № 2.
• Пункт № 3.
• Пункт № 4.
• Пункт № 5.
• Пункт № 6.
• Пункт № 7.
• Пункт № 8.
• Пункт № 9.
• Пункт № 10.

Код плагина

(function($){ $.fn.liveFilter = function (aType) { // Определяем, что будет фильтроваться. var filterTarget = $(this); var child; if ($(this).is("ul")) { child = "li"; } else if ($(this).is("ol")) { child = "li"; } else if ($(this).is("table")) { child = "tbody tr"; } // Определяем переменные var hide; var show; var filter; // Событие для элемента ввода $("input.filter").keyup(function() { // Получаем значение фильтра filter = $(this).val(); // Получаем то, что нужно спрятать, и то, что нужно показать hide = $(filterTarget).find(child + ":not(:Contains("" + filter + ""))"); show = $(filterTarget).find(child + ":Contains("" + filter + "")") // Анимируем пункты, которые нужно спрятать и показать if (aType == "basic") { hide.hide(); show.show(); } else if (aType == "slide") { hide.slideUp(500); show.slideDown(500); } else if (aType == "fade") { hide.fadeOut(400); show.fadeIn(400); } }); // Пользовательское выражение для нечувствительной к регистру текста функции contains() jQuery.expr[":"].Contains = function(a,i,m){ return jQuery(a).text().toLowerCase().indexOf(m.toLowerCase())>=0; }; } })(jQuery);

Хорошо спроектированный фильтр - это мощный инструмент, которым могут воспользоваться пользователи. На самом деле это важная функция, если на вашем сайте (интернет-магазине) есть много товара, распределенного по разным категориям.

ИСХОДНИКИ

Для электронной коммерции это способ повысить коэффициент конверсии за счет сокращения времени, необходимого пользователю, чтобы найти то, что он ищет.

Создание таких функций никогда не бывает легким: фильтры сильно зависят от содержимого веб-сайта; Кроме того, панель фильтров не должна отвлекать, основное внимание должно быть уделено контенту / продуктам. Поэтому мы попытались немного упростить вашу жизнь, построив для вас легко настраиваемую и легко интегрируемую панель фильтров CSS.

Он использует преимущества CSS Transitions, CSS Transformations и jQuery для плавного перехода в случае необходимости.

Создание структуры

Структура HTML немного сложнее, чем обычно. Прежде всего, есть два основных блока контента: элементы header и main , второй используется для обертывания как галереи.cd-gallery , так и фильтра.cd-filter . В дополнение к этому у нас есть вкладная навигация (вложенная в 2 div элемента, из-за эффекта выпадающего эффекта, видимого на мобильных устройствах) и триггер фильтра.cd-filter-trigger .

Вы также можете заметить множество имен классов (например, в элементах списка галереи) и фильтры данных: они используются для фильтрации содержимого, а не для стилизации.

Примечание. Назначение элемента.cd-gallery> li.gap - работать в сочетании с текстом: justify; Свойство, примененное к.cd-gallery , чтобы создать сетку галереи. Вам нужно создать столько же элементов.gap , сколько и максимальное количество элементов в строке -1.

Content Filter

• 
  All
  


• All


• Color 1


• Color 2

• 


• 

No results found

Block title

Close

Filters

Добавление стиля

Большая часть CSS касается стилей элементов формы и других базовых украшений. Интересно, как мы определили и использовали некоторые классы - в сочетании с jQuery - для изменения поведения некоторых элементов на основе определенных событий.

Например: на всех устройствах панель фильтров фиксируется, когда она достигает вершины области просмотра. Для достижения этого эффекта мы использовали класс.is-fixed , примененный к элементу main (.cd-main-content), чтобы мы могли ориентировать некоторые его дочерние элементы. В частности: .cd-tab-filter-wrapper находится в статическом положении, в то время как.cd-filter и.cd-filter-trigger находятся в абсолютном положении (относительно.cd-main-content). Когда мы применяем.is-fixed класс к.cd-main-content , мы переключаем положение всех этих элементов на Fixed.

Cd-tab-filter-wrapper { background-color: #ffffff; z-index: 1; } .cd-filter { position: absolute; top: 0; left: 0; width: 280px; height: 100%; background: #ffffff; z-index: 2; transform: translateX(-100%); transition: transform 0.3s, box-shadow 0.3s; } .cd-filter-trigger { position: absolute; top: 0; left: 0; height: 50px; width: 60px; z-index: 3; } .cd-main-content.is-fixed .cd-tab-filter-wrapper { position: fixed; top: 0; left: 0; width: 100%; } .cd-main-content.is-fixed .cd-filter { position: fixed; height: 100vh; overflow: hidden; } .cd-main-content.is-fixed .cd-filter-trigger { position: fixed; }

Еще одна вещь, о которой стоит упомянуть - это.filter-is-visible класс. Он применяется к нескольким элементам, когда пользователь запускает панель фильтра. На всех устройствах оно используется для изменения значения translateX элемента.cd-filter (от -100% до 0). На больших устройствах (> 1170px) мы также нацеливаем на.cd-gallery и.cd-tab-filter и уменьшаем их ширину: таким образом панель не будет перекрывать контент, а пользователь использует дополнительные возможности Пространство для применения фильтров и просмотра изменений одновременно, без необходимости закрывать панель.

Обработка событий

Для реализации функциональности фильтра содержимого мы интегрировали плагин MixItUp jQuery. Чтобы инициализировать плагин в контейнере галереи, мы используем функцию mixItUp () и объявляем переменную buttonFilter , которая содержит все пользовательские функциональные возможности фильтра. Кроме того, мы используем jQuery для открытия / закрытия панели фильтров и исправления (вместе с навигацией с вкладками), чтобы он все еще отображался при прокрутке галереи.

Но еще HTML поддерживает работу с Фильтрами . Применяя различные Фильтры к тексту, можно добиться интересных эффектов. Но будьте осторожны, не все браузеры одинаково отображают эффекты которые должны давать фильтры , некоторые браузеры откровенно игнорируют фильтры. Поэтому тестируйте свои web-странички в различных браузерах. Все Фильтры корректно работают Internet Exhlorer. Итак давайте рассмотрим работу фильтров.

Например мы хотим выделить фразу: "Доброго времени суток!!! " Давайте попробуем поизвращать эту фразу:-) , применяя к ней различные фильтры.

Фильтр Mask.

Выделяет текст, точнее фон на котором написан текст, как будто бы Вы выделили текст мышью.

Синтаксис фильтра: STYLE="filter:Mask(Color="Color")

Color - цвет выделения в шестнадцатиричном виде (напр. #000FFF) или название цвета на английском, например, Red, Blue, Green. Такое определение цвета применяется во всех фильтрах, поэтому дальше это повторяться не будет.

Листинг 19.1.

Фильтр DropShadow.

Добавляет тень к тексту.

Синтаксис фильтра:
STYLE="filter:DropShadow(Color="Color", OffX="Offx", OffY="Offy", Positive="Positive")"

Color - Цвет тени
OffX - Смещение тени по X
OffY - Смещение тени по Y
Positive - Тень слева или справа (0 или 1 соответственно)

Листинг 19.3.

Вот как это смотрится web-странице:

Фильтр FlipV.

Переворачивает текст вертикально.

Синтаксис фильтра: STYLE="filter:FlipV"

Листинг 19.5.

Вот как это смотрится web-странице:

Фильтр Wave.

Делает текст волнистым.

Синтаксис фильтра: STYLE="filter: Wave(Freq="Freq", Add="Add", LightStrength="LightStrength", Phase="Phase", Strength="Strength")"

Freq - колличество волн
Add - показать/скрыть окантовку (1 или 0 соответственно)
LightStrength - сила волн
Phase - угол волн
Strength - интенсивность волн

Листинг 19.7.

Доброго времени суток!!!

Вот как это смотрится web-странице:

Фильтр Blur.

Размывает текст в определенную сторону.

Синтаксис фильтра:
STYLE="filter:Blur(Add="Add", Direction="Direction", Strength="Strength")"

Add - умеренное или сильное размытие (соответственно 1 или 0)
Direction - в какую сторону произойдет размытие (oт 0 до 315)
Strength - смещение размытия

Используя псевдо-класс:checked, можно переключать состояния таких элементов, как checkbox или radio-кнопки. На этом уроке мы будем изучать это свойство CSS3, создав экспериментальный фильтр для портфолио, который будет переключать состояния элементов определенного типа.

На этот урок меня вдохновил блестящей эксперимент Романа Комарова "Фильтрация элементов без JS ", в котором он использует флажки и переключатели для фильтрации цветных форм.

HTML-разметка

Давайте начнем с разметки. Наша цель создать четыре кнопки-фильтра, после нажатия на которые, соответствующие элементы портфолио будут появляются или исчезать. Итак, мы будем использовать несколько переключателей, все они имеют одинаковое имя, так как они должны принадлежать к одной группе (поэтому только один переключатель будет иметь состояние "checked"). По умолчанию, мы хотим, чтобы все переключатели были выбраны или отмечены. Мы добавим несколько тегов label для радио-кнопок, которые мы будем использовать, чтобы скрыть переключатели. Нажатие на label выберет радио кнопку с соответствующими id:

All

Web Design

Illustration

Icon Design

• 
  
  Chameleon
  
  
  
  
• 
  
  
  
• 
  
  
  
  

  Неупорядоченный список будет содержать все элементы портфолио, с ссылками на изображения. Каждый элемент списка будет иметь класс, на основе которого и будет производится фильтрация элементов, когда мы нажмем одну из радио-кнопок.

  CSS

  Мы создадим три примера этого эффекта, но сначала давайте посмотрим на общие стили.

  Я опускаю все префиксы браузеров, но вы можете найти их в исходниках.

  Основной контейнер будет иметь фиксированную ширину:

  Ff-container{
  width : 564px ;
  margin : 10px auto 30px auto ;
  }

  Теги label будут скрывать радио-кнопки и мы зададим им градиент и небольшие тонкие тени:

  Ff-container label{
  font-family : "BebasNeueRegular" , "Arial Narrow" , Arial, sans-serif ;
  width : 25% ;
  height : 30px ;
  cursor : pointer ;
  color : #777 ;
  text-shadow : 1px 1px 1px rgba(255 , 255 , 255 , 0.8 ) ;
  line-height : 33px ;
  font-size : 19px ;
  background : linear-gradient(top , #ffffff 1% , #eaeaea 100% ) ;
  float : left ;
  box-shadow:
  0px 0px 0px 1px #aaa ,
  1px 0px 0px 0px rgba(255 , 255 , 255 , 0.9 ) inset ,
  0px 1px 2px rgba(0 , 0 , 0 , 0.2 ) ;
  }

  Для первого и последнего тега label мы создадим закругленные уголки:

  Ff-container label.ff-label-type-all{
  border-radius: 3px 0px 0px 3px ;
  }
  .ff-container label.ff-label-type-3 {
  border-radius: 0px 3px 3px 0px ;
  }

  Для каждой отмеченной радио-кнопки, мы создадим стили имитирующие эффект "нажатия":

  Ff-container input.ff-selector-type-all : checked ~ label.ff-label-type-all,
  .ff-container input.ff-selector-type-1 : checked ~ label.ff-label-type-1 ,
  .ff-container input.ff-selector-type-2 : checked ~ label.ff-label-type-2 ,
  .ff-container input.ff-selector-type-3 : checked ~ label.ff-label-type-3 {
  background : linear-gradient(top , #646d93 0% , #7c87ad 100% ) ;
  color : #424d71 ;
  text-shadow : 0px 1px 1px rgba(255 , 255 , 255 , 0.3 ) ;
  box-shadow:
  0px 0px 0px 1px #40496e ,
  0 1px 2px rgba(0 , 0 , 0 , 0.1 ) inset ;
  }

  Так как у нас все наши элементы находятся на одном уровне, мы используем обобщенный родственный комбинатор (the general sibling combinator), который обозначается символом "тильда" (~). Селектор в ввиде input.ff-selector-type-3:checked ~ label.ff-label-type-3 значит, что элемент input.ff-selector-type-3:checked следует за элементом label.ff-label-type-3 в иерархии документа, исключая различные комментарии и т.п., и они обязательно имеют одного родителя. Этот «трюк» нам также позволит получить различные типы элементов в портфолио.

  Элементы input могут быть скрыты, поскольку у нас есть label , которые будут делать всю работу:

  Ff-container input{
  display : none ;
  }

  Теперь давайте перейдем к элементам списка:

  Ff-items{
  position : relative ;
  margin : 0px auto ;
  padding-top : 20px ;
  }

  Ff-items a{
  display : block ;
  position : relative ;
  padding : 10px ;
  background : #fff ;
  box-shadow: 0 1px 2px rgba(0 , 0 , 0 , 0.1 ) ;
  margin : 4px ;
  width : 160px ;
  height : 120px ;
  }
  .ff-items a span{
  display : block ;
  background : rgba(113 , 123 , 161 , 0.9 ) ;
  font-style : italic ;
  color : #fff ;
  font-weight : bold ;
  padding : 20px ;
  position : absolute ;
  bottom : 10px ;
  left : 10px ;
  width : 120px ;
  height : 0px ;
  overflow : hidden ;
  opacity: 0 ;
  text-align : center ;
  text-shadow : 1px 1px 1px #303857 ;
  transition: all 0.3s ease-in-out;
  }
  .ff-items a:hover span{
  height : 80px ;
  opacity: 1 ;
  }
  .ff-items li img{
  display : block ;
  }

  Вот и все "общие" стили. Теперь давайте посмотрим стили для фильтрации элементов!

  

  В первом примере мы сделаем, чтобы выбранные элементы (т.е. когда соответствующую кнопку радио "отметили") имели самую высокую яркость.

  Мы добавим transition к элементу списка для создания непрозрачности:

  Ff-items li{
  margin : 0px ;
  float : left ;
  opacity: 0 ;
  width : 188px ;
  height : 148px ;
  transition: opacity 0.6s ease-in-out;
  }

  Затем мы будем использовать обобщенный родственный комбинатор, чтобы установить непрозрачность для соответствующих пунктов:

  Ff-container input.ff-selector-type-all : checked ~ .ff-items li,
  
  
  
  opacity: 1 ;
  }

  Так как у нас все радио-кнопки изначально отмечены, то все элементы будут изначально имеют непрозрачность равную 1.

  Теперь, мы будем использовать селектор:not(), чтобы указать список элементов, которые не имеют выбранного класса и должны иметь прозрачность 0.1:

  
  
  
  opacity: 0.1 ;
  }

  Описания для этих элементов списка не должны показываться при наведении:

  
  
  
  display : none ;
  }

  Это был первый пример. Давайте взглянем на следующий.

  

  В этом примере мы сделаем выбранные элементы увеличенными, в то время как другие уменьшим и сделаем более прозрачными. Итак, давайте добавим transition к элементам списка:

  Ff-items li{
  margin : 0px ;
  float : left ;
  width : 188px ;
  height : 148px ;
  transition: all 0.6s ease-in-out;
  }

  По умолчанию, мы будем иметь все элементы списка нормального размера и с полной непрозрачностью. Когда выбираем один тип, мы хотим, чтобы эти пункты увеличились и также остались полностью непрозрачными:

  Ff-container input.ff-selector-type-1 : checked ~ .ff-items .ff-item-type-1 ,
  .ff-container input.ff-selector-type-2 : checked ~ .ff-items .ff-item-type-2 ,
  .ff-container input.ff-selector-type-3 : checked ~ .ff-items .ff-item-type-3 {
  opacity: 1 ;
  transform: scale(1.1 ) ;
  }

  Другие элементы портфолио мы будем уменьшать и применять к ним низкий уровень прозрачности:

  Ff-container input.ff-selector-type-1 : checked ~ .ff-items li: not(.ff-item-type-1 ) ,
  .ff-container input.ff-selector-type-2 : checked ~ .ff-items li: not(.ff-item-type-2 ) ,
  .ff-container input.ff-selector-type-3 : checked ~ .ff-items li: not(.ff-item-type-3 ) {
  opacity: 0.1 ;
  transform: scale(0.5 ) ;
  }

  И мы опять будем скрывать описание для элементов, которые не выбраны:

  Ff-container input.ff-selector-type-1 : checked ~ .ff-items li: not(.ff-item-type-1 ) span,
  .ff-container input.ff-selector-type-2 : checked ~ .ff-items li: not(.ff-item-type-2 ) span,
  .ff-container input.ff-selector-type-3 : checked ~ .ff-items li: not(.ff-item-type-3 ) span{
  display : none ;
  }

  

  Последний пример всего лишь эксперимент. Мы хотим сделать что-то немного более сложное здесь: при выборе типа, мы хотим масштабировать все элементы, уменьшив их, а затем увеличить только элементы с выбранным типом.

  Мы хотим, чтобы невыбранные элементы исчезли, но так как мы не можем анимировать свойство display, мы используем одну маленькую хитрость: когда мы будем уменьшать элементы, мы изменим ширину и сделаем её равной 0.

  Итак, давайте зададим изначально ширину списка равную 0:

  Ff-items li{
  margin : 0px ;
  float : left ;
  height : 148px ;
  width : 0px ;
  transform: scale(0 , 0 ) ;
  }

  Когда выбран пункт "all", мы изменим масштаб равный 1 и ширину установим равную 188px:

  Ff-container input.ff-selector-type-all : checked ~ .ff-items li{
  width : 188px ;
  transform: scale(1 , 1 ) ;
  transition: transform 0.3s linear;
  }

  Помните, что это состояние на начальном этапе, так как у нас "all" отмечено по умолчанию.

  Теперь, когда мы отмечаем один определенной тип, элементы с этим типом класса будут сначала исчезать вместе с остальными элементами, а затем появляться снова.

  Ff-container input.ff-selector-type-1 : checked ~ .ff-items .ff-item-type-1 ,
  .ff-container input.ff-selector-type-2 : checked ~ .ff-items .ff-item-type-2 ,
  .ff-container input.ff-selector-type-3 : checked ~ .ff-items .ff-item-type-3
  {
  transition: transform 0.3s linear, width 0s linear 0.3s;
  animation: scaleUp 0.3s linear 0.4s forwards;
  }
  .ff-container input.ff-selector-type-1 : checked ~ .ff-items li: not(.ff-item-type-1 ) ,
  .ff-container input.ff-selector-type-2 : checked ~ .ff-items li: not(.ff-item-type-2 ) ,
  .ff-container input.ff-selector-type-3 : checked ~ .ff-items li: not(.ff-item-type-3 )
  {
  animation: scaleDown 0.3s linear forwards;
  }
  @keyframes scaleUp {
  50% { width : 188px ; transform: scale(0 , 0 ) ; }
  100% { width : 188px ; transform: scale(1 , 1 ) ; }
  }
  @keyframes scaleDown {
  0% { width : 188px ; transform: scale(1 , 1 ) ; }
  99% { width : 188px ; transform: scale(0 , 0 ) ; }
  100% { width : 0px ; transform: scale(0 , 0 ) ; }
  }

  Обратите внимание, что этот пример экспериментальный и он будет корректно работать только в браузерах, поддерживающих CSS анимацию. В Firefox 9.0.1 поведение не то, которое ожидалось (при наведении на label анимация срабатывает еще раз), но все работает в Авроре 11.0a2, так что может быть это баг браузера.

  Перевод статьи Mary Lou с tympanus.net/codrops
  

  Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим