Гарне оформлення списків на css3

При оформленні списків завжди є бажання виділити їх найбільш красиво, щоб вони виділялися і привертали увагу своїм оформленням, і часто виходить не так як хочеться. У цьому уроці я розповім і покажу як можна оформити списки на CSS3 без зображень.

Приклад оформлення можна побачити тут:

Подивитися прімерСкачать

На жаль тільки Mozilla підтримує переходи псевдоелементів, тому щоб побачити цей ефект використовуйте браузер Mozilla.

1 вид. Поворот цифри при наведенні на елемент списку

alt = "Поворот при наведенні" width = "400" height = "124" class = "aligncenter size-full wp-image-1201" / gt;

Спочатку створимо ось такий список.

Відео: CSS3 для початківців | # 9 Оформлення HTML-списків

HTML частина

Нижче ви можете побачити структуру впорядкованого списку, який будемо красиво оформляти:

12345678910111213

lt;ol class="Rounded-list"gt;lt;ligt; lt;a href=""gt; Прикладlt;/agt; lt;/ligt;lt;ligt; lt;a href=""gt; Прикладlt;/agt; lt;/ligt;lt;ligt; lt;a href=""gt; Прикладlt;/agt;lt;olgt;lt;ligt; lt;a href=""gt; піделементи спискуlt;/agt; lt;/ligt;lt;ligt; lt;a href=""gt; піделементи спискуlt;/agt; lt;/ligt;lt;ligt; lt;a href=""gt; піделементи спискуlt;/agt; lt;/ligt;lt;/olgt;lt;/ligt;lt;ligt; lt;a href=""gt; Прикладlt;/agt; lt;/ligt;lt;ligt; lt;a href=""gt; Прикладlt;/agt; lt;/ligt;lt;/olgt;

CSS частина

А зараз додамо оформлення нашому списку:

Відео: Уроки по CSS / CSS3. Частина 13. Списки

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455

.rounded-list a {position: relative-display: block-padding: .4em .4em .4em 2em-*padding: .4em-margin: .5em 0-background: #ddd-color: # 444-text-decoration: none--moz-border-radius: .3em--webkit-border-radius: .3em-border-radius: .3em--webkit-transition: all .3s ease-out--moz-transition: all .3s ease-out--ms-transition: all .3s ease-out--o-transition: all .3s ease-out-transition: all .3s ease-out-}.rounded-list a: hover {background: #eee-}.rounded-list a: hover: before {-moz-transform: rotate(360deg)--webkit-transform: rotate(360deg)--moz-transform: rotate(360deg)--ms-transform: rotate(360deg)--o-transform: rotate(360deg)-transform: rotate(360deg)-}.rounded-list a: before {content: counter(li)-counter-increment: li-position: absolute-left: -1.3em-top: 50%-margin-top: -1.3em-background: # 87ceeb-height: 2em-width: 2em-line-height: 2em-border: .3em solid #fff-text-align: center-font-weight: bold--moz-border-radius: 2em--webkit-border-radius: 2em-border-radius: 2em--webkit-transition: all .3s ease-out--moz-transition: all .3s ease-out--ms-transition: all .3s ease-out--o-transition: all .3s ease-out-transition: all .3s ease-out-}

2 вид. Додається куточок при наведенні на елемент списку

alt = "Додаємо куточок при наведенні на елемент списку" width = "400" height = "124" class = "aligncenter size-full wp-image-1202" / gt;

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

HTML частина

Структура така ж, як у минулого списку:

12345678910111213

lt;ol class="Rectangle-list"gt;lt;ligt; lt;a href=""gt; Прикладlt;/agt; lt;/ligt;lt;ligt; lt;a href=""gt; Прикладlt;/agt; lt;/ligt;lt;ligt; lt;a href=""gt; Прикладlt;/agt;lt;olgt;lt;ligt; lt;a href=""gt; піделементи спискуlt;/agt; lt;/ligt;lt;ligt; lt;a href=""gt; піделементи спискуlt;/agt; lt;/ligt;lt;ligt; lt;a href=""gt; піделементи спискуlt;/agt; lt;/ligt;lt;/olgt;lt;/ligt;lt;ligt; lt;a href=""gt; Прикладlt;/agt; lt;/ligt;lt;ligt; lt;a href=""gt; Прикладlt;/agt; lt;/ligt;lt;/olgt;

CSS частина

Але оформлення буде трохи інше:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

.rectangle-list a {position: relative-display: block-padding: .4em .4em .4em .8em-*padding: .4em-margin: .5em 0 .5em 2.5em-background: #ddd-color: # 444-text-decoration: none--webkit-transition: all .3s ease-out--moz-transition: all .3s ease-out--ms-transition: all .3s ease-out--o-transition: all .3s ease-out-transition: all .3s ease-out-}.rectangle-list a: hover {background: #eee-}.rectangle-list a: before {content: counter(li)-counter-increment: li-position: absolute-left: -2.5em-top: 50%-margin-top: -1em-background: # fa8072-height: 2em-width: 2em-line-height: 2em-text-align: center-font-weight: bold-}.rectangle-list a: after {position: absolute-content: ``-border: .5em solid transparent-left: -1em-top: 50%-margin-top: -.5em--webkit-transition: all .3s ease-out--moz-transition: all .3s ease-out--ms-transition: all .3s ease-out--o-transition: all .3s ease-out-transition: all .3s ease-out-}.rectangle-list a: hover: after {left: -.5em-border-left; color: # fa8072-}

висновок

Шкода поки що тільки Mozilla підтримує переходи псевдоелементів, про цьому я вже писав в попередньому уроці CSS3 навігація з переходами. Але за основу сміливо можна брати дане оформлення, тому що воно явно приверне увагу вашого відвідувача :).

Успіхів!

джерело: red-team-design.com

Поділися в соц мережах: