Все для веб-дизайнера
Записи с метками CSS
Кнопки с анимацией для сайта при помощи CSS3
21 Июн
Сегодня мы бы хотели поговорить о стилизации кнопок. Предпочтения пользователей постоянно меняются и угнаться за модой довольно тяжело, мы давно не публиковали уроков о создании кнопок, и сегодня, я решил это исправить. Речь пойдет о плоских, анимированных кнопках для сайта реализованных исключительно на CSS3. В демонстрации я покажу вам пять замечательных вариантов кнопок с различной анимацией к ним. Одни будут плавно окрашиваться в цвет, а вторые быстро обводиться линейной графикой.
Анимированные линии для сайта на JavaScript
19 Июн
Сегодня поговорим о мелких деталях которые, как вы знаете, стоят значительно больше чем большие элементы на странице. Речь пойдет о красивых линиях благодаря которым вы сможете украсить переходы между разделителями страниц. Кроме этого линии будут анимироваться в форме волн, а плавность анимации позволит добиться эффекта ненавязчивости. Нам очень понравился такой эффект, однажды встретив его на заграничном сайте, мы решили показать, как можно реализовать такой эффект на своем ресурсе и сделать это достаточно просто.
Параллакс стена для сайта на JavaScript и CSS3
18 Июн
Сегодня мы хотим рассказать вам об одном замечательном эффекте, а именно о том, как создать эффект параллакс-стены для сайта при помощи JavaScript и CSS3. По умолчанию у нас будет три блока с фотографиями, которые зафиксированы в навигации слева, при этом в правой части будут сами фотографии, перелистывание к которым будет сопровождаться скольжением дополнительных блоков, которые будут сверху слоя с изображением. Все этом оформлено эффектом параллакса и смотрится очень круто и плавно.
GIF-плеер анимации для сайта с помощью jQuery
17 Июн
Cегодня мы бы хотели поговорить о чем-то необыкновенном и красивом. Вряд ли такой эффект станет популярным среди разработчиков, но если вы разрабатываете сайт -портфолио для фотографа то вы обязательно должны попробовать такой плеер у себя на сайте. Когда мы первый раз столкнулись с таким плеером на зарубежных сайтах то были удивлены, как простая вещь позволяет оживить сайт, и подать посетителю нечто необычное, именно о создании плеера для анимации GIF файлов мы хотим сегодня поговорить и показать как сделать такой эффект.
Анимация шапки сайта при помощи CSS3 и JS
13 Июн
Сегодня мы бы хотели поговорить о том, как создать замечательную, анимированную шапку для сайта. Идея будет заключаться в следующем-у нас есть изображения часть которого будет скрыта под небольшим слоем градиента до середины изображения. При прокрутке страницы изображение будет уходить в левую часть страницы изменяя при этом свой размер, а также отображаясь в полном объеме, а с права у нас появится текстовый блок, когда пользователь будет прокручивать страницу то картинка будет неподвижной, а текст будет плавно скользить по странице.
Превью постов сайта при помощи Flexbox и CSS3
12 Июн
Мы хотим Вам показать и донести, что красивый, а главное оригинальный сайт ценится больше чем повседневные однообразные сайты «без души». Для многих сайты это просто кусок работы о котором забываешь когда видишь заветные деньги от заказчика. Но если вы действительно хотите запомнится и быть востребованный разработчиком и дизайнером то не надо бояться экспериментов, а смело двигаться вперед и пробовать новые идеи. Сегодня мы бы хотели поговорить о создании превью, а именно превью для постов сайта, и сделаем это мы с помощью Flexbox и CSS3.
Анимированный градиент в качестве фона сайта
9 Июн
Сегодня мы бы хотели поговорить о достаточно легком приеме создания градиентного фона на чистом CSS3. У нас часто спрашивают, как создать необычный градиентный фон, с анимацией или метаморфозами но оказывается часть читателей хотят знать как можно реализовать самый обычный градиент на сайте. По этому мы решили рассказать на достаточно легком примере, как можно создать анимированный градиент для своего сайта. нам понадобится несколько строк кода, в результате чего вы получите отличный фон.
Загрузка ...