Эффекты для изображений в браузерах webkit

Содержание

Dobrovoi Master

Оригинальные hover-эффекты для изображений на чистом CSS3

Прежде всего, для тех кто не совсем ещё в теме или совсем не в теме, поясню вкратце, что такое hover-эффекты. Это различные виды эффектов (всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение и т.д и т.п.) применяемые к элементам веб-сайта при наведении на них курсора мыши. Реализованы эти эффекты могут как с помощью различных плагинов jQuery, так и на чистом CSS3.
Сегодня я подготовил большую подборку оригинальных hover-эффектов для изображений созданных с помощью CSS3, без подключения javascript-библиотек. О достоинствах и недостатках реализации hover-эффектов на чистом CSS3 не буду, это другая тема, просто смотрите примеры, и при необходимости используйте понравившийся у себя на сайте. Все эффекты представленные в обзоре снабжены демонстрационным примером и подробной документацией с исходниками. Мануалы по-большей части на буржуинском, но всё более-менее интуитивно понятно.

Сразу хочу обратить ваше внимание на то, что все эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.

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

Hover Effect Ideas

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

iHover

iHover это впечатляющая коллекция эффектов при наведении на чистом CSS3, с поддержкой Bootstrap 3. Построен на Scss CSS (файл), легко модифицируется переменными. Код модульный, нет необходимости включать в работу весь файл. 30+ различных эффектов в одном пакете. Всё довольно хорошо документировано, эффекты очень просты в использовании. Все, что вам нужно сделать, это правильно выстроить HTML-разметку и подключить файл CSS в работу.

Caption Hover Effects

Создаёт несколько простых, но стильных эффектов при наведении для подписей изображений. Идея заключается в том, чтобы при наведении на миниатюры, получить эффектное появление заголовка, имя автора и кнопки связи. Для некоторых эффектов использованы визуальные 3D-преобразования.

Эффект перехода CSS3

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

Hover-эффекты для миниатюр на CSS3

Разработчик позиционирует свою работу, как пример галереи изображений с эффектами переходов при появлении аннотаций(подписей) к миниатюрам. Заявлена уверенная поддержка современными браузерами, включая IE 9+. Полноценной галереей, конечно назвать это сложно, а вот эффект появления подписей, довольно интересный.

Circle Hover Effects

Очередной набор правил CSS, для создания впечатляющих эффектов преобразований при наведении на абсолютно круглые миниатюры. Пакет содержит 7 видов переходов CSS3, очень подробная документация по настройке и использованию. Эффекты поддерживаются всеми современными браузерами.

Вращение миниатюр при наведении

Простой эффект вращения круглых миниатюр при наведении на них курсора мыши, примерно такой же вы можете видеть у меня на блоге, в анонсах записей на главной. Реализуется парой-тройкой строк кода css.

Sexy Image Hover Effects

Если перевести дословно:»Сексуальный эффект при наведении на изображения». Что-то такого сексуального, в этом эффекте вы конечно же вряд ли заметите, если только у вас не буйная фантазия, но эффект по своему интересен и обратить внимание на него стоит.

5 Hover-эффектов на CSS3

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

Анимация подписей изображений

4 Вида эффектов анимации подписей изображений, реализованных исключительно средствами CSS3. Разные позиции при появлении и эффекты переходов, вполне себе стандартное исполнение. Чтобы понять, как работает анимация, загляните в исходный код демо-страницы, отдельной документации не обнаружил.

Hover-эффекты с элементами анимации

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

Изменение яркости картинок

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

10 Image Hover Effects

Ещё один набор из 10 hover-эффектов для изображений, различные видоизменения миниатюр при наведении, увеличение, ротация, поворот, затемнение и т.д.

Border Animation Effect

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

Original Hover Effects With CSS3

Оригинальные hover-эффекты на CSS3 применяемые для эффектного появления подписей миниатюр изображений при наведении. В набор правил CSS входят 10 различных эффектов, которые вы можете использовать отдельно для разных картинок. Эффекты по-настоящему впечатляют, особенно понимая то, что всё это сделано лишь с помощью CSS3. Подробное руководство, поможет вам разобраться что к чему.

Shape Hover Effect

Идея состоит в том, чтобы создать SVG, который представляет собой форму-фон для какой-то надписи и превращается в другую форму при наведении курсора мыши. Таким образом можно сделать множество разных вариантов, в примере же, показаны три вида эффектов переходов. Достоинством использования SVG является то, что мы можем изменить размер формы в соответствии размеров родительского контейнера.

Раздвижные изображения

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

Slick CSS3 Animated Image

С этим эффектом всё просто, подписи к картинкам выскальзывают в верху справа или слева в низу, в виде ленты с полупрозрачным тёмным фоном, всё очень просто переформируется с помощью свойств css.

Всплывающая подпись при наведении

Интересное решение, миниатюры представлены в затемнённом виде, при наведении на них изображения проявляются и всплывает подпись на светлом фоне.

Диагональное появление подписи

Подпись к изображению появляется из угла и расширяется на всю площадь картинки по диагонали.

Анимированные заголовки миниатюр

Ещё несколько интересных решений для реализации всплывающих подписей к миниатюрам изображений. В онлайн-редакторе вы можете поэкспериментировать с параметрами и добиться более впечатляющих результатов.

Подчёркнутые или очерченные подписи к миниатюрам

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

Причудливые формы и zoom-эффект

Причудливые формы и эффект увеличения в связке с анимационным эффектом появления подписей к миниатюрам изображений.

Слайд-эффект для подписей изображений

Пример создания визуального слайд-эффекта для вывода объёмных подписей к изображениям с использованием только CSS3 и HTML5.

6 Подписей к картинкам

6 Вариантов появления всплывающих подписей к картинкам при наведении с помощью CSS3. Подробнейший урок по реализации и настройке, доступные для скачивания исходники.

Ну и наконец, напоследок так сказать, не могу не упомянуть о самом простейшем способе создания всплывающей подписи к миниатюре с помощью CSS3.

Об этом способе я рассказывал в одном из предыдущих своих уроков: Тынц.

Хотите приступить к работе над созданием сайта как можно быстрее? Теперь это абсолютно возможно! По той простой причине, что на маркетплейсе TemplateMonster появился новый раздел с HTML шаблонами на русском языке . Коллекция будет пополняться, но и сейчас уже можно присмотреть что-то подходящее для вашего онлайн-проекта. Все, что вам нужно сделать — это выбрать свое идеальное готовое решение и поработать с презентацией нужной информации. И не забывайте, что текст для шаблона был написан вручную.

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Эффекты для изображений на CSS

Фильтры CSS позволяют применять к изображениям эффекты, аналогичные фильтрам Photoshop.

Синтаксис свойства filter выглядит следующим образом:

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

Параметры, которые может принимать свойство:

  • Размытие (blur) – эта функция размывает изображение. Чем больше значение, тем сильнее эффект размытия. Значение по умолчанию равно 0.
  • Яркость (brightness) – значение 0% сделает изображение абсолютно черным, 100% оставит его без изменений, а более – повысит яркость.
  • Контрастность (contrast) – значение 0% сделает изображение полностью серым, 100% оставит исходное изображение без изменений, больше – повысит контрастность.
  • Тень (drop-shadow) –создает эффект тени на изображении. Функция принимает один из следующих параметров:
    • Горизонтальная тень (Н-shadow) – обязательный параметр. Он устанавливает смещение тени по горизонтали. Отрицательное значение задает сдвиг тени влево.
    • Вертикальная тень (V-shadow) – обязательный параметр. Задает смещение тени по вертикали. Отрицательное значение сдвигает тень вверх.
    • Цвет (color) – необязательный параметр. Если он не указан, браузер добавляет определенный цвет к тени.
    • Растяжение (spread) – необязательный параметр. Устанавливается в пикселях. Положительное значение растягивает тень, а отрицательное – сжимает.
  • Grayscale – значение 0% оставляет изображение без изменений, а 100% преобразует его в черно-белое. Значение по умолчанию равно 0;
  • Инверсия (invert) – инвертирует цвета исходного изображения. Значение 0% оставляет изображение без изменений, а значение 100% полностью инвертирует изображение (негатив). Значение по умолчанию равно 0.
  • Насыщенность (saturate) – управляет цветовой насыщенностью. Значение 0% делает изображение черно-белым, значение 100% оставляет изображение без изменений, выше – повышает насыщенность. Значение по умолчанию равно 1.
  • Поворот оттенка (hue-rotate) – меняет оттенки цветов изображения. Значение 0 градусов оставляет изображение без изменений, максимально допустимое значение – 360 градусов.
  • Непрозрачность (opacity) – значение 0% делает изображение полностью прозрачным, 100% оставляет изображение без изменений. Значение по умолчанию равно 1. Отрицательные значения недопустимы.
  • Сепия (sepia) – эффект «старения» изображения. Значение 0% оставляет изображение без изменений, 100% полностью преобразует изображение в сепию. Значение по умолчанию 0, отрицательные – недопустимы.
  • url –принимает местоположение XML- файла, который определяет фильтр SVG.

Исходное изображение, которое мы будем изменять с помощью фильтров CSS, выглядит следующим образом:

Filter: saturate

Первое значение свойства filter меняет цветовую насыщенность изображения.

Filter CSS 3 – фильтры изображений

Привет друзья, сегодня у меня для вас действительно БОЛЬШОЙ урок, целых 27 минут. Но в нём мы будем рассматривать ну просто очень, очень, очень интересное свойство, которое позволит Вам задавать различные спецэффекты для изображений, не лазя в программу Photoshop и другие редакторы.

Filter – это свойство в CSS3, которое может видоизменять ваши картинки. Накладывать размытость, увеличивать контраст и яркость, добавлять тень, менять цвета и многое, многое другое.

Всего у Filter есть 10 значений, которые позволяют вытворять «всякую интересную всячину» с элементами сайта. Предлагаю теперь, разобрать все эти 10 значений на практике в видеоуроке ниже.

Видео Filter CSS 3 – фильтры изображений:

Пример страницы, которую мы создаём в уроке:

Скачать файл-заготовку можно по этой ссылке.

Кому лень смотреть видео, можете посмотреть подробную инструкцию ниже со всеми правилами фильтров.

10 эффектов фильтров в CSS3

Обращаю внимание, что все эффекты на картинках ниже, реализованы только при помощи CSS3, поэтому в старых браузерах они видны не будут.

1. Фильтр размытие — blur

Если говорить простым языком, то это обычное размытие картинки. Фильтр подойдет, если вам нужно сделать края более мягкими. За счет размытия создается ощущение фона, который не в фокусе.

Давайте попробуем применить наш фильтр на лисичке, прописав вот такой код:

Слева, для наглядности, я поставил обычную картинку, а вот справа то же самое изображение, только изменённое при помощи CSS3.

Фильтр со значением blur указывается именно в пикселях. Причем, чем больше это значение, тем больше проявляется размытость картинки.

Фильтр яркость — brightness

Этот фильтр напоминает изменение яркости экрана телевизора. В данном случае регулируется цвет между черным и оригинальным цветом по мере добавления параметров.

А вот и наш подопытный конь:

Регулировать вы можете от 0% и более. При 0% изображение будет черным, при 100% — оригинальным, а при 200% — станет ярче в два раза. Это очень хороший эффект, особенно для темных изображений.

Фильтр brightness может задаваться 3 способами:

Причем ограничений в принципе нет. В примере мы поставили значение 2 и увеличили яркость нашей картинки на 2 раза или на 200%.

3. Фильтр контрастность — contrast

Этот фильтр позволит вам повысить контраст картинки, регулируя разницу между светлыми и темным тонами изображения. Здесь значения также задаются тремя способами: целые числа, дробные числа и проценты. Таким образом, 100% — это значение по умолчанию. 0% — черное изображение. А все, что больше 100%, добавляет вам контраст.

На этот раз будем издеваться над котом. Добавим ему на +50% контрастности:

Как видите, теперь мы даже можем не пользоваться Photoshop для создания контраста и размытия. Вот прямо в CSS берём и изменяум изображения, как нашей душе угодно.

4. Фильтр насыщенность — saturate

Это очень классный эффект, который сделает ваши изображения более яркими и насыщенными. Значения указываем в трех вариантах: целые и дробные числа, а также, проценты. Укажем значение — 200%. Повысим насыщенность нашей картиночки в 2 раза.

Море стало заметно приятнее:

Посмотрите, насколько сочное получилось изображение. По, моему очень классный эффект! Поедем??

5. Фильтр прозрачность — opacity

Устанавливает прозрачность. На значения данного фильтра вводятся определенные ограничения:

  • целые и дробные числа: от 0 до 1
  • проценты: от 0% до 100

Давайте попробуем уменьшить прозрачность на 50% следующей картинке.

Посмотрите, что вышло:

6. Фильтр Инверсия — invert

Он позволяет вам «переворачивать» цвета. На значения данного фильтра также вводятся ограничения:

  • целые и дробные числа: от 0 до 1
  • проценты: от 0% до 100
Цукерберг рекомендует:  Выплывающий блок с помощью jQuery

В нашем случае установим максимальное значение — 100 %:

И красивая спортивная машина лёгким движением руки превращается в.

Этот фильтр помог нам создать эффект негатива на самом изображении.

7. Фильтр cепия — sepia

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

  • целые и дробные числа: от 0 до 1
  • проценты: от 0% до 100

Ну что? Попробуемс?

Трах-тибидох! Лёгким мановением руки мы состарим это фото на пару десятков лет Кажется, у меня крыша потекла с этими примерами.

В нашем случае мы указали дробное значение — 0,5. Но вы можете экспериментировать, как вашей душе угодно!

8. Фильтр оттенки серого — grayscale

Данный фильтр позволяет нам превращать цвета в оттенки серого. На значения фильтра также наложены ограничения:

  • целые и дробные числа: от 0 до 1
  • проценты: от 0% до 100

Таким образом, при 100% все изображение будет с оттенками серого, а при 0% останется неизменным. 0 приравнивается к 0%, а 1,0 — к 100%.

Зададим значение — 0.7 (или 70%):

9. Фильтр оттенок освещения — hue-rotate

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

Мы зададим значение — 300 градусов:

Ну и кто здесь говорил, что розовых обезьян не бывает?

10. Фильтр тень — drop-shadow

Фильтр задается сразу несколькими значениями. Сначала мы задаем значение по оси X, потом — по оси Y. Так мы обозначаем смещение тени по оси X и Y. Далее указывается радиус нашей тени и последним атрибутом — ее цвет.

В нашем случае укажем смещение тени на 3 пикселя, размер 5 и цвет тёмно-серый.

Обратите внимание, за счёт тени создается впечатление, будто вторая картинка приподнята.

Кстати, в самом видео-уроке мы не только разбирали все эти свойства, но и учились делать анимацию. И в нём создавали эффект поднятия картины при наведении. В Демо есть пример

PS: Друзья, если Вы хотите полностью изучить HTML5 и CSS3, и научиться верстать классные сайты – записывайтесь на тренинг Верстаем на 5+

Там вас ждем много интересных фишек и секретов по созданию сайтов. Будет интересно!

Супер статья. Я думал, что много знаю о CSS, но эта статья вдохновила на столько идей .

Ниче себе! Спасибо Серж!)

Как всегда — круто! Очень полезно! Спасибо!

И тут же я решил проверить действие фильтра в разных браузерах.

Подопытными кроликами стали:

Pale Moon (Версия 25.2.1 (x64))

Comodo Dragon (Версия 36.1.1.21)

Opera (Версия 27.0)

Vivaldi (Версия 1.0.83.38)

и Internet Explorer (Версия 11 не обновлял давно).

Разочаровал мой любимый Pale Moon. Кроме drop-shadow не работала ни одна картинка. Да и то без отбрасывания тени. И это учитывая, что Pale Moon разработан на основе FireFox. Может с настройками у меня что-то не в порядке ?

Comodo Dragon все показал как надо — чем и порадовал.

Opera тоже блестнула. Всё абсолютно без нареканий.

Vivaldi удивил. Картинки (все) сначала пропадали вовсе, а потом появлялись уже с готовым эффектом (примерно через секунду). Полагаю, что, отколовшись от Opera , Vivaldi пишут с какими-то новыми прибабахами о которых я не знаю. Ну и ладно. Не о браузерах речь.

Internet Explorer отработал полностью Pale Moon —но подобным образом. Т.е. почти никак.

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

За сим разрешите мне завершить свой пост.

Спасибо Серёга.За время знакомства с тобой, я получил действительно много полезного контента. Но самое главное, что в наше быстротечное время, с кучей информации, твоя полезна своей новизной и важностью.Если ты предлагаешь обратить на, что то внимание, значит это самая современная тенденция.Не исключение изучение РЕЬД-5 и CSS-3 Спасибо.

Провёл проверку в Safari браузере(IPad 2). Всё прекрасно работает! Версия браузера последняя на данный момент

«Как видите, теперь мы даже можем не пользоваться Photoshop для создания контраста и размытия. grin Вот прямо в CSS берём и изменяум изображения, как нашей душе угодно. «. Ага будем использовать методы которые жрут cpu, и оперативку(а если акселерация у браузера то оперативку x2)

Ага будем сидеть в каменном веке и работать только на калькуляторах. Мамонты вымирают, знаете ли Технологии придумывают для того, что бы их использовали. Одна картинка с анимацией на страницу — ничего не сделает.

Vavik 96

Интернет дайджест для вебмастеров и фотографов

Hover-эффекты для изображений на чистом CSS3

Прежде всего, для тех кто не совсем ещё в теме или совсем не в теме, поясню вкратце, что такое hover-эффекты. Это различные виды эффектов (всплывающие подписи, подсказки, плавные переходы, трансформация, ротация, увеличение, смещение и т.д и т.п.) применяемые к элементам веб-сайта при наведении на них курсора мыши. Реализованы эти эффекты могут как с помощью различных плагинов jQuery, так и на чистом CSS3.
Сегодня я подготовил большую подборку оригинальных hover-эффектов для изображений созданных с помощью CSS3, без подключения javascript-библиотек. О достоинствах и недостатках реализации hover-эффектов на чистом CSS3 не буду, это другая тема, просто смотрите примеры, и при необходимости используйте понравившийся у себя на сайте. Все эффекты представленные в обзоре снабжены демонстрационным примером и подробной документацией с исходниками. Мануалы по-большей части на буржуинском, но всё более-менее интуитивно понятно.

Сразу хочу обратить ваше внимание на то, что все эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.

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

Hover Effect Ideas

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

iHover

iHover это впечатляющая коллекция эффектов при наведении на чистом CSS3, с поддержкой Bootstrap 3. Построен на Scss CSS (файл), легко модифицируется переменными. Код модульный, нет необходимости включать в работу весь файл. 30+ различных эффектов в одном пакете. Всё довольно хорошо документировано, эффекты очень просты в использовании. Все, что вам нужно сделать, это правильно выстроить HTML-разметку и подключить файл CSS в работу.

Caption Hover Effects

Создаёт несколько простых, но стильных эффектов при наведении для подписей изображений. Идея заключается в том, чтобы при наведении на миниатюры, получить эффектное появление заголовка, имя автора и кнопки связи. Для некоторых эффектов использованы визуальные 3D-преобразования.

Эффект перехода CSS3

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

Hover-эффекты для миниатюр на CSS3

Разработчик позиционирует свою работу, как пример галереи изображений с эффектами переходов при появлении аннотаций(подписей) к миниатюрам. Заявлена уверенная поддержка современными браузерами, включая IE 9+. Полноценной галереей, конечно назвать это сложно, а вот эффект появления подписей, довольно интересный.

Circle Hover Effects

Очередной набор правил CSS, для создания впечатляющих эффектов преобразований при наведении на абсолютно круглые миниатюры. Пакет содержит 7 видов переходов CSS3, очень подробная документация по настройке и использованию. Эффекты поддерживаются всеми современными браузерами.

Вращение миниатюр при наведении

Простой эффект вращения круглых миниатюр при наведении на них курсора мыши, примерно такой же вы можете видеть у меня на блоге, в анонсах записей на главной. Реализуется парой-тройкой строк кода css.

Sexy Image Hover Effects

Если перевести дословно:”Сексуальный эффект при наведении на изображения”. Что-то такого сексуального, в этом эффекте вы конечно же вряд ли заметите, если только у вас не буйная фантазия, но эффект по своему интересен и обратить внимание на него стоит.

5 Hover-эффектов на CSS3

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

Анимация подписей изображений

4 Вида эффектов анимации подписей изображений, реализованных исключительно средствами CSS3. Разные позиции при появлении и эффекты переходов, вполне себе стандартное исполнение. Чтобы понять, как работает анимация, загляните в исходный код демо-страницы, отдельной документации не обнаружил.

Hover-эффекты с элементами анимации

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

Изменение яркости картинок

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

10 Image Hover Effects

Ещё один набор из 10 hover-эффектов для изображений, различные видоизменения миниатюр при наведении, увеличение, ротация, поворот, затемнение и т.д.

Border Animation Effect

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

Original Hover Effects With CSS3

Оригинальные hover-эффекты на CSS3 применяемые для эффектного появления подписей миниатюр изображений при наведении. В набор правил CSS входят 10 различных эффектов, которые вы можете использовать отдельно для разных картинок. Эффекты по-настоящему впечатляют, особенно понимая то, что всё это сделано лишь с помощью CSS3. Подробное руководство, поможет вам разобраться что к чему.

Shape Hover Effect

Идея состоит в том, чтобы создать SVG, который представляет собой форму-фон для какой-то надписи и превращается в другую форму при наведении курсора мыши. Таким образом можно сделать множество разных вариантов, в примере же, показаны три вида эффектов переходов. Достоинством использования SVG является то, что мы можем изменить размер формы в соответствии размеров родительского контейнера.

Раздвижные изображения

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

Slick CSS3 Animated Image

С этим эффектом всё просто, подписи к картинкам выскальзывают в верху справа или слева в низу, в виде ленты с полупрозрачным тёмным фоном, всё очень просто переформируется с помощью свойств css.

Всплывающая подпись при наведении

Интересное решение, миниатюры представлены в затемнённом виде, при наведении на них изображения проявляются и всплывает подпись на светлом фоне.

Диагональное появление подписи

Подпись к изображению появляется из угла и расширяется на всю площадь картинки по диагонали.

Анимированные заголовки миниатюр

Ещё несколько интересных решений для реализации всплывающих подписей к миниатюрам изображений. В онлайн-редакторе вы можете поэкспериментировать с параметрами и добиться более впечатляющих результатов.

Подчёркнутые или очерченные подписи к миниатюрам

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

Причудливые формы и zoom-эффект

Причудливые формы и эффект увеличения в связке с анимационным эффектом появления подписей к миниатюрам изображений.

Наложение иконки на изображение

Замечательные эффекты наложения иконки на миниатюры изображений в различных вариациях появления. В примере использован символ (+) очерченный кругом с помощью border-radius: в CSS, так же можно использовать шрифт-иконки, для большей информативности всплывающей панели.

6 Подписей к картинкам

6 Вариантов появления всплывающих подписей к картинкам при наведении с помощью CSS3. Подробнейший урок по реализации и настройке, доступные для скачивания исходники.

Caption Hover Effects

How to create some subtle and modern caption hover effects.

Learn how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button.

Direction aware CSS3 Hover Effect with jQuery

Create a direction-aware hover effect using CSS3 and jQuery.

Learn how to create a direction aware hover effect using some CSS3 goodness and jQuery. The idea is to have a little overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse.

Circle Hover Effects with CSS Transitions

A tutorial about how to create different hover effects on circles with CSS transitions and 3D rotations

In this tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites.

Animated Text and Icon Menu with jQuery

Learn how to create a slick menu with a nice animation feature on hover.

Make elements slide out, change and animate the background color of the item and then slide the elements back in with a different color.

CSS3 Hover Effects

Beautiful CSS3 Image Effects

This tutorial will show you five examples of CSS3 hover effects using different CSS properties. Please note that the CSS3 effects will only work properly in modern browsers that support the CSS3 properties in use.

Unique CSS Button Hover Effects

Some creative and modern button styles and effects for your inspiration.

This CSS button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons a bit of JavaScript to add/remove effect classes is used.

Icon Hover Effects

A set of simple round icon hover effects with CSS transitions and animations for your inspiration.

Here’s a collection of simple icon hover effects. Create a subtle and stylish effect using CSS transitions and animations on the anchors and their pseudo-elements.

CSS фильтры изображений, webkit фильтры для CSS

Для начала, маленькое введение в понятие WebKit. Webkit браузеры – это браузеры, которые поддерживают технологию webkit (бесплатная технология для отображения htmlстраниц). Полный список браузеров, которые поддерживают webkitcss фильтры можно посмотреть в википедии. Вот некоторые, наиболее известные: Safari, Chrome, AppleiOS, GoogleAndroidи другие.

CSS фильтры изображений

Для начала мы создадим HTML файл, выведем изображение и будем тестировать css фильтры. У меня файл следующего содержания:

Попрошу заметить, что данные фильтры новые и требуют проверки на кроссбраузерность. Для проверки работы кода, вам необходимо установить Google Chrome Canary (http://tools.google.com/dlpage/chromesxs).

Фильтр hue-rotate

Наверняка, вы работали с панелью насыщенности в Photoshop. Теперь это можно делать в браузере с помощью фильтра насыщенности hue-rotate.

Данный фильтр, принимает значения в градусах (50 degree, сокращенно deg). Это подобно колесу в фотошопе, которое вы можете вращать. Здесь, то же самое. Давайте посмотрим, какой получился эффект:

Также можно задавать анимацию, которая позволит меняться эффектам поочередности, вот пример кода.

Фильтр grayscale

Раньше мы использовали множество хаков, чтобы вывести изображение в браузер в черно-белом виде. Также, можно было создавать два изображения и применять свойство hover. Или использовать библиотеку Canvas. Теперь, эту проблему можно решить с помощью одной строки css кода и фильтра grayscale:

Применяя градацию в процентах к фильтру grayscale, просто подумайте, насколько вы хотите видеть изображение серым? (0 – 100%).

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

Фильтр sepia

Любите стиль старого запада? Вот еще один фильтр, который обеспечит красивый эффект для изображений вашего сайта.

Фильтр sepia, более красиво выглядит на фотографиях. Давайте посмотрим, как это будет выглядеть на моей фотографии.

Фильтр blur

Передавая радиус размытия, мы можем реализовать красивый эффект размытия, с помощью фильтра blur.

Фильтр brightness

Фильтр brightness (яркость), принимает значения в процентах. 100% — не меняет ничего, чем ниже, тем темнее будет изображение. Лучше применять этот эффект для фотографий.

Фильтр contrast

Подобно предыдущему фильтру, можно задавать контрастность изображения с помощью фильтра contrast. Изначальная позиция – это 100% (при этом на изображении, вы не увидите изменений). Рассмотрим, как можно применять этот фильтр:

Также можно сделать красивую анимацию, используя webkit фильтр контраста и CSS код:

Фильтр invert

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

Фильтр saturate

Ранее, мы применяли эффект grayscale(100%), такого же эффекта можно добиться применяя фильтр saturate(0%). Это фильтры антагонисты. Давайте посмотрим как работает фильтр насыщенности.

Применяя значение 500% и более, мы получим следующий эффект:

Комбинирование фильтров

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

На сегодня все! Если остались вопросы по поводу использования webkit css фильтров изображений, можете писать в комментарии.

10 простых эффектов при наведении без плагинов.

Приветствую вас, дорогие друзья!

Цукерберг рекомендует:  Вакансии РДВ-Медиа

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

1. CSS-эффект появления тени при наведении

Начнем с самого простого эффекта – это эффект появления тени при наведении.

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

  1. 1. Прежде всего, мы открываем страницу или запись или виджет, или файл темы, где у вас расположен этот элемент.
  2. 2. Далее нам нужно будет присвоить ему класс с названием hover-effect1. В моём примере он присвоен для кнопки и для изображения.

Кстати, в WordPress, для того, что бы присвоить CSS-класс изображению не нужно переходить на вкладку «Текст», а можно просто кликнуть по изображению на вкладке «Визуально», далее кликнуть по значку карандашика.

Затем разворачиваем дополнительные настройки, и здесь мы можем дописать дополнительный CSS-класс. После чего нажимаем на кнопку «Обновить».

Либо же можно перейти в раздел «Внешний вид» => «Редактор». Здесь у нас обычно файл стилей открыт сразу же по умолчанию. Но на всякий случай убедитесь, что у вас в заголовке над рабочей областью написано «Таблица стилей (style.css)».

После чего нажать на кнопку «Обновить файл» внизу страницы

Для того, чтобы у нас определённые CSS-свойства работали при наведении, нам необходимо использовать псевдокласс :hover.
CSS-стили, которые написаны для этого селектора будет работать только в том случае, когда на элемент наведен указатель мышки.

box-shadow – данное CSS свойство отвечает за добавление тени. Более подробно об особенностях этого свойства и значении его параметров я писала в этой статье.

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

Так же, для того, что бы эта тень у нас не только появлялась, но и исчезала плавно, нам необходимо свойство transition для самого класса hover-effect1

Так же для этой тени вы можете изменять смещение, уровень размытия, цвет и т.д. Более подробно об этом у меня было отдельное видео и отдельная статья, с которой вы можете ознакомиться по этой ссылке: Как сделать тень картинки в CSS?

Создаем потрясающие эффекты для изображений при помощи свойства backdrop-filter

Дата публикации: 2020-12-22

От автора: сегодня мы поговорим о CSS свойстве backdrop-filter, которое было представлено в спецификации Filter Effects Module Level 2. В частности, мы разберем синтаксис свойства, поддержку в браузерах и практическое применение.

Свойство backdrop-filter — это не просто фильтры

Скорее всего, вы уже слышали про CSS фильтры. Если все же вам нужно напомнить, можете прочитать отличную статью «CSS фильтры: размытие, оттенки серого, яркость и т.д. в CSS!».

Свойство filter позволяет применять на элементы такие эффекты, как размытие и сепию, а с помощью свойства backdrop-filter мы сможем применять те же самые эффекты, но уже к фону за элементом. В демо ниже показана разница (вы должны сидеть через браузер с поддержкой, например, через Chrome с активированным флагом Experimental Web Platform Features – более подробно о поддержке в браузерах см. в следующей секции):

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Синтаксис и поддержка в браузерах

Часть функций, с которыми вы вероятно уже знакомы, свойство backdrop-filter переняло у свойства filter. Данные значения можно применить к любому элементу с помощью следующего синтаксиса:

Как и со свойством filter, тут можно применять несколько фильтров к фону элемента. Все значения, подходящие для filter, также подходят и для свойства backdrop-filter. Свойство поддается анимации.

Несмотря на все сходства, у свойства backdrop-filter не такая широкая поддержка, как у filter. Прямо сейчас без флага данное свойство поддерживает только Safari 9, и даже в этом браузере придется использовать префикс –webkit-.

В браузерах Chrome и Opera можно активировать флаг «Experimental Web Platform Features» по адресу «chrome://flags». В Firefox и Edge данное свойство не поддерживается вовсе. Более подробно изучить поддержку в браузерах для свойства backdrop-filter можно на сайте Can I use.

Как использовать свойство backdrop-filter

Для правильной работы свойство backdrop-filter требует минимум два элемента: целевой элемент и второй элемент, расположенный под целевым, к которому будет применяться эффект. В демо выше фоновый эффект создается при помощи следующей разметки:

Также мы использовали стили ниже, чтобы применить фильтр к фону нашего элемента, а также чтобы установить фон текста:

Еще один интересный способ применения данного свойства заключается в том, чтобы применять разные фильтры к разным частям изображения. Я говорю не об одновременном применении нескольких фильтров, что тоже возможно. Я имею в виду, что можно применить фильтр grayscale к левой части изображения, а sepia – к правой. Или же можно разбить изображение на несколько частей и применить фильтр hue-rotate ко всем частям с разным значением. Один из способов сделать так заключается в том, что целевым элементам необходимо выставить прозрачность в ноль, чтобы они не влияли на изображение под ними, к которому применяются фильтры.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

В моем случае результат такой:

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

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

При наведении курсора мыши на изображение ширина первого div’а и высота второго div’а меняются от 0% до 80% за 0.5 секунды. Изображение делится на 4 секции, к каждой из которых применена своя комбинация фильтров:

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

Практическое применение

Создавать все эти красивые эффекты при помощи свойства backdrop-filter, конечно, хорошо, но у данного свойства много способов практического применения. Первое, что пришло мне в голову, когда я узнал об этом свойстве – как его использовать для размытия изображения и предупреждать пользователей перед показом какого-либо графического контента.

Для начала нам понадобится следующая разметка:

Помещаем в контейнер div как само изображение, которое будем размывать, так и текст с предупреждением. Текст предупреждения оборачивается в еще один div с высотой и шириной изображения.

CSS код для создания эффекта размытия изображения:

Можете поиграться с разными фоновыми цветами и фильтрами и подобрать то, что вам подходит. В демо ниже я также добавил немного JS, чтобы прятать текст с предупреждением по клику на кнопку «Show Me». Попробуйте:

С помощью свойства backdrop-filter также можно размывать фон при показе модальных окон пользователям, а также для размытия фона за выдвигающимся меню при его открытии. Еще один способ применения свойства backdrop-filter – размывать изображения на сайте до их полной загрузки, как это делается на сайте Medium.

Заключение

С помощью свойства backdrop-filter вы сможете воссоздавать множество эффектов, для которых раньше нужен был JS. Однако я бы посоветовал подождать нормальной поддержки в браузерах перед использованием свойства в продуктиве. Помимо всего прочего, нужно помнить еще о производительности. Если использовать свойство на большом количестве элементов или на больших областях страницы, производительность сильно падает.

Более подробно изучить свойство backdrop-filter можно в черновике W3C и в документации на MDN. А вы знаете какие-либо интересные способы применения данного свойства? Думаете ли использовать его в будущем? Пишите об этом в комментариях.

Автор: Asha Laxmi

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

CSS фильтры изображений

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

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

Но все же в CSS-фильтрах имеется один небольшой недостаток – не все веб-браузеры поддерживают визуальные эффекты. Разумеется, это лишь вопрос времени. И к наступлению часа «х» разработчикам нужно быть готовым. А пока рассмотрим то, что на данный момент уже реализовано.

Поддержка CSS фильтров браузерами

В основном все ходовые браузеры, Firefox, Chrome, Opera, имеют «дружеское» отношение с фильтр-эффектами. Чего не скажешь о IE, который напрочь отказывается поддерживать эффекты, даже в самых поздних версиях.

Браузер Explorer Chrome Firefox Safari Opera Android iOS
Версия no 31+ 35+ 7+ 18+ 4.4+ 6+
filter (-webkit-) + (-webkit-) (-webkit-) (-webkit-) (-webkit-)

Функции и синтаксис CSS фильтров

Во всех свойствах CSS имеются некие параметры, сочетающие в себе порядок прописывания значений. Свойство filter не является исключением, как и другие, оно может использовать комбинацию нескольких правил в одном применении. К примеру, добавить фильтр яркости для изображения, а через пробел указать еще один — контрастность. Мы рассмотрим все в этой статье с несколькими примерами для лучшего понимания.

Синтаксис

Список фильтров

Фильтр Описание
blur (px) Фильтр для размытия изображения. Степень размытия указывается в пикселях. Если число не задано, то по умолчанию используется 0.
drop-shadow () Тень. Альтернатива свойству box-shadow с аналогичными параметрами и тем же порядком прописывания. Исключением является четвертое значение «растяжение»: почти все браузеры его не поддерживают.
grayscale (%) Фильтр «обесцветить». Применяются оттенки серого цвета к изображению в зависимости от указанного процента. Не допускается отрицательное значение, а оригинальность картинки равна 0.
brightness (%) Настройка яркости изображения. Значение в 100% показывает исходную точку яркости. Регулировка совершается как отрицательно (-50%), так и положительно (150%).
contrast (%) Настройка контрастности изображения. Как и в предыдущем фильтре, значение в 100% покажет исходную точку. Изменения можно задавать отрицательные (-20%) и положительные (120%).
hue-rotate (deg) Поворотное наложение тона цвета. В зависимости от указанного градуса (от 0deg до 360deg) на изображение будет налаживается цвет, который определяется по цветовому кругу.
invert (%) Инверсия изображения. Применяется значение от 0 до 100% без отрицательного параметра.
saturate (%) Насыщенность изображения. Исходное положение определяется в 100% и не имеет отрицательного значения.
sepia (%) Эффект сепия. Оригинальность картинки определяется в 0% и доступна до значения 100% без отрицания.
opacity (%) Прозрачность картинки. Еще один фильтр, у которого есть аналогичное свойство opacity с таким же способам в использовании. Настройка допускается от 0 до 100% без отрицательного параметра.
url () CSS ссылка на SVG элемент с определенным идентификатором #id.
initial Устанавливает значение свойства по умолчанию.
inherit Наследует все значения свойства своего родительского элемента.

Примеры CSS filters

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

Фильтр размытия [blur]

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

В оформлении сайта (к примеру – размытие) можно использовать как подкладку для лучшей читаемости текста, расположенного на картинке. Собственно, размытие совершается по гауссу от значения 0 px и до полного исчезновения.

Фильтр тень [drop-shadow]

Свойство тень пришло к нам еще с третьей версией каскадной таблицы. Безусловно, оно знакомо всем, кто занимается сайтостроением, так как box-shadow в дизайне играет далеко не последнюю роль. Фильтр drop-shadow можно назвать неполноценной альтернативой с аналогичными параметрами, а их всего 5, не считая внутреннюю тень.

Порядок прописывания такой: 5px/-5px (смещение по горизонтали), 5px/-5px (смещение по вертикали), 15px (радиус размытия тени), 5px/-5px (растягивание тени), black (цвет). Фильтр поддерживает весь синтаксис кроме растягивания и значения inset (внутренняя тень), а также добавления нескольких теней через запятую. Но несмотря на все это, присутствуют свои достоинства, к примеру, фильтр учитывает псевдоэлементы, что позволяет отображать точную форму тени элемента. Посмотреть пример.

Также интересным является то, что когда у блока нет фона, а лишь задана обводка border , то при использовании box-shadow будет отображаться тень с якобы учетом фона, то есть сплошная. А в случае использования drop-shadow тень принимает форму обводки без учета фона.

Фильтр обесцвечивания [grayscale]

Классический стиль фотографии для всех времен в правильном направлении. Фильтр допускает лишь одно значение — положительное. В зависимости от указанного процента оттенки серого будут плавно заменять цвет изображения. Также вместо процентов можно применять дробь до целого числа (0.01/1).

Фильтр яркости [brightness]

Добавление света к «неизведанным» черным углам изображения. В обработке фотографий применяется нередко, так как любительские снимки, как правило, совершаются в плохо освещенных местах. Яркость фильтра регулируется от 0% (полностью черная картинка) до почти полного исчезновения изображения. Оригинальная точка определяется в 100%, а значение также можно указывать дробью.

Фильтр контрастности [contrast]

Нехитрый способ сделать изображение более выразительным, поэкспериментировав с настройками яркости самых светлых и темных частей картинки. Фильтр contrast готов этому помочь. Его параметры, как и у многих, исключают отрицательное значение (-150%), а исходное положение обозначается в 100%. Кроме процентов, допускается также дробь (1.5).

Фильтр тона цвета [hue-rotate]

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

Если значение указано положительное (150deg), то поворот происходит по часовой стрелке. Соответственно, если отрицательное, то против часовой. В двух положения начинается от 0deg до 360deg.

Фильтр инверсия [invert]

Специфический эффект, позволяющий перевернуть цвет изображения верх дном. В графических редакторах имеет определенную роль и бывает так, что без его участия не добиться нужного результата. Параметр фильтра инвертирования указывается лишь в положительную сторону от значения 0% до 100%.

Фильтр насыщенность [saturate]

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

Фильтр сепия [sepia]

Имитация эффекта старинных фотографий (слегка коричневый оттенок). Таким образом достигается ретро стиль изображения, который пользуется особой популярностью. Фильтр сепия регулируется от 0% (исходное положение) до 100%.

Фильтр прозрачность [opacity]

Фильтр аналогичный свойству opacity из каскадной таблицы 3-й версии. Синтаксис такой же, а значение прозрачности регулируется от 0% до 100% (исходное положение).

Фильтр ссылка [url]

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

Использование нескольких фильтров

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

Фильтр DuoTone [двухцветная модель]

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

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

Генератор CSS filters

Уже давно повелось создавать генераторы различных CSS свойств. Генераторы градиентов, CSS кнопок и многое-многое другое. Они служат как инструмент, упрощающий работу. А для начинающих вебмастеров могут нести двойную пользу. Ими очень легко пользоваться: перемещаете ползунки, и сразу же виден результат. А по окончании остается лишь скопировать сгенерированный код. То же и с генераторами CSS фильтров. Вот два из них для ознакомления:

Заключение

Обзор получился весьма немаленький, но надеюсь, что кому-то пригодится на практике. Также не забывайте комбинировать фильтры, один – хорошо, а два будет лучше, в определенных случаях.

Все эффекты css3 при наведении на картинку

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

Объясню кратко принцип работы.

В 1 элемент до наведения мыши ставится css код:
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;

И какие-то данные, которые будут изменены, например:
height: 188px;
width: 188px;

Далее, после наведения мыши пишем css, с новыми значениями, например:
width: 300px;
height: 300px;

Вот, что можно получить в итоге:

Согласитесь кол-во эффектов просто поражает!

Скачать данный пример css анимации для картинок

Также вы можете просмотреть огромный html + css3 код данного примера:

CSS расширения для WebKit

На момент написания этой статьи Safari на iOS была самым сложным браузером. Как уже отмечалось в Главе 7, начиная с версии 2.0, IOS поддерживает большую (и странную) группу CSS-расширений, которые позволяют нам использовать аппаратно-ускоренную анимацию, переходы и даже 3D-эффекты. Некоторые из этих расширений, в зависимости от версии операционной системы, также работают и с Android и webOS браузерами.

WebKit функции

Многие CSS-свойства как параметр воспринимают функции. Эти функции — аппаратно-ускоренные WebKit-расширения.

Перечисленные здесь связанные с градиентом функции в iOS официально не поддерживаются (согласно Safari Reference Library). Тем не менее, они работают с OS 3.0 и более старыми устройствами, где они используют простой фон.

В таблице 9.7 перечислены функции, доступные для iPhone (есть и другие, но они работают только в настольном Safari). Некоторые из этих функций — например, scale и rotate — можно использовать также и в браузерах Android и webOS.

Табл. 9.7. Таблица CSS функций доступных в Safari на iOS

Функция Описание
cubic-beizer(p1x, p1y, p2x, p2y) Определяет кривую Безье для timing function.
matrix(m11, m12, m21, m22, tX, tY) Определяет трансформационную матрицу из шести значений с двумя смещениями.
matrix3d(m00, m01, m02, m03, m10, m11, m12, m13, m20, m21, m22, m23, m30, m31, m31, m33) Определяют трансформационную 3D матрицу 4×4.
perspective(depth) Карты просмотра куба на пирамиде, основание которой находится далеко от зрителя.
rotate(angle) Определяет 2D вращение вокруг начала координат элемента.
rotate3d(x, y, z, angle) Определяет 3D вращение с [x,y,z] в качестве вектора направления вращения.
rotateX(angle) Указывает вращение по часовой стрелке вокруг оси Х.
rotateY(angle) Указывает вращение по часовой стрелке вокруг оси Y.
rotateZ(angle) Указывает вращение по часовой стрелке вокруг оси Z.
scale(scaleX, [scaleY]) Выполняет операцию 2D масштабирования.
scale3d(scaleX, scaleY, scaleZ) Выполняет операцию 3D масштабирования.
scaleX(value) Масштабирование вдоль оси Х.
scaleY(value) Масштабирование вдоль оси Y.
scaleZ(value) Масштабирование вдоль оси Z.
skewX(angle) Выполнение скошенного преобразования вдоль оси Х.
skewY(angle) Выполнение скошенного преобразования вдоль оси Y.
translate(deltaX, [deltaY]) Указывает вектор 2D смещения.
translate3d(deltaX, deltaY, deltaZ) Указывает вектор 3D смещения.
translateX(value) Выполняет смещение вокруг оси Х.
translateY(value) Выполняет смещение вокруг оси Y.
translateZ(value) Выполняет смещение вокруг оси Z.
from(color) Определяет начальный цвет в последовательности.
to(color) Определяет конечный цвет в последовательности.
color-stop(stop_percentage, color) Указывает промежуточный цвет, который будет использоваться в последовательности в значении stop_percentage.
-webkit-gradient(linear, start_function, end_function, [stop_function, . ]) Определяет линейный градиент, используя стартовую точку, конечную точку и дополнительные промежуточные точки. Может быть использовано вместо любого изображения в CSS. Доступно начиная с iOS 3.0.
-webkit-gradient(radial, inner_center, inner_radius, outer_center, outer_radius, [stop_function, . ]) Определяет радиальный градиент с центральной (внутренней) точкой и другой точкой (внешней) с цветами, которые определяются серией функции color-stop. Доступно начиная с iOS 3.0.

CSS функции — это не новая особенность CSS, они доступны в любом браузере. На самомом деле, ты, наверное, уже знаком с некоторыми стандартными функциями — те же url(url_string) или rgba(red, green, blue, alpha) — для определения цвета.

Градиенты

Начиная с iOS 3.0 Safari поддерживает расширения CSS-градиента в качестве функции для тех ситуаций, где раньше мы использовали изображение (например, для фона). Для фона вместо функции url можно использовать функцию -webkit-gradient, с целью определить использование линейного или радиального градиента в качестве фона. Этот метод позволяет нам, используя минимум кода, делать действительно хорошие фоны для заголовков, контейнеров и ячеек. Для браузера Android применяем точно такой же код.

Некоторые примеры определения градиента:

Для значений позиций мы можем использовать проценты, абсолютные значения (без пикселей) или константы top, bottom, right и left. Например, в качестве второго параметра функции CSS мы можем использовать top right, а не 0% 0%. На рисунке 9.1 показано, как такие варианты могут выглядеть в браузере.

Mobile Internet Explorer начиная с версии 6.0 поддерживает фильтры и переходы, используя CSS расширение со стилем filter. Можно применять alpha, chroma, shadow, glow, mask и другие эффекты.

Эффекты отражения

Эффекты отражения или зеркальные эффекты — одни из наиболее часто используемых эффектов в Web 2.0 проектах. Использоваться эти эффекты могут для любого контента, в том числе и для изображений. Но не забывай, что мы разрабатываем для мобильных устройств с их маленькими экранами и здесь не стоит тратить впустую слишком много пространства.

Отражение оригинального элемента не изменяет макет или размер исходного блока контента элемента. Это часть переполнения контейнера.

Чтобы сделать эффект отражения в Safari на iOS, используй свойство -webkit-box-reflect со следующим синтаксисом:

direction может быть above, below, left или right; offset — расстояние (в px или %) от исходного элемента, отражение которого должно появиться; дополнительный — это, как правило, функция градиента, которая будет работать как маска для отражения изображения. Если изображение маски не указано, то будет использоваться обычное зеркало.

У того типа эффекта отражения, который обычно используется на Web 2.0 сайтах следующие атрибуты:

Маски изображений

Начиная с iOS 3.0 у нас есть доступ к типичной дизайнерской функции, которая отсутствовала в веб-разработке в течении многих лет: маски изображений. Маски изображений мы можем использовать, чтобы к исходному изображению применить любую правильную или неправильную обрезку или, если используется альфа-маска (или функция градиента) можно для любого изображения сделать классный визуальный эффект (например, fuzzy border). Свойства маски похожи на свойства фона. Для применения маски у нас в распоряжении есть сокращенное свойство ярлыка, -webkit-mask и специфические свойства для определения каждого параметра.

Синтаксис shortcut версии с дополнительными параметрами:

Конечно, у нас есть отдельный доступ ко всем свойствам (-webkit-mask-attachment, -webkit-mask-clip и т.д.). Возможностей много, но обычно в качестве значения изображения используются изображение (альфа или нет, PNG или SVG) или функция градиента. Пример:

Переход

Переход (transition) — это автоматическая анимация, которая проявляется при изменении значения CSS свойства. Свойство должно быть определено браузером как способное к анимации (обычно это относится к свойствам позиции и размера). Официального списка свойств, которые могут работать с анимацией нет, но в целом позиция такая: любое свойство с числовыми значениями или значениями цвета может быть анимирован при помощи transition. При этом есть несколько исключений, как, например, дискретное свойство visibility.

Помни, что эти смещения реализуются только силами CSS: для создания анимации мы не используем JavaScript или любой другой подобный метод. Может тебе покажется странным, но это простой и, одновременно, мощный метод.

Фреймворк для работы с transition доступен для браузеров Safari (начиная с iOS 2.0) и Android и, кроме того, на этих устройствах производительность при работе с transition выше.

Для реализации transition мы должны:

  1. Определить свойства transition (продолжительность, задержка, где применяется, функция синхронизации) для элемента (-тов), который(-е) мы хотим анимировать.
  2. Изменить значения свойств элемента (-ов) для анимации с использованием JavaScript или применить классы или вообще удалить их из элемента.
  3. Убедиться, что анимация работает.

Правда, звучит просто? Теперь давай сделаем.

Свойства анимации

Анимацию можно определить при помощи свойства -webkit-transition со следующим синтаксисом:

Мы также можем использовать специфические свойства, указанные в таблице 9.8.

Табл. 9.8. Таблица свойств transition для WebKit

Свойство Описание
-webkit-transition-property Определяет какое свойство или свойства будут использоваться для анимации. Можно использовать список значений, разделенных запятыми или постоянные значения.
-webkit-transition-duration Определяет продолжительность перехода. Значение может быть 0 (нет анимации) или положительное значение в секундах (s используется в качестве единицы). Если для каждого свойства мы хотим задать разное время — можно использовать список разделенных запятыми значений в том же самом порядке, как и значения для свойства -webkit-transition-property.
-webkit-transition-delay Определяет задержку анимации, которая начинается с момента изменения свойства. Определятся может в секундах или милисекундах; значение по умолчанию — 0. Если используется отрицательная величина — анимация запускается сразу, но какой-то фрагмент анимации будет уже как бы проигран и, соответственно, пропущен.
-webkit-transition-timing-function Определяет функцию, которая используется для вычисления промежуточных значений между начальным и конечным значениями свойства. Ты можешь использовать CSS функцию cubic-bezier или любую из следующих констант: ease, linear, ease-in, ease-out, и ease-in-out (чаще всего используется).

При помощи следующего примера кода реализуется анимация появления и исчезновения

Такие же переходы мы можем использовать для изменения размера, перемещения, изменения цвета и даже для 3D-перемещений.

Завершение перехода

Завершение перехода, точно так же, как и любое другое событие DOM можно реализовать при помощи addEventListener из JavaScript. Когда ты убедишься, что анимация действительно закончилась, можно инициировать начало следующего перехода или же еще какое-нибудь другое действие. Для этого нам нужно отловить событие webkitTransitionEnd. Сделать это мы можем при помощи следующего кода:

Анимации

Переход — это отличная вещь и самый простой способ реализовать анимацию на устройствах iPhone и Android. Если же тебе нужен точный контроль над анимацией на уровне ключевого кадра, можно воспользоваться CSS фреймворком для анимации. Если честно, я думаю, что это уже слишком для обработки только посредством CSS, непроцедурного и «не-разметочного» языка. Но работает это прекрасно.

В WebKit анимация делается при помощи свойства -webkit-animation и синтаксис будет следующим:

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

Табл. 9.9. Таблица анимаций для WebKit

Свойство Описание
-webkit-animation-name Определяет имя анимации, которое будет использоваться ключевыми кадрами.
-webkit-animation-duration Определяет продолжительность анимации (в секундах или милисекундах).
-webkit-animation-timing-function Определяет функцию, которая используется для вычисления промежуточных величин между начальными и конечными значениями определенного свойства. Ты можешь использовать CSS функцию cubic-bezier() или любую из следующих констант: ease, linear, ease-in, ease-out и ease-in-out (используется чаще всего).
-webkit-animation-delay Определяет задержку анимации, которая начинается с момента изменения свойства. Определятся может в секундах или милисекундах; значение по умолчанию — 0. Если используется отрицательная величина — анимация запускается сразу, но какой-то фрагмент анимации будет уже как бы проигран и, соответственно, пропущен.
-webkit-animation-iteration-count Определяет, сколько раз повторится анимация. Значение по умолчанию здесь 1, также в качестве значения может выступать любое целое число, специальная константа infinite или любое действительное число.
-webkit-animation-direction Определяет, в каком направлении будет проигрываться анимация.

Разобравшись с этим перечнем, ты, должно быть, спрашиваешь себя, где именно определяется анимация? Что выступает в качестве объекта анимации? И ответить на эти вопросы помогут расширения WebKit для ключевых кадров.

Если ты перемещаешь или масштабируешь объект и хочешь, к тому же, анимировать его, лучше вместо стандартных свойств CSS использовать -webkit-transform — свойство с улучшенной производительностью.

Директива ключевого кадра

Чтобы определить, как будет работать анимация и что именно будет происходить, нужно определить специальное CSS эт-правило, которое называется @-webkit-keyframes. Это правило сопровождается именем анимации, которое определяется в -webkit-animation-name.

Внутри директивы ключевого кадра следует указать, сколько нам нужно селекторов или групп анимации в качестве ключевых кадров. Селектор определяется значением в процентах и константами from (эквивалент 0%) и to (эквивалент 100%). В каждом селекторе мы определяем все нужные для определенной точки анимации свойства и значения. При помощи -webkit-transition-timing-function мы можем определить синхронизацию для каждой анимационной группы.

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

Например, при помощи следующего кода мы перемещаем

Если мы указываем атрибуты -webkit-animation в начале элемента, то анимация начнется при загрузке страницы. Лучше определить анимацию как класс и применять этот класс к элементу, когда нужно запустить анимацию.

Итак, для старта анимации мы применяем класс, а если мы хотим остановить анимацию раньше, чем проиграется последний кадр, мы должны присвоить свойству -webkit-animation-name пустое значение.

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

События анимации

Как и в случае с переходами смещениями, мы можем отследить события webkitAnimationStart, webkitAnimationIteration, и webkitAnimationEnd. При запуске эти события отправляют в качестве параметра объект WebKitAnimationEvent. Но для получения каждого изменения ключевого кадра события нет.

У объекта события есть специальные свойства animationName и elapsedTime, значения которых задаются в секундах.

Трансформации

Последняя группа WebKit CSS расширений, которую мы рассмотрим — функции преобразования (трансформации). Для генерации визуальных эффектов без использования изображений, canvas или SVG, мы можем применить эти функции к любому элементу. Функции преобразования работают в браузерах Safari, Android и webOS.

Работать с этими функциями очень просто: мы используем CSS свойство -webkit-transform, применяя в качестве значения функции CSS, с которыми мы уже встречались ранее в этом разделе, например rotate, scale или translate3d (последняя только Safari).

При помощи свойства -webkit-transform-origin мы можем изменить исходную точку преобразования. По умолчанию указывается середина элемента (значение 50% 50%).

Перспектива

Настроить 3D перспективу можно при помощи функции трансформации perspective или специального CSS свойства -webkit-perspective — это свойство принимает значение в пикселях, которое определяет расстояние от перспективы. Если мы будем использовать последний вариант, то перспектива будет применяться к дочерним элементам родителя, если же мы будем использовать функцию преобразования, то она будет применена непосредственно к элементу.

Стиль трансформации

По отношению к вложенным элементам преобразование может действовать по-разному. При помощи атрибута -webkit-transform-style мы можем контролировать сценарий поведения. У этого атрибута есть два возможных значения: float и preserve-3d. При использовании float вложенные элементы сглаживаются так, если бы они были изображением и перспектива применяется к этому изображению. С применением preserve-3d каждый вложенный элемент получает свою собственную 3D перспективу (рисунок 9.2).

Видимость backface

Backface? Что? Какой еще бэкфейс у HTML-элемента? Бэкфейс есть и применяется он в Safari для 3D преобразований с использованием CSS свойства -webkit-backface-visibility. Бэкфейс — это не то что ты мог бы подумать (два «лица» (faces) в одном элементе), но в целом этот эффект может быть легко реализован.

В устройствах Android и webOS 3D преобразования не работают, так что пользоваться ими нужно при разработке только для устройств iPhone, iPod Touch или iPad.

Видимость бэкфейс может определятся свойствами hidden или visible. Если используется hidden, то когда мы указываем поворот вокруг оси Y более чем на 180 градусов — элемент исчезнет и мы сможем сделать видимым другой элемент.

Все преобразования могут быть реализованы при помощи JavaScript, изменением CSS стилей или же путем использования класса JavaScript WebKitCSSMatrix и определения нескольких объектов. Самый простой и быстрый способ — определить преобразвоание как строку и применить его к элементу element.style.webkitTransform.

Шаблон CardFlip

Это одна из самых классных визуальных функций в Safari на iOS. Шаблон CardFlip позволяет нам отображать определенный элемент в прямоугольной области и когда происходит какое-то событие — выполнить преобразование, которое переворачивает элемент как покерную карту и демонстрирует другой элемент такого же размера и на такой же позиции, как и бэкфейс.

У Apple есть полноценный пример, который может быть использован в качестве базового шаблона для написания такого рода анимации. Скачать его можно по ссылке http://www.mobilexweb.com/go/cardflip.

Упрощенный вариант шаблона CardFlip выглядит так:

Если проанализировать код, то мы увидим два элемента div которые составляют нашу карту — элемент .card. Один div — «передняя» поверхность, другой — «задняя». Обе поверхности расположены на одной и той же самой позиции (как абсолютные элементы) и задняя сторона запускается при повороте вокруг оси Y на 180 градусов.

Когда пользователь кликает по контейнеру card (с выведенной на экран передней или задней стороной), мы при помощи JavaScript применяем (или не применяем) CSS класс flipped, который вращает элемент на 180 градусов вокруг оси Y. И вуаля! Спереди (front) всегда будет отображаться только только одна поверхность, а другая будет автоматически скрыта. И вседа это будет происходить с красивой сглаженной анимацией, которую ты, к сожалению, не сможешь полностью оценить на рисунке 9.3.

Цукерберг рекомендует:  Как использовать соцсети для развития бизнеса
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих