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

 

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

Шаг 1. HTML

Разметка простая, у нас будет два основных ID, первый из которых будет основной контейнер, а второй это заливка, затем мы по очередности подключаем слои иконок:

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

Создание иконок для сайта с помощью CSS3

Шаг 2. CSS

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

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

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

 

Читайте также: