Помощник
|
![]() |
![]() |
Сообщение
#1
|
||
![]() |
|
||
|
|||
![]() |
![]()
Сообщение
#2
|
![]() |
<nav id="topmenu"> <ul class="menu"> <li><a href="">Кнопка</a></li> <li><a href="">Кнопка</a></li> <li><a href="">Кнопка</a></li> <li><a href="">Кнопка</a></li> </ul> </nav> [CSS] body{background:#e5e9ec;} #topmenu .menu{ list-style: none; } #topmenu .menu li a{ -moz-border-radius: 3px; -webkit-border-radius: 3px; background: black; border-radius: 3px; color:#f0f0f0; float: left; font-family: arial; margin:0 5px; padding:5px 25px; position: relative; text-decoration: none; } #topmenu .menu li a:hover{ color:#fff; background: #040404; /* Old browsers */ background: -moz-linear-gradient(-45deg, #040404 0%, #242424 50%, #000000 51%, #000000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#040404), color-stop(50%,#242424), color-stop(51%,#000000), color-stop(100%,#000000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #040404 0%,#242424 50%,#000000 51%,#000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #040404 0%,#242424 50%,#000000 51%,#000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #040404 0%,#242424 50%,#000000 51%,#000000 100%); /* IE10+ */ background: linear-gradient(135deg, #040404 0%,#242424 50%,#000000 51%,#000000 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#040404', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } #topmenu .menu li a:hover:after{ content:''; bottom: -7px; height: 0; left: 50%; margin-left: -5px; position: absolute; width: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid black; } [/CSS] демо |
|
|
![]() |
![]()
Сообщение
#3
|
|
![]() |
Есть прикольный вариант с границей. Делается так
<style> .arrow{ width: 10px; height: 10px; border-top: 10px solid black; margin: 0 auto; } </style> <div class = "arrow"><div>
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
![]() |
Помогите вспомнить рекламного бота Телеграм для обмена рекламой | 0 | Mixatraider | 730 | 21.2.2024, 23:42 автор: Mixatraider |
![]() |
Размещу статью с ссылкой на ваш ресурс Донор: ИКС : 38000, Page Rank = 5.94 (xPR), Траст = 10 |
6 | Курыкин | 3144 | 5.11.2023, 2:55 автор: AndrePro |
![]() |
Помогите рещить проблему с монитором. Почему низкое разрешение при подключении монитора через displayport? |
0 | Levels | 1702 | 11.12.2020, 0:48 автор: Levels |
![]() |
Помогите кто нибудь получить партнерку Росбанк! | 7 | heisenberg_mw | 2345 | 7.8.2020, 9:28 автор: heisenberg_mw |
![]() |
Помогите найти тему пожалуйста | 7 | virtas | 12535 | 24.7.2020, 17:02 автор: -JamesSmips- |
![]() |
Текстовая версия | Сейчас: 25.4.2024, 6:05 |