Все для веб-дизайнера
Как создать вертикальное меню для сайта на CSS
Мар 12
В данном уроке мы рассмотрим процесс создания весьма интересного концепта меню, мы создадим его вертикальным еще и минималистическим. Данная навигация будет содержать подпункты, то есть мы создадим иерархию выпадающих вкладок для навигации. Кроме этого будет установлена анимация при выборе пункта и добавлены иконки, которые будут существенно украшать нашу навигацию. Мы будем развивать данную тенденцию в сайтостроении и продолжать разрабатывать различные варианты данной навигации.
Создаем 3D эффект сетки изображений для сайта
Мар 9
Сегодня мы хотели бы поделиться небольшой концепцией анимации сетки для изображений. Мы воссоздадим эффект который мы увидели в фантастическом приложении прототипа дизайна от Маркусом Эккерт . Идея состоит в том, чтобы повернуть элемент сетки в 3D, и открыть его в полноэкранном режиме при этом развернув некоторый контент. Для нашей демонстрации мы создали два демо. В первом из них мы вращаем элемент сетки по вертикали, а во втором по горизонтали. Обратите внимание, что это всего лишь концепт.
Как создать адаптивный шаблон сайта на CSS3
Мар 4
Продолжаем рассматривать адаптивность и ее влияние на современный веб-дизайн. В данном уроке мы рассмотрим создание адаптивного шаблона кинопортала. Вся идея состоит не только в изменении размера шаблона, а еще при эффектном появлении навигации, которая будет скрываться, а при вызове плавно появляться с эффектом скольжение. Мы добавим сетку и все основные элементы на главную страницу, отметим сразу, что мы не создавали полноценный шаблон сайта, мы создаем концепты с возможностью его адаптации и изменения на свое усмотрение.
Создаем адаптивный шаблон сайта-портфолио
Мар 1
Адаптивность в современном веб-дизайне отыгрывает большую роль, пользователю важно, чтобы сайт был удобным для чтения, и подстраивался под их девайсы. Разработчики все чаще стали видоизменять свои ресурсы, чтобы максимально упростить сайт для чтения на персональных устройствах. В данном уроке мы рассмотрим небольшое портфолио, которое полностью адаптивное. Мы воссоздали полностью главную страницу, упростили ее в минимальном стиле, что сейчас весьма популярно, и прикрутили адаптивность, как все это выглядит судите сами.
Анимированные шаги для сайта с помощью CSS3
Фев 21
В данном уроке мы рассмотрим как создать замечательный эффект для сайта, а именно — анимированные шаги. Возможно кто-то не понял, что это и как это выглядит, я объясню. Идея состоит в том чтобы при прокрутке выводить сообщения последовательно, эти окна будут стилизованы, кроме этого мы добавим окружность с номером записи. Которая будет сдвигаться справа налево, вся эта анимация будет минимальной и не нагромождать визуально, заголовок текста будет отделен линией, что позволит не нагромождать текст на сообщении.
Простое красивое выпадающее меню на CSS3
Фев 16
В данном уроке мы рассмотрим как создать простое и эффективное выпадающее меню для сайта с помощью CSS3, у нас будет одна вкладка, для образца мы взяли за основу входа профиля, при наведении курсора мыши, меню будет плавно выпадать, кроме этого мы стилизировали вход иконкой профиля и значком меню, смотрится достаточно просто и в минимализме, сейчас эта новая тенденция в веб-дизайне, отлично подойдет для сайтов как и светлого тоннажа так и темного, данное меню станет отличным дополнением для вашего сайта.
Рефокусировка объектов на сайте с помощью JS
Фев 13
В данном уроке мы рассмотрим весьма маленькую заплатку для сайта, а именно для изображений, это будет рефокусировка, кто не знает кто это, расскажу, это изменение фокуса для объектов, с помощью данного приема можно выделить конкретную информацию на сайте. Такое реализовать можно достаточно просто, мы будем использовать небольшой фрагмент правил CSS и JS, кроме этого нам понадобится несколько изображений, некоторые из них будет в формате png, так как нам необходима прозрачность, и так, давайте посмотрим, что у нас получилось.
Загрузка ...