Создаем меню в стиле Windows 7 с помощью CSS3

Я восхищаюсь тем, насколько много можно сделать даже с небольшим использованием CSS3. Многие элементы пользовательского интерфейса, которые раньше требовали использования изображений, чтобы иметь соответствующее визуальное оформление, теперь могут быть стилизованы с помощью одного только CSS3. Чтобы это доказать, я поставил себе задачу создать меню «Пуск» в стиле Windows 7 при помощи только CSS3.

Если мы проанализируем структуру меню, то мы увидим один div, два неупорядоченных списка с несколькими ссылками каждый и несколькими иконками. Давайте посмотрим, как каждый из них создается.

Контейнер

Контейнер, названный startmenu, содержит два неупорядоченных списка, которые действуют как меню. Он имеет линейный градиент с тремя основными цветами: голубой сверху, темно-синий по середине, и светло-голубой в нижней части. Прозрачность достигается использованием rgba(), у которого есть четыре параметра. Первые три представляют красное, зеленое и синее значения цвета, и последний — прозрачность. Две границы создаются при помощи аттрибутов border и border-shadow.

#startmenu {


border:solid 1px #102a3e;


overflow:visible;


display:inlineblock;


margin:60px 0 0 20px;


 mozborderradius:5px;


webkitborderradius:5px;


borderradius: 5px;


position:relative;


 boxshadow: inset 0 0 1px #fff;


mozboxshadow: inset 0 0 1px #fff;


webkitboxshadow: inset 0 0 1px #fff;


backgroundcolor:#619bb9;


background: mozlineargradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));


 background: webkitgradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc)); }

Меню.

Это неупорядоченный список с белым фоном и двумя границами, создаными при помощи свойств border и border-shadow. Ссылки, которые содержат иконки и пункты меню, используют градиенты и тени для блоков при наведении мыши.

#programs, #links {


float:left;


display:block;


padding:0;


liststyle:none;


}


#programs {


background:#fff;


border:solid 1px #365167;


margin:7px 0 7px 7px;


 boxshadow: 0 0 1px #fff;


mozboxshadow: 0 0 1px #fff;


webkitboxshadow: 0 0 1px #fff;


mozborderradius:3px;


webkitborderradius:3px;


borderradius:3px;


}


#programs a {


border:solid 1px transparent;


display:block;


padding:3px;


margin:3px;


 color:#4b4b4b;


textdecoration:none;


minwidth:220px;


}


#programs a:hover {


border:solid 1px #7da2ce;


mozborderradius:3px;


webkitborderradius:3px;


 boxshadow: inset 0 0 1px #fff;


mozboxshadow: inset 0 0 1px #fff;


webkitboxshadow: inset 0 0 1px #fff;


backgroundcolor:#cfe3fd;


background: mozlineargradient(top, #dcebfd, #c2dcfd);


background: webkitgradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));


}


#programs a img {


border:0;


verticalalign:middle;


margin:0 5px 0 0;


} 

Ссылки меню.

Как и в предыдущем случае, меню ссылок довольно простое. У каждой ссылки есть горизонтальный градиент с тремя цветами: темно-синий на левой и правой стороне, и небольшое количество более светло-синего цвета в середине. Теперь, в отличие от ссылок меню программ, здесь каждая ссылка имеет внутренний < span > элемент, который содержит текст. У этого span элемента есть еще один градиент — вертикальный линейный градиент. Он прозрачный в верхней половине,  а в нижняя часть идет от очень темно-синего до почти прозрачного голубого. Комбинация двух прозрачных градиентов дает точно такой же вид как кнопки в меню Windows 7.

#links {


margin:7px;


margintop:-30px;


}


#links li.icon {


textalign:center;


}


#links a {


border:solid 1px transparent;


display:block;


margin:5px 0;


position:relative;


 color:#fff;


textdecoration:none;


minwidth:120px;


}


#links a:hover {


border:solid 1px #000;


mozborderradius:3px;


webkitborderradius:3px;


 boxshadow: 0 0 1px #fff;


mozboxshadow: inset 0 0 1px #fff;


webkitboxshadow: inset 0 0 1px #fff;


backgroundcolor:#658da0;


background: mozlineargradient(center left, rgba(81,115,132,0.55), rgba(121,163,184,0.55) 50%, rgba(81,115,132,0.55));


 background: webkitgradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384));


}


#links a span {


padding:5px; display:block;


}


#links a:hover span  {


background: mozlineargradient(center top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5));


 background: webkitgradient(linear, center top, center bottom, from(transparent), colorstop(49%, transparent),


 colorstop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5)));


}

То, что у нас должно получиться Вы можете увидеть на картинке ниже, или посмотреть демо-версию.




Меню отлично работает в Firefox 3.6 +, Сафари и Хроме. Немного хуже это выглядит в Опере и IE. Я предполагаю, что код можно оптимизировать для улучшения кроссбраузерности, если у Вас есть какие-нибудь предложения, пожалуйста сообщите мне. Также для улучшения кроссбраузерности градиента Вы можете ознакомится с этой статьей.

Демо

Скачать

Источник


Если вы заметили ошибку в тексте новости, пожалуйста, выделите её и нажмите Ctrl+Enter

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Комментарии 

 



+1


#
iluffka999
01.07.2011 13:56

Вот это конечно СУПЕР!!! ))) UP!


Ответить
| Ответить с цитатой |
Цитировать

 
 



0


#
ali
23.01.2012 05:45

очень хорошо,,спасибо


Ответить
| Ответить с цитатой |
Цитировать

 

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

Имя (обязательное)

E-Mail (обязательное)

Осталось: 1000 символов

Подписаться на уведомления о новых комментариях



Обновить




http://www.webmasters.by/articles/html-coding/132-windows-7-start-menu-css3.html

Губарь Маргарита Александровна