• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Модератор форума: -SAM-  
Форум » Веб-разработка » Вопросы про uCoz » Скрипт вертикальное меню (Как сделать box-shadow что бы к каждой иконки был свой цвет.)
Скрипт вертикальное меню
TiMzLeR
 		Суббота, 17 Сентября 2016 | Сообщение 1
Оффлайн
Проверенные
Сообщений:410
Награды: 0
« 29 »
Ребят всем, есть вопросик как сделать 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 (47.6 Kb)

Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.

Сообщение отредактировал
TiMzLeR - Суббота, 17 Сентября 2016, 14:49
Страна: (AZ)
Kosten
 		Суббота, 17 Сентября 2016 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
TiMzLeR, как понять свой цвет?
Страна: (RU)
Kosten
 		Суббота, 17 Сентября 2016 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
Про это как понимаю речь идет.
Прикрепления: 7282595.png (3.8 Kb)
Страна: (RU)
Kosten
 		Суббота, 17 Сентября 2016 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
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 цвета выставил.
Страна: (RU)
Kosten
 		Суббота, 17 Сентября 2016 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
TiMzLeR, но здесь еще ели заметная тень есть, это в стилях уже предоставлено. Так что ставь как нужно и тени можешь вывести.
Страна: (RU)
TiMzLeR
 		Суббота, 17 Сентября 2016 | Сообщение 6
Оффлайн
Проверенные
Сообщений:410
Награды: 0
« 29 »
Kosten, Отлично сейчас попробую просто у вас в коду смотрели там такого не было)))
Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
Страна: (AZ)
Kosten
 		Суббота, 17 Сентября 2016 | Сообщение 7
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
TiMzLeR, как этого не было, просто сам в админ панель не заходил а так все вытащил, но просто так быстрее. biggrin

Прикрепления: 9224075.jpg (99.4 Kb)
Страна: (RU)
TiMzLeR
 		Суббота, 17 Сентября 2016 | Сообщение 8
Оффлайн
Проверенные
Сообщений:410
Награды: 0
« 29 »
Kosten, Вот пример выставил просто так и все вроде все норм.

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

2)Код меню CSS:Вот пример
Код
.web_id1{background:#FF0000;box-shadow: 0 0 10px #FF0000;}
Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
Страна: (AZ)
TiMzLeR
 		Суббота, 17 Сентября 2016 | Сообщение 9
Оффлайн
Проверенные
Сообщений:410
Награды: 0
« 29 »
Kosten, а я в CSS лазил уннюхивал тами не нашел
Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
Страна: (AZ)
Kosten
 		Суббота, 17 Сентября 2016 | Сообщение 10
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
TiMzLeR, но вот и все, ну тень слишком мне кажется большая, сам стащил с веб мастера у Романыча ее. biggrin
Страна: (RU)
TiMzLeR
 		Суббота, 17 Сентября 2016 | Сообщение 11
Оффлайн
Проверенные
Сообщений:410
Награды: 0
« 29 »
Kosten, Я сейчас все правильно сделал???
Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
Страна: (AZ)
Kosten
 		Суббота, 17 Сентября 2016 | Сообщение 12
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
Цитата TiMzLeR ()
Kosten, Я сейчас все правильно сделал???

Все правильно.
Страна: (RU)
TiMzLeR
 		Суббота, 17 Сентября 2016 | Сообщение 13
Оффлайн
Проверенные
Сообщений:410
Награды: 0
« 29 »
Kosten, Не че я уменьшу,а еще один не большой вопрос как сделать чтобы background который я наложил был только на категорий а иконка была что бы отдельно вот пример но там совсем тупо сделали.

1)Скриншот на меню:ТыЦ и Скрин :)
Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
Страна: (AZ)
Kosten
 		Суббота, 17 Сентября 2016 | Сообщение 14
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
« 555 »
TiMzLeR, здесь не знаю, мне вообще First ставил, напиши ему, пусть на форуме тебе пояснит как делать если в курсе.
Страна: (RU)
TiMzLeR
 		Суббота, 17 Сентября 2016 | Сообщение 15
Оффлайн
Проверенные
Сообщений:410
Награды: 0
« 29 »
Kosten, Окей) спасибо за помощь wink
Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
Страна: (AZ)
Форум » Веб-разработка » Вопросы про uCoz » Скрипт вертикальное меню (Как сделать box-shadow что бы к каждой иконки был свой цвет.)
  • Страница 1 из 1
  • 1
Поиск: