Помощник
 |
|
|
|
|
Сообщение сайта
|
 Как сверстать только на html/css ?, Как сверстать меню шаблона используя только html/css |
Dikucher
|
Сообщение
#12
|
 Частый гость  Группа: User Сообщений: 61 Регистрация: 8.2.2013 Из: Киев Поблагодарили: 5 раз Репутация:  2 
 |
Изначально у меня было 2 способа реализации:
1. Это через фиксированные фоны для каждой ссылки. Этот способ сразу отошел, так как при изменении количества букв в меню- все летело к чертям. 2. Ну и второй способ, это через <li><a><span></span></a></li> Просидеть пришлось таки часа 2, чтобы настроить необходимое мне отображение. Отверстал на хроме. Вроде все ок, иду проверять кроссбраузерность.  Во всех остальных браузерах была 1 маленькая гадость. А именно то, что почему то backgound <span> смещался на 1 px вверх. При чем и смещался он странно. В мозиле при стандартном просмотре смещение было, но стоило увеличить область просмотра (ctrl+) как этот пиксель ставал на место, еще жму ctrl+, опять это смещение. И так вот по очереди. В других браузерах была таже история, лишь с тем отклонением , что при стандартном просмотре было все ОК, но стоило увеличить или уменшьшить, начиналось смещение.Не знаю, но почему то не захотелось в тот момент понимать и (если это возможно ) решать данную проблему. Воспользовался советом tszyan ( и почему сразу так не сделал ? да потомучто мало опыта  ) и все это проделал с использованием только <li> и <a>. В результате получем то, что хотели. Всем спасибо за внимание 
Сообщение отредактировал Dikucher - 11.4.2013, 15:58 |
 |
|
|
zumm
|
 17.4.2013, 14:46;
Ответить: zumm
Сообщение
#13
|
|
 Новичок Группа: User Сообщений: 46 Регистрация: 16.9.2012 Из: Новосибирск Поблагодарили: 6 раз Репутация: 3
|
Все гораздо проще:
.line { background: -moz-linear-gradient(-45deg, rgba(30,87,153,0) 0%, rgba(30,87,153,0) 9%, rgba(30,87,153,1) 10%, rgba(125,185,232,1) 49%, rgba(30,87,153,1) 90%, rgba(30,87,153,0) 91%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(30,87,153,0)), color-stop(9%,rgba(30,87,153,0)), color-stop(10%,rgba(30,87,153,1)), color stop(49%,rgba(125,185,232,1)), color-stop(90%,rgba(30,87,153,1)), color-stop(91%,rgba(30,87,153,0))); background: -webkit-linear-gradient(-45deg, rgba(30,87,153,0) 0%,rgba(30,87,153,0) 9%,rgba(30,87,153,1) 10%,rgba(125,185,232,1) 49%,rgba(30,87,153,1) 90%,rgba(30,87,153,0) 91%); background: -o-linear-gradient(-45deg, rgba(30,87,153,0) 0%,rgba(30,87,153,0) 9%,rgba(30,87,153,1) 10%,rgba(125,185,232,1) 49%,rgba(30,87,153,1) 90%,rgba(30,87,153,0) 91%); background: -ms-linear-gradient(-45deg, rgba(30,87,153,0) 0%,rgba(30,87,153,0) 9%,rgba(30,87,153,1) 10%,rgba(125,185,232,1) 49%,rgba(30,87,153,1) 90%,rgba(30,87,153,0) 91%); background: linear-gradient(135deg, rgba(30,87,153,0) 0%,rgba(30,87,153,0) 9%,rgba(30,87,153,1) 10%,rgba(125,185,232,1) 49%,rgba(30,87,153,1) 90%,rgba(30,87,153,0) 91%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#001e5799',GradientType=1 ); } Вот простенький градиет, который создает нужную полосу. Остается только подогнать цвет и угол.
Сообщение отредактировал zumm - 17.4.2013, 14:47 -------------------- |
|
|
|
|
|
|
|
Похожие темы
| Тема | Ответов | Автор | Просмотров | Последний ответ | |
|---|---|---|---|---|---|
 |
Как вы отдыхаете от работы за компом | 151 | adw-kupon.ru | 19828 | Вчера, 13:52 автор: Vmir |
 |
Как вы бросили работу и перешли на заработок с сайтов? | 20 | uahomka | 3452 | Вчера, 11:54 автор: Skyworker |
|
Как в пушсетках покупают по 100-200 тысяч кликов за день? | 1 | Boymaster | 531 | Вчера, 11:45 автор: Skyworker |
|
Как вывести деньги в Украине с заблокированного Юмани ? | 30 | freeax | 5018 | 20.4.2024, 16:49 автор: Liudmila |
|
Арбитражники, как ведете учет расходов и доходов? | 13 | Boymaster | 2025 | 20.4.2024, 15:06 автор: Boymaster |
|
Текстовая версия | Сейчас: 24.4.2024, 10:38 |
