6 321 Насколько дизайн вашего сайта соответствует нынешним представлениям о современном дизайне? Если Вы в глубине души опасаетесь новых технологий или считаете их априори чем-то сложным и запутанным — вы заблуждаетесь. Большинство современных технологий создаются с целью максимально облегчить работу человека и CSS3 не исключение. Рассмотрим, к примеру, способы оформления выпадающего списка с помощью CSS3 и jQuery.
Как оформить выпадающий список
Чтоб Вам было максимально просто изучать примеры, каждый из них вынесен в отдельный файл.
Разметка довольно стандартна:
|
1 2 3 4 5 6 7 8 9 10 |
<section> <label class="select-label">Выберите своего динозавра:</label> <select class="cs-select cs-skin-rotate"> <option value="1">Стегозавр</option> <option value="2">Велоцираптор</option> <option value="3">Спинозавр</option> <option value="4">Археоптерикс</option> <option value="5">Апатозавр</option> </select> </section> |
Внутри тега <select> содержатся теги <option> в которых, в свою очередь, задаются элементы списка. Если в тексте некоторых примеров встретите необычные атрибуты — не пугайтесь, они необходимы для корректного отображения списков. Что касается стилей — большая их часть содержится в файле cs-select.css. Там задается оформление списков, применяющееся по умолчанию. Стили же нашего нетривиального оформления вынесены в отдельный файл cs-skin-border.css. При оформлении первого примера, использовался такой код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
@font-face { font-family: 'icomoon'; src:url('../fonts/icomoon/icomoon.eot?-rdnm34'); src:url('../fonts/icomoon/icomoon.eot?#iefix-rdnm34') format('embedded-opentype'), url('../fonts/icomoon/icomoon.woff?-rdnm34') format('woff'), url('../fonts/icomoon/icomoon.ttf?-rdnm34') format('truetype'), url('../fonts/icomoon/icomoon.svg?-rdnm34#icomoon') format('svg'); font-weight: normal; font-style: normal; } div.cs-skin-border { background: transparent; font-size: 2em; font-weight: 700; max-width: 600px; } @media screen and (max-width: 30em) { .cs-skin-border { font-size: 1em; } } .cs-skin-border > span { border: 5px solid #000; border-color: inherit; transition: background 0.2s, border-color 0.2s; } .cs-skin-border > span::after, .cs-skin-border .cs-selected span::after { font-family: 'icomoon'; content: '\e000'; } .cs-skin-border ul span::after { content: ''; opacity: 0; } .cs-skin-border .cs-selected span::after { content: '\e00e'; color: #ddd9c9; font-size: 1.5em; opacity: 1; transition: opacity 0.2s; } .cs-skin-border.cs-active > span { background: #fff; border-color: #fff; color: #2980b9; } .cs-skin-border .cs-options { color: #2980b9; font-size: 0.75em; opacity: 0; transition: opacity 0.2s, visibility 0s 0.2s; } .cs-skin-border.cs-active .cs-options { opacity: 1; transition: opacity 0.2s; } .cs-skin-border ul span { padding: 1em 2em; backface-visibility: hidden; } .cs-skin-border .cs-options li span:hover, .cs-skin-border li.cs-focus span { background: #f5f3ec; } |
Напоследок хочется пожелать Вам не бояться экспериментировать с новыми идеями дизайна вашего сайта!
