|
Скрипт вертикальное меню
|
|
| TiMzLeR | Суббота, 17 Сентября 2016, 14:45 | Сообщение 1 |
| Ребят всем, есть вопросик как сделать 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 Спасибки заранее) 
Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
Сообщение отредактировал
TiMzLeR - Суббота, 17 Сентября 2016, 14:49 | | [ AZ ] |
| |
| Kosten | Суббота, 17 Сентября 2016, 14:49 | Сообщение 2 |
| TiMzLeR, как понять свой цвет?
| | [ RU ] |
| |
| Kosten | Суббота, 17 Сентября 2016, 14:51 | Сообщение 3 |
|
| Про это как понимаю речь идет.
| | [ RU ] |
| |
| Kosten | Суббота, 17 Сентября 2016, 14:59 | Сообщение 4 |
|
| 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, 15:02 | Сообщение 5 |
|
| TiMzLeR, но здесь еще ели заметная тень есть, это в стилях уже предоставлено. Так что ставь как нужно и тени можешь вывести.
| | [ RU ] |
| |
| TiMzLeR | Суббота, 17 Сентября 2016, 15:12 | Сообщение 6 |
|
| Kosten, Отлично сейчас попробую просто у вас в коду смотрели там такого не было)))
Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
| | [ AZ ] |
| |
|
| TiMzLeR | Суббота, 17 Сентября 2016, 15:17 | Сообщение 8 |
|
| Kosten, Вот пример выставил просто так и все вроде все норм.
1)Скриншот на меню:ТыЦ и Скрин :)
2)Код меню CSS:Вот пример Код .web_id1{background:#FF0000;box-shadow: 0 0 10px #FF0000;}
Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
| | [ AZ ] |
| |
| TiMzLeR | Суббота, 17 Сентября 2016, 15:18 | Сообщение 9 |
|
| Kosten, а я в CSS лазил уннюхивал тами не нашел
Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
| | [ AZ ] |
| |
| Kosten | Суббота, 17 Сентября 2016, 15:18 | Сообщение 10 |
|
| TiMzLeR, но вот и все, ну тень слишком мне кажется большая, сам стащил с веб мастера у Романыча ее. 
| | [ RU ] |
| |
| TiMzLeR | Суббота, 17 Сентября 2016, 15:18 | Сообщение 11 |
|
| Kosten, Я сейчас все правильно сделал???
Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
| | [ AZ ] |
| |
| Kosten | Суббота, 17 Сентября 2016, 15:19 | Сообщение 12 |
|
| Цитата TiMzLeR (  ) Kosten, Я сейчас все правильно сделал???
Все правильно.
| | [ RU ] |
| |
| TiMzLeR | Суббота, 17 Сентября 2016, 15:22 | Сообщение 13 |
|
| Kosten, Не че я уменьшу,а еще один не большой вопрос как сделать чтобы background который я наложил был только на категорий а иконка была что бы отдельно вот пример но там совсем тупо сделали.
1)Скриншот на меню:ТыЦ и Скрин :)
Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
| | [ AZ ] |
| |
| Kosten | Суббота, 17 Сентября 2016, 15:30 | Сообщение 14 |
|
| TiMzLeR, здесь не знаю, мне вообще First ставил, напиши ему, пусть на форуме тебе пояснит как делать если в курсе.
| | [ RU ] |
| |
| TiMzLeR | Суббота, 17 Сентября 2016, 15:36 | Сообщение 15 |
|
| Kosten, Окей) спасибо за помощь
Три вещи никогда не возвращаются обратно - время, слово, возможность. Поэтому не теряй времени, выбирай слова, не упускай возможность.
| | [ AZ ] |
| |
