Все для веб-дизайнера
CSS
Найденные результаты:
CSS слайдер с использованием графики SVG
Июл 20
SVG графика весьма популярная в веб-дизайне, она позволяет не только качественно оптимизировать сайт для поисковых запросов, но и сократить время загрузки страницы, в данном уроке мы рассмотрим интересный пример реализации слайдера реализованный с помощью SVG графики и анимации с участием правил CSS, такой слайдер станет интересным решением для дизайнеров которые хотят разнообразить свой ресурс и обновить до современного дизайна.
Анимация для контактной формы с помощью CSS
Июл 10
Контактна форма является важной составляющей сайта, с помощью данной формы посетитель может связаться с администрацией сайта. Чтобы разнообразить форму веб-дизайнеры прибегают к различным методам стилизации и анимации, мы решили поделиться интересной задумкой, как стилизировать профильную контактную форму. Такой вариант будет отличным решением для контактной формы автора поста, что поможет сэкономить место, а также визуально оживить сайт.
Реагирующие посты сайта при наведении курсора
Июл 6
Зачастую администратору сайта надо выделить важную информацию, возможно это реклама или какой-то интересный материал, веб-дизайнеры прибегают к различным эффектам, сегодня мы решили вам показать один из таких эффектов, а именно добавление реагирующего эффекта постов при наведении курсора мыши на объект. Идея заключается в том, что блок будет начинать покачиваться со стороны в сторону при этом визуально оживляя сайт, что явно привлечет внимание посетителя.
Эффект масок для изображений с помощью CSS
Мар 15
Ранее мы уже публиковали уроки про различные маскирующие эффекты, основанные на свойствах SVG. На этот раз мы воспользовались прозрачностью PNG, чтобы увеличить масштаб маски. Если вы хотите изменить цвет масок форматов .png, вы можете легко сделать это в Photoshop (или любом другом графическом редакторе), применив цветное наложение ко всему слою изображения. Если вы планируете создавать свои собственные маски, обратите внимание, что этот эффект работает только в том случае, если в самом центре маски пустое пространство.
Эффекты искажения кнопок с помощью фильтров
Дек 15
Все больше разработчиков используют SVG, что заставляет развивать данное направление. В данном уроке мы рассмотрим замечательный прием с применением фильтром основанных на SVG. Такой прием мы подключим к кнопкам. Основная идея заключается в применении эффекта искажения или эффекта жидкости к кнопке. Также мы рассмотрим возможное применения данной технологии в других элементах. Обратите внимание, что данный эффект экспериментальный, по этому может работать не во всех браузерах.
Стильный слайдер для сайта при помощи SVG
Ноя 22
В данном уроке мы бы хотели вам рассказать о возможности реализации достаточно легкого слайдера, который отлично впишется в любой дизайн сайта, кроме этого мы будем использовать SVG, что позитивно скажется в скорости загрузки сайта и поисковой оптимизации. Идея состоит в следующем, у нас будет две стрелки стилизованы с предварительным просмотром в виде ромба, по центру находиться квадрат с изображением, слайды будут изменяться при нажатии на стрелки навигации при помощи красивой анимации.
Навигация для сайта при помощи CSS3 и JS
Ноя 20
Несколько недель назад ресурс stripe.com запустил новый дизайн сайта. Ресурс получился, по нашему мнению, удивительным. Одна особенность,которая первая нам бросилась в глаза, это морфинг выпадающей навигации. Вместо того , чтобы скрывать, а затем показывать новый выпадающий "контейнер" пользователю предлагается переключается с одного элемента навигации к другому,при помощи анимации и плавного изменения контента во вкладке. Пользователю не нужно нажимать на навигацию, ему достаточно навести курсор.
Загрузка ...