Все для веб-дизайнера
Архивы за Май, 2013
Креативные hover-эффекты для иконок сайта
30 мая
Зачастую вам на сайте приходится разрабатывать различные эффекты для кнопок, это позволяет привлечь взор посетителя красивой анимацией к необходимому пункту. В данном уроке мы рассмотрим, как можно реализовать такие действия помощью hover-эффектов. Идея заключается в том, чтобы создать креативный и стильный hover эффект, используя CSS переходы и анимацию с псевдо-элементами. Для иконок мы будем использовать шрифт Eco Ico by Matthew Skiles, созданный при помощи IcoMoon, который мы будем устанавливать при помощи класса :before.
Интересный морфинг девайсов в веб-дизайне
22 мая
В данном уроке мы рассмотрим нечто новенькое, а именно слайд-шоу по технологии морфинга, эта технология в современно веб-дизайне встречается крайне редко, но набирает оборотов. Идея заключается в плавном переходе между различными устройствами, которые показывают скриншот адаптивного дизайна сайта или приложения, применяя различные классы устройства. Слайдер будет выполнен в минималистическом стиле. Используя одинаковые элементы и псевдо-элементы для всех устройств, мы можем создать интересный эффект морфинга.
Создаем навигационное меню с помощью CSS3
20 мая
Меню навигации достаточно простой элемент дизайна. Создаем неупорядоченный список, задаем его стиль небольшой анимации и формируем внешний вид. В данном уроке, как вы уже догадались, мы рассмотрим как создать достаточно простую, но в тоже время весьма интересную навигацию со скользящими элементами с помощью трансформаций css и небольших заплаток jQuery. Идея состоит в том, когда пользователь наводит на желаемый пункт курсором, происходит трансформация с изменением фона активной вкладки.
Вертикальное многоуровневое меню для сайта
18 мая
Вам необходимо создать креативное многоуровневое меню, кроме этого, чтобы оно было адаптивным, и было стилизованными эффектами. В данном уроке мы рассмотрим как все это можно реализовать. Главной идеей данной навигации являются пару вещей, первое из них, это экономия ценного места на странице, второе, это внедрение подменю и эффектного появления при нажатии. Каждое выпадающее меню будет относительное, то есть родительский элемент будет исчезать при вызове следующего подпункта.
Создаем простую панель для рисования 3D
16 мая
Сегодня мы собираемся вернуться к практическим занятиям по HTML5. Я думаю, что мы уже сделали хороший перерыв в наших уроках. В этом уроке я покажу вам, как создать панель для рисования которая вращается вокруг своей оси (на объекте холста HTML5). Каждый из ваших нарисованных фигур будет вращаться в псевдо 3D режиме. Для этого нам необходимо определить два объекта: точки и формы (каждая фигура состоит из нескольких пунктов). Основная идея — проектировать и вращать точки фигур, а также нарисовать кривую линию между этими точками.
Создаем адаптивное меню для экранов Retina
14 мая
В данном уроке мы рассмотрим процесс создания адаптивного меню которое подходит для экранов Retina, меню было разработано под вдохновением цветовой гаммы создателей игры Borderlands, компании Maliwan. Меню автоматически преобразуется в необходимый размер при определенном разрешении экрана, Чтобы меню отлично подходило под экраны retina, мы воспользуемся иконическим шрифтом, чтобы иконки меню не теряли качества при масштабировании. и так, давайте посмотрим, что у нас с этого получилось.
