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