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


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

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

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

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

Шаг 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

Как получить первые 10 тиц

Всплывающая подпись к картинке при наведении с помощью CSS3

Градиентный текст

WordPress шаблоны бесплатно — подборка за 2017 год

Как создать адаптивный шаблон сайта на CSS3

50 бесплатных ресурсов для дизайнера