18 июн 2018
Анимация шапки сайта при помощи CSS3 и JS
Анимация шапки сайта при помощи CSS3 и JS

В данном уроке мы хотим поговорить о том, как создать замечательную, анимированную шапку для сайта. Идея будет заключаться в следующем-у нас есть изображения часть которого будет скрыта под небольшим слоем градиента до середины изображения. При прокрутке страницы изображение будет уходить в левую часть страницы изменяя при этом свой размер, а также отображаясь в полном объеме, а с права у нас появится текстовый блок, когда пользователь будет прокручивать страницу то картинка будет неподвижной, а текст будет плавно скользить по странице.

14 июн 2018
Превью постов сайта при помощи Flexbox и CSS3
Превью постов сайта при помощи Flexbox и CSS3

В данном уроке мы хотим показать как сделать превью постов сайта при помощи Flexbox и CSS3. Для примера у нас будет две карточки, которые будут полностью адаптивными, а также «живыми», ведь нам нужно, чтобы на них обратили внимание и кликнули. При наведении курсора карточка с постом будет оживать при помощи быстрой и красивой анимации. Давайте посмотрим как у нас это получилось.

02 июн 2018
Изображение с параллаксом на CSS3 для сайта
Изображение с параллаксом на CSS3 для сайта

В данном уроке мы хотим показать как сделать интерактивное изображение с эффектом параллакса и красиво это обыграть на странице, у нас будет обычное фото, которые мы используем для фона и немного заблюрим, а также фоторамка, которую мы оживим и заставим реагировать при наведении курсора мыши.

21 мая 2018
Эффект параллакса для контента сайта на JS
Эффект параллакса для контента сайта на JS

В данном уроке мы рассмотрим достаточно красивый прием стилизации контента для вашего сайта с помощью эффекта параллакса. Для достижения такого эффекта мы будем использовать parallax Content.

16 дек 2017
Слайдер с эффектом параллакса на JS
Слайдер с эффектом параллакса на JS

В данном уроке мы хотим рассказать, как сделать замечательный слайдер с эффектом параллакса с помощью javascript и CSS. Кроме этого слайдер будет оснащен индикатором навигации и состояния, а также превью изображений.

15 дек 2017
Интерактивная заглушка для сайта на JS
Интерактивная заглушка для сайта на JS

Сегодня мы бы хотели поговорить об замечательный заглушке на ваш сайт, а именно об интерактивной анимированной странице, которая будет постоянно находиться в движении, кроме этого реагировать на курсор мыши и выполнять действия. Задумка состоит во создании земли и самолета который постоянно будет находиться в планировании, при движении курсора самолет будет менять свою позицию. Смотрится такой интерактив очень круто и приятно.

09 окт 2017
Анимация для контактной формы с помощью CSS
Анимация для контактной формы с помощью CSS

Контактная форма является важной составляющей сайта, с помощью данной формы посетитель может связаться с администрацией сайта. Чтобы разнообразить форму веб-дизайнеры прибегают к различным методам стилизации и анимации, мы решили поделиться интересной задумкой, как стилизировать профильную контактную форму. Такой вариант будет отличным решением для контактной формы автора поста, что поможет сэкономить место, а также визуально оживить сайт.

08 фев 2017
Эффекты искажения кнопок
Эффекты искажения кнопок

В данном уроке мы рассмотрим замечательный прием с применением фильтром основанных на SVG. Такой прием мы подключим к кнопкам. Основная идея заключается в применении эффекта искажения или эффекта жидкости к кнопке. Также мы рассмотрим возможное применения данной технологии в других элементах. Обратите внимание, что данный эффект экспериментальный, по этому может работать не во всех браузерах.

>> <<