Оформление (нумерованых) списков на CSS3

22.12.2016

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

Это образец одного из способов оформления списка:

Скачать: Оформление (нумерованых) списков на CSS3
Скачано: 34, размер: 1.1 KB, дата: 16.Май.2017

Оформление (нумерованых) списков на CSS3

Желательно пользоваться браузером Mozilla, потому что только он позволяет совершать переходы псевдоэлементов.

Первый вариант. Разворот номера во время подведения курсора к строке списка.
Создаем список

HTML часть

Здесь отображена структура списка. Теперь его надо оригинально оформить.

CSS часть

Оформляем список:

Второй вариант. Появление уголка во время подведения курсора к строке списка.
А теперь оформление.

HTML часть

Структура этого списка не отличается от предыдущего.

CSS часть

А вот оформление отличается:

Как видно из примеров, это совсем не сложно. Достаточно внимательно изучить рекомендации. Надеюсь, они помогут вам даже скучные списки превратить в забавные объекты, привлекающие внимание пользователей.

Добавить комментарий

Ваш e-mail не будет опубликован.