Все для веб-дизайнера
CSS
Найденные результаты:
Эффект масок для изображений с помощью CSS
Мар 15
Ранее мы уже публиковали уроки про различные маскирующие эффекты, основанные на свойствах SVG. На этот раз мы воспользовались прозрачностью PNG, чтобы увеличить масштаб маски. Если вы хотите изменить цвет масок форматов .png, вы можете легко сделать это в Photoshop (или любом другом графическом редакторе), применив цветное наложение ко всему слою изображения. Если вы планируете создавать свои собственные маски, обратите внимание, что этот эффект работает только в том случае, если в самом центре маски пустое пространство.
Эффекты искажения кнопок с помощью фильтров
Дек 15
Все больше разработчиков используют SVG, что заставляет развивать данное направление. В данном уроке мы рассмотрим замечательный прием с применением фильтром основанных на SVG. Такой прием мы подключим к кнопкам. Основная идея заключается в применении эффекта искажения или эффекта жидкости к кнопке. Также мы рассмотрим возможное применения данной технологии в других элементах. Обратите внимание, что данный эффект экспериментальный, по этому может работать не во всех браузерах.
Стильный слайдер для сайта при помощи SVG
Ноя 22
В данном уроке мы бы хотели вам рассказать о возможности реализации достаточно легкого слайдера, который отлично впишется в любой дизайн сайта, кроме этого мы будем использовать SVG, что позитивно скажется в скорости загрузки сайта и поисковой оптимизации. Идея состоит в следующем, у нас будет две стрелки стилизованы с предварительным просмотром в виде ромба, по центру находиться квадрат с изображением, слайды будут изменяться при нажатии на стрелки навигации при помощи красивой анимации.
Слайдер отзывов клиентов сайта на CSS и jQuery
Ноя 18
Отзывы клиентов для сайта который предоставляет услуги или рекламирует себя является очень важным элементов в структуре сайта. Данный раздел не стоит упускать из виду и подать его посетителям красиво и отзывчиво. В данном уроке мы рассмотрим как реализовать данную функцию. Мы рассмотрим замечательный способ создания простого модуля для отзывов клиентов, который можно легко встроить в ваш дизайн. Кроме этого мы предусмотрели вариант, когда пользователям необходимо посмотреть больше отзывов.
Параллакс с эффектом увеличения с помощью JS
Ноя 16
Параллакс весьма интересная тема для наших читателей и мы не могли пройти ее стороной, в данном уроке мы рассмотрим достаточно простой способ реализации параллакса, а именного эффект увеличения шапки страницы с движением при прокрутки вниз. Смотрится такой эффект достаточно оригинально и визуально оживляет страницу, реализовать его тоже не составит труда. Для реализации нам понадобиться всего навсего несколько простых правил оформленных все это в обыкновенные стили. Получилось достаточно красиво.
Эластичная навигация для сайта с помощью CSS3
Сен 26
Эластичность, сейчас, весьма популярная. Разнообразие девайсов заставляет разработчиков придумывать новые приемы для реализации навигации для разных объектов. В данном уроке мы рассмотрим процесс построения и стилизации замечательной эластической навигации для сайта. В демонстрации мы сделали несколько версий, для отображения в разных условиях, первая навигация это обычная кнопка вызывающая эффект анимации и меню, вторая версия будет реализованная для загрузки мультимедийных файлов.
Эффект чернильного перехода для сайта на CSS3
Апр 4
Недавно я наткнулся на несколько веб-сайтов с использованием чернильных эффектов в качестве перехода. Хорошим примером является сайт Sevenhills . Сначала я думал , что они использовали технику , приведенный в действие HTML холста (для обеспечения возможности прозрачности), а затем я проверил исходный код и выяснил , что они не используют видео, но применено изображение со спрайтами PNG. Используя PNG спрайты и steps() функцию синхронизации в CSS.
Загрузка ...