Домой / Архивы с метками: effect

Архивы с метками: effect

Прикольный ховер-эффект для изображения на CSS

Прикольный ховер эффект для изображения на CSS

Здравствуйте друзья! Сегодня я предлагаю вашему внимаю пример создания hover-эффекта для изображений. В данном примере при наведении курсором мышки изображение затемняется серым цветом, и при этом выплывает сверху на середину изображения иконка лупы. Изменить иконку лупы которая появляется при наведении на изображение на любую другую очень просто! Для этого необходимо в классе .gallery a:before изменить ссылку фона в свойстве background на адрес другой иконки. Для ... Читать далее »

Hover-эффект для изображений с помощью CSS параметра :not(:hover)

Hover-эффект для изображений с помощью CSS параметра :not(:hover)

Приветствую друзья! В этой статье хочу обратить ваше внимание на создание оригинального hover-эффекта для изображений. Данный ховер-эффект затемняет все изображения кроме того, на которого наведен курсор мышки. Достичь такого эффекта удается с помощью CSS условия :not (:hover). С помощью условия :not (:hover) можно выделить не выбранные объекты. Например, если навести курсор на одно изображение вступает в силу свойство hover, и теперь можно задать ему необходимые параметры (к примеру ... Читать далее »

Загрузочные анимации CSS3

Загрузочные анимации CSS3

Здравствуйте друзья! Сегодня я предлагаю вашему вниманию набор кроссбраузерных загрузочных анимаций созданных с помощью CSS3. В демо примере вы увидите 10 оригинальных и достаточно интересных анимаций загрузчиков. Одной из особенностей есть то, что все анимации загрузчиков реализованы на чистом CSS3, без использования скриптов. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS Читать далее »

Галерея с эффектом размытия фона (blur effect)

Галерея с эффектом цветового размытия фона (blur effect)

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

Эффект трансформации текста в дым (туман) с помощью CSS

Эффект трансформации текста в дым с помощью CSS

Предлагаю вашему вниманию пример создания эффекта превращения текстовой записи в дым (туман).  Эффект реализован с помощью CSS. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS Читать далее »

Hover-эффект трансформации текста SkewY

Эффект трансформации текста SkewY

Хороший и достаточно интересный пример создания оригинального и необычного SkewY hover-эффекта для текста. В данном примере, при наведении на текст наклоняется одна из осей. Трансформация skewX сдвигает все y-координаты на определенный угол, оставляя x-координаты без изменения. Важно! Для работы с данным примером трансформации текста не забудьте обязательно подключить библиотеку jQuery. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. ... Читать далее »

Всплывающее и распадающееся на кусочки модальное (popup) окно

Всплывающее и распадающееся на кусочки модальное (popup) окно

Отличный пример создания оригинального и необычного модального окна для вашего сайта. Данный пример реализован с помощью CSS, jQuery и библиотеки TweenMax.min.js. Важно! Не забудьте обязательно подключить библиотеку jQuery и TweenMax. Использование данного примера ограничивается практически только вашей фантазией. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS JS Читать далее »

Бесконечная прокрутка фона сайта

Бесконечная прокрутка фона сайта

Бесконечная прокрутка изображения на фоне сайта, которое бесконечно повторяется прокручиваясь вверх. Эффект бесконечной прокрутки фона для сайта создан с помощью CSS. Изменить изображение фона можно указав ссылку в свойстве background класса overlay на другое изображение. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS Читать далее »

Эффект Ken Burns для шапки сайта

Эффект Ken Burns для шапки сайта

Эффект Кена Бернса является одним из видов панорамирования и масштабирования. В данном примере эффект реализован для шапки (изображение вверху) страницы. Данный эффект достигнут с помощью HTML, CSS и JS. Для работы необходимо подключить библиотеку jQuery. HTML CSS JS Читать далее »