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

 

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

Шаг 1. HTML

У нас будет элементы, заключенные в единый блок с классом «tabs», в который мы помещаем соответственно классы с нашими ячейками и подписями к ним:

Как видите, мы добавили класс «more», к который стилизует текст «читать далее», кроме этого Вы можете поместить ссылку для быстро перехода.

Складывающаяся панель вкладок для сайта с помощью CSS3

Шаг 2. CSS

Вся основная реализация анимации будет возложена на css, для начала давайте определим общие правила панелей, их ширину и позиционирование в пространстве:

Теперь мы создаем общие стили для всей панели, нам необходимо установить параметры относительно которых мы получил реализации цвета и оттенков и прочих параметров:

Верхняя часть блока будет содержать текст с пронумерованным порядком, нам необходимо стилизовать данный текст и порядок:

Добавляем непосредственно саму нумерацию:

При наведении мы получаем небольшой 3D-эффект, получаем мы его с помощью двух блоков, которые окрашены в разные оттенки и разворачиваются под углом:

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

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

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