309 Данная работа представляет собой эксперимент по созданию 84 простых GUI иконок с помощью CSS и семантического HTML.
Это ни в коем случае не производственная версия, а всего лишь попытка или первый шаг в создании подобной графики без использования изображений.
Поддержка:
firefox 3.5+ safari 5+ chrome 5+ opera 10.6+
Работа как упражнение
Автор довольно много экспериментировал в создании GUI иконок на CSS. Сам же HTML очень прост, потому как основная фишка с использовании CSS псевдо-элементов, а не лишних (не нужных) HTML элементов. Именно поэтому читателям может быть интересна техническая сторона это работы.
Псевдо-элементы предоставляют много возможностей для разработчиков, заинтересованных в семантическом HTML. Если вы ищете практическое использование псевдо-элементов, то этот эксперимент породил идею использования множественных бэкграундов и бордюров в CSS 2.1.
Код
Техника этой работы основана на расширенном создании некой фигуры. Причем некоторые GUI иконки будут работать только в браузерах, в которых есть поддержка CSS3 трансформации.
В HTML заводим простой неупорядоченный список ссылок.
|
1 2 3 4 5 6 |
<ul> <li class="power"><a href="#non">Power</a></li> <li class="play"><a href="#non">Play</a></li> <li class="stop"><a href="#non">Stop</a></li> <li class="pause"><a href="#non">Pause</a></li> </ul> |
Каждая иконка использует набор стилей. Например, код для иконок с классом expand следующий:
|
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 |
.expand a:before { content:""; position:absolute; top:50%; left:1px; width:5px; height:0; border-width:7px 7px 0; border-style:solid; border-color:transparent #c55500; margin-top:-4px; /* css3 */ -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); } .expand a:after { content:""; position:absolute; top:50%; left:5px; width:8px; height:8px; border-width:3px 0 0 3px; border-style:solid; border-color:#c55500; margin-top:-6px; } .expand a:hover:before, .expand a:focus:before, .expand a:active:before { border-color:transparent #730800; } .expand a:hover:after, .expand a:focus:after, .expand a:active:after { border-color:#730800; } |
P.S.: Продвижение сайта занимает много времени и сил? А результата нет? Может пора заказать аудит сайта и на его основе определить максимально эффективную стратегию продвижения?
