Страница 1 из 11
Форум про uCoz » Раздел uCoz » Вопросы по uCoz » Скрипт вертикальное меню (Как сделать box-shadow что бы к каждой иконки был свой цвет.)
Скрипт вертикальное меню
TiMzLeR
Дата: Суббота, 17.09.2016, 14:45 | Сообщение # 1
Vip
Сообщений:354
Награды: 0


Ребят всем, есть вопросик как сделать box-shadow на иконки вертикального меню? что бы к каждой иконки придавался свой цвет, к примеру как на сайте zornet) или же webmaster-ucoz.Друзья если не сложно помогите, я буду вам очень благодарен.

1)Ссылка на сайт:Сайт :)

3)Скриншот на меню:

2)Данный код меню CSS:

Код
/****-Home site Menu-****/
.web_menu li{background: #E0FFFF;border-radius: 4px;border:1px solid #00CED1;margin-bottom:4px;margin-left: -0px;}
.web_menu li:hover{background: #AFEEEE; padding: 0px;border-radius: 4px;}
.web_menu a{border:0px;}
.web_menu *{transition:all linear .1s;-moz-transition:all linear .1s;-webkit-transition:all linear .1s;-o-transition:all linear .1s;}
.web_menu a{text-decoration:none}
.web_menu a:hover i{font-size:24px}
.web_menu .web_title{font-size:13px;font-weight:bold}
.web_desc{display: inline-block;font-size:11px;color: #848484;}
.web_menu i{margin-top:3px; margin-left:7px; margin-bottom: 3px;display:inline-block;float:left;font-size:16px;color:#FFF;width:33px;text-align:center;line-height:32px;height:32px;margin-right:10px;-webkit-border-radius:5px;-moz-border-radius:5px; border-radius:5px; list-style:none;}
.web_id1{background:#FF0000}
.web_id2{background:#1872AF}
.web_id3{background:#FF5400}
.web_id4{background:#05FC4B}
.web_id5{background:#39B2B2}
.web_id6{background:#3DD4B1}
.web_id7{background:#0872F3}
.web_id8{background:#2BB0E9}
/****-End of site Menu-****/


P.S Спасибки заранее) wink
Прикрепления: 6091022.png(48Kb)


Победа не дает силу – силу дает борьба! Если ты борешься и не сдаешься – это и есть сила!...

Сообщение отредактировал TiMzLeR - Суббота, 17.09.2016, 14:49
Kosten
Дата: Суббота, 17.09.2016, 14:49 | Сообщение # 2
Администраторы
Сообщений:12706
Награды: 39


TiMzLeR, как понять свой цвет?

Kosten
Дата: Суббота, 17.09.2016, 14:51 | Сообщение # 3
Администраторы
Сообщений:12706
Награды: 39


Про это как понимаю речь идет.

Прикрепления: 7282595.png(4Kb)


Kosten
Дата: Суббота, 17.09.2016, 14:59 | Сообщение # 4
Администраторы
Сообщений:12706
Награды: 39


TiMzLeR, вообщем все очень просто, вот у меня стили на цвета стоят.

Код
/*=== TENY MENU ===*/
.web_id1{background:#2E80B9;box-shadow: 0 0 10px #48adf3;}
.web_id7{background:#60AD22;box-shadow: 0 0 10px #82d043;}
.web_id4 {background: #3d5a9b;box-shadow: 0 0 10px #3d5a9b;}


Здесь смотрим web_id и цифра, и когда ставим иконку, то ее рядом прописываем.

К примеру зеленый цвет.

Код
<i class="fa fa-key web_id7">


Ключ выводит fa fa-key и через пробел цвет ставим web_id7, увы только 3 цвета выставил.


Kosten
Дата: Суббота, 17.09.2016, 15:02 | Сообщение # 5
Администраторы
Сообщений:12706
Награды: 39


TiMzLeR, но здесь еще ели заметная тень есть, это в стилях уже предоставлено. Так что ставь как нужно и тени можешь вывести.

TiMzLeR
Дата: Суббота, 17.09.2016, 15:12 | Сообщение # 6
Vip
Сообщений:354
Награды: 0


Kosten, Отлично сейчас попробую просто у вас в коду смотрели там такого не было)))

Победа не дает силу – силу дает борьба! Если ты борешься и не сдаешься – это и есть сила!...
Kosten
Дата: Суббота, 17.09.2016, 15:16 | Сообщение # 7
Администраторы
Сообщений:12706
Награды: 39


TiMzLeR, как этого не было, просто сам в админ панель не заходил а так все вытащил, но просто так быстрее. biggrin

Прикрепления: 9224075.jpg(99Kb)


TiMzLeR
Дата: Суббота, 17.09.2016, 15:17 | Сообщение # 8
Vip
Сообщений:354
Награды: 0


Kosten, Вот пример выставил просто так и все вроде все норм.

1)Скриншот на меню:ТыЦ и Скрин :)

2)Код меню CSS:Вот пример
Код
.web_id1{background:#FF0000;box-shadow: 0 0 10px #FF0000;}


Победа не дает силу – силу дает борьба! Если ты борешься и не сдаешься – это и есть сила!...
TiMzLeR
Дата: Суббота, 17.09.2016, 15:18 | Сообщение # 9
Vip
Сообщений:354
Награды: 0


Kosten, а я в CSS лазил уннюхивал тами не нашел

Победа не дает силу – силу дает борьба! Если ты борешься и не сдаешься – это и есть сила!...
Kosten
Дата: Суббота, 17.09.2016, 15:18 | Сообщение # 10
Администраторы
Сообщений:12706
Награды: 39


TiMzLeR, но вот и все, ну тень слишком мне кажется большая, сам стащил с веб мастера у Романыча ее. biggrin

TiMzLeR
Дата: Суббота, 17.09.2016, 15:18 | Сообщение # 11
Vip
Сообщений:354
Награды: 0


Kosten, Я сейчас все правильно сделал???

Победа не дает силу – силу дает борьба! Если ты борешься и не сдаешься – это и есть сила!...
Kosten
Дата: Суббота, 17.09.2016, 15:19 | Сообщение # 12
Администраторы
Сообщений:12706
Награды: 39


Цитата TiMzLeR ()
Kosten, Я сейчас все правильно сделал???

Все правильно.


TiMzLeR
Дата: Суббота, 17.09.2016, 15:22 | Сообщение # 13
Vip
Сообщений:354
Награды: 0


Kosten, Не че я уменьшу,а еще один не большой вопрос как сделать чтобы background который я наложил был только на категорий а иконка была что бы отдельно вот пример но там совсем тупо сделали.

1)Скриншот на меню:ТыЦ и Скрин :)


Победа не дает силу – силу дает борьба! Если ты борешься и не сдаешься – это и есть сила!...
Kosten
Дата: Суббота, 17.09.2016, 15:30 | Сообщение # 14
Администраторы
Сообщений:12706
Награды: 39


TiMzLeR, здесь не знаю, мне вообще First ставил, напиши ему, пусть на форуме тебе пояснит как делать если в курсе.

TiMzLeR
Дата: Суббота, 17.09.2016, 15:36 | Сообщение # 15
Vip
Сообщений:354
Награды: 0


Kosten, Окей) спасибо за помощь wink

Победа не дает силу – силу дает борьба! Если ты борешься и не сдаешься – это и есть сила!...
Форум про uCoz » Раздел uCoz » Вопросы по uCoz » Скрипт вертикальное меню (Как сделать box-shadow что бы к каждой иконки был свой цвет.)
Страница 1 из 11
Поиск: