390 Codepen

Глитч эффект на CSS при наведении

При наведении на изображение воспроизводится глитч эффект. Сделано на CSS за счет использования одного и того же изображения несколько раз.

Глитч эффект на CSS при наведении
365 Codepen

SVG filter — поломанный текст

SVG фильтры FeTurbulence, feColorMatrix, feDisplacementMap, которые применили к тексту для придания эффекта повреждения, деформации букв

SVG filter — поломанный текст
824 Codepen

SVG маска для фонового изображения

SVG маска для изображения. Удерживая левую кнопку мышки область маски будет расти и изображение вернется к своему исходному состоянию. Перемещая курсор мыши, область под ним будет отображать исходную картинку без маски.

SVG маска для фонового изображения
4 416 Other

Снег на сайт

Snow it - Ещё один простой плагин для реализации эффекта падающего снега на сайте. Работает в современных браузерах с поддержкой свойств CSS3 transform, animation и @keyframe.

Снег на сайт
1 443 Form

Эффекты для текстовых полей

Несколько интересных эффектов для текстовых полей включающих некоторые новые методы реализации и идеи. В основном используются CSS transitions и изредка CSS animations на label тегах или на псевдо-элементах.

Эффекты для текстовых полей
2 689 Animation

Xoverlay - CSS3 эффекты наведения

Xoverlay представляет из себя набор CSS стилей, который поможет довольно просто добавлять современные эффекты наведения на ваш сайт. Собрано более 50 эффектов, но если вы будете их комбинировать, то вариантов будет еще на несколько десятков больше - более 150 эффектов.

Xoverlay - CSS3 эффекты наведения
1 114 Form

FancyText - текстовые эффекты для инпутов

  FancyText - jQuery плагин плюс CSS3 анимация. Плагин позволяет из обычного текстового поля (input) получить составной элемент (input + label) с разнообразным количеством эффектов на выбор. Использование плагина очень простое: нужно добавить в HTML документ текстовое поле, добавить пользовательские атрибуты и вызвать функцию FancyText.

FancyText - текстовые эффекты для инпутов