Автор

Hover эффекты кнопок с помощью фильтров SVG

Hover эффекты кнопок с помощью фильтров SVG


Основная идея заключается в применении искажения или фильтры blob для кнопок и изучить некоторые творческие возможности.

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

 

ДЕМО
ИСХОДНИКИ

 

Внимание

Данный эффект экспериментальный, по этому может работать не во всех браузерах.

Поддержка CSS фильтров отличается в зависимости от браузера, и эффекты могут слегка различаться. Так что всегда добавляйте fallback. Давайте приступим.

 

HTML

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

<button class="button">Кнопка</button>

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

отображение стандартной кнопки

Теперь создадим фильтр внутри SVG объекта, который мы поместили в HTML:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
<defs>
<filter id="filter">
<feTurbulence type="fractalNoise" baseFrequency="0 0.15" numOctaves="1" result="warp" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
</filter>
</defs>
</svg>

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

.button {
/* остальные стили */
-webkit-filter: url("#filter");
filter: url("/#filter");
}

 

Принцип работы фильтра

SVG фильтр содержит в себе список примитивов. Нам в частности интересен примитив <fedisplacementmap>.

Эффект карты смещения сдвигает пиксели элемента, к которому применен фильтр на основе предоставленных значений. <fedisplacementmap> можно применить к любому DOM элементу, например изображению, градиенту или другому SVG фильтру. Для нашей кнопки мы будем использовать SVG элемент <feTurbulence>.

<feTurbulence> — примитив, генерирующий «шум» (по алгоритму шума Перлина). Что будет, если применить этот шум к нашей кнопке:

Принцип работы фильтра

Тут огромную роль играет свойство <baseFrequency>. С его помощью генерируется сам шум. Свойство принимает два параметра, которые отвечают за эффект по Х и У координатам.

Также нужно указать источники для нашего фильтра: все фильтры принимают два источника с помощью свойств in и in2. Первый источник будет SourceGraphic (HTML элемент, к которому применяется фильр) и вторым источником будет наш первый фильтр <feTurbulence> (мы назвали его шумом).

Теперь наша карта смещения знает, что нужно двигать пиксели элемента SourceGraphic на основе сгенерированного шума <feTurbulence>.

SourceGraphic на основе сгенерированного шума

С помощью свойств xChannelSelector и yChannelSelector задается цвет смещения пикселей (R, G или B) для каждой оси. Осталось анимировать эти свойства при помощи JS (мы используем библиотеку анимации Greensock).

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

Ну вот и все! Большинство эффектов в демо работают по описанному нами принципу.

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

 

Вот и все. Готово!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеSVG

Hover эффекты кнопок с помощью фильтров SVG

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


Hover эффекты кнопок с помощью фильтров SVG

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


Hover эффекты кнопок с помощью фильтров SVG

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


Hover эффекты кнопок с помощью фильтров SVG

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

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


75 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close