Адаптивные блоки с анимацией на чистом CSS

Адаптивные блоки с анимацией на CSS

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

Пару слов об этом эффекте: при наведении у активного блока появляется тень снизу, что создает эффект объема. Кроме этого показывается плавно подробное описание.

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

Процесс установки адаптивных блоков с анимацией, а также исходные файлы находятся здесь — красивое оформление сайта.

		Это интересно 0	Как всё будет выглядеть в блоге: Адаптивные блоки с анимацией на чистом CSS Адаптивность сейчас везде куда не глянь Скопируйте код для блога: <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/zhili-byili-dom-semya-zdorove-byit/8721046/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;"> Адаптивные блоки с анимацией на чистом CSS </a> <div class="insert-intro" style="font-family:trebuchet MS;"> Адаптивность сейчас везде куда не глянь </div> </div> Адаптивные блоки с анимацией на чистом CSS <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/zhili-byili-dom-semya-zdorove-byit/8721046/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;">Адаптивные блоки с анимацией на чистом CSS</a> <div style="font-family:trebuchet MS;"> Адаптивность сейчас везде куда не глянь </div> </div>

Юрий Немец

12.07.2015

В избранное Пожаловаться Просмотров: 188

Комментарии ⁰

Домовёнок 12500

Важные темы:

Последние откомментированные темы:

Адаптивные блоки с анимацией на чистом CSS

Комментарии временно отключены

Открытая группа
889 участников