В последнее время в веб-дизайне стало популярным использование множества креативных конструкций с использованием тонких линий, широкого белого пространства, типографики и утонченных эффектов.
Учитывая эти положительные тенденции, мы хотим поделиться с вами некоторыми творческими идеями для создания эффектов при наведении курсора мыши. Методы, которые мы используем для этих эффектов включают 3D-преобразования и переходы для псевдо-элементов. Обратите внимание, что это будет работать только в современных браузерах.
В качестве примеров мы используем красивые фотографии с сайта Unsplash, который ежедневно публикует бесплатные фотографии с высоким разрешением. Иконки, используемые в одном из примеров, из Feather icon set.
Для разметки примеров мы используем простую сетку с изображениями:
<div class="grid"> <figure class="effect-lily"> <img src="img/1.jpg" alt="img01"/> <figcaption> <h2>Nice <span>Lily</span></h2> <p>Lily likes to play with crayons and pencils</p> <a href="#">View more</a> </figcaption> </figure> <!-- ... --> </div>
После того как мы определили общие стили, для сетки и ее элементов (см. исходные файлы), мы затем можем перейти непосредственно к созданию эффектов.
Ниже приведен пример, названный "Sadie". Он будет содержать псевдоэлемент с линейным градиентом внизу и показывать некоторый текст. Название при наведении будет менять цвет:
figure.effect-sadie figcaption::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); content: ''; opacity: 0; transform: translate3d(0,50%,0); } figure.effect-sadie h2 { position: absolute; top: 50%; left: 0; width: 100%; color: #484c61; transition: transform 0.35s, color 0.35s; transform: translate3d(0,-50%,0); } figure.effect-sadie figcaption::before, figure.effect-sadie p { transition: opacity 0.35s, transform 0.35s; } figure.effect-sadie p { position: absolute; bottom: 0; left: 0; padding: 2em; width: 100%; opacity: 0; transform: translate3d(0,10px,0); } figure.effect-sadie:hover h2 { color: #fff; transform: translate3d(0,-50%,0) translate3d(0,-40px,0); } figure.effect-sadie:hover figcaption::before , figure.effect-sadie:hover p { opacity: 1; transform: translate3d(0,0,0); }
Мы опустили свойства с префиксами браузеров для краткости, но Вы можете увидить их в таблице стилей.
Смотрите ниже демонстрационные примеры с различными эффектами, мы надеемся, что вам они понравятся и послужат стимулом для создания собственных креативных эффектов!
© 2008 - 2024 Webmasters.BY Все права защищены
Новый комментарий