Простые ползунки для публикаций с отражением


Простые ползунки для публикаций с отражением

Простые ползунки для публикаций с отражением

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

Изначально у нас будет содержаться два блока, с двумя кнопками, и отражениями. И так, давайте посмотрим, что у нас получается.

Шаг 1. HTML

Для начала, по традиции, начнем с разметки, у нас будет контейнер,в котором будут содержаться два класса с блоками, название у них будет соответствующее, item1 one и item2 two. Также мы добавляем класс кнопки, и контейнер в котором будет содержаться дополнительный контент.

 

Для добавления дополнительных блоков не составит особого труда, нам необходимо добавить классы с новыми значениями, соответственно item3 three и item4 four. Кроме этого нужно продублировать значение классов, при этом изменив их синтаксис.

Простые ползунки для публикаций с отражением

Шаг 2. CSS

Мы указываем позиционирование, каждого блока и его дочернего элемента, указываем округлость для кнопок, при наведении они будут загораться другим цветом, центре которого будет помещен треугольник.

 

Вот и все. Готово!

Источник: rudebox.org.ua

Previous Адаптивные и бесплатные шаблоны в HTML и в Flat стиле
Next Модуль редакторов для быстрого редактирования v.2.0.1

Suggested Posts

Набор элементов интерфейса — Lookаmore

WooCommerce — свой магазин?

Красочное анимированное меню навигации на CSS3

Модуль для OpenCart 3.х — Новая Почта API v 3.3.1

45 бесплатных адаптивных HTML5-шаблонов

Знаменитая игра Duck Hunt с помощью CSS3