Как сделать подсветку

@valackar · Регистрация: 24.02.2014

Студворк — интернет-сервис помощи студентам

Как делается такая подстветка? скрин приложен. тоесть при наведение подствечивается так.

@Qwertiy · 30.12.2014, 22:10

Радиальный градиент на hover подойдёт?

@valackar · 30.12.2014, 22:12 **[ТС]**

Сообщение от Qwertiy

Радиальный градиент на hover подойдёт?

хм сейчас попробую спасибо за наводку

@Al_lord · 30.12.2014, 22:16

с прозрачностью в 50% ...

@valackar · 30.12.2014, 22:34 **[ТС]**

Название: Screenshot_5.png
Просмотров: 59

Размер: 12.2 Кб

получилось не так как на скрине, хотелось бы узнать реально ли это все сделать через css или что то еще надо подключать?

@Qwertiy · 30.12.2014, 23:31

Если просто подсветку, то должно быть реально. Если центр под курсором мыши, то нужен ещё скрипт.

@dolte · 31.12.2014, 01:39

Не нужны никакие скрипты
Делаете спрайт, со статичной картинкой и картинкой с подсветкой.
далее при hover меняете background-position

@valackar · 31.12.2014, 02:14 **[ТС]**

Сообщение от dolte

Не нужны никакие скрипты
Делаете спрайт, со статичной картинкой и картинкой с подсветкой.
далее при hover меняете background-position

как раз к этому пришел. Только вод беда получается в тех моментах где меню текст длиньше получаются артефакты
использую три спана но не могу сделать так что бы они были по частям лево центр право

сообственно что я хочу сделать. лево и право остаются неизменны а центр сделать хочу по repeat-x

@dolte · 31.12.2014, 13:25

Покажите код, придумаем чегонить.

@valackar · 07.01.2015, 16:06 **[ТС]**

Спасибо но уже разобрался. Скопировал с иходника. правда так и не понял их логику
Тему можно закрывать

@Qwertiy · 07.01.2015, 23:24

Сообщение от valackar

Скопировал с иходника.

И что там было?

@valackar · 08.01.2015, 08:20 **[ТС]**

Сообщение от Qwertiy

И что там было?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<nav id="nav">
                            <a class="lr logo" href="/">Леспромсервис</a>
                            
                            <ul class="reset nav">
                                <li class="di nav-item nav-item-line">|</li>
                                <li class="di nav-item"><span><span><span><a class="nav-item-link"href="/">Cрубы</a></span></span></span></li>
                                <li class="di nav-item nav-item-line">|</li>
                                <li class="di nav-item"><span><span><span><a class="nav-item-link" href="/">Дома</a></span></span></span></li>
                                <li class="di nav-item nav-item-line">|</li>
                                <li class="di nav-item"><span><span><span><a class="nav-item-link" href="/">Бани</a></span></span></span></li>
                                <li class="di nav-item nav-item-line">|</li>
                                <li class="di nav-item"><span><span><span><a class="nav-item-link" href="/">Готовые проекты</a></span></span></span></li>
                                <li class="di nav-item nav-item-line">|</li>
                                <li class="di nav-item"><span><span><span><a class="nav-item-link" href="/">Беседки</a></span></span></span></li>
                                <li class="di nav-item nav-item-line">|</li>
                                <li class="di nav-item"><span><span><span><a class="nav-item-link" href="/">Фотогалерея</a></span></span></span></li>
                                <li class="di nav-item nav-item-line">|</li>    
                                <li class="di nav-item"><span><span><span><a class="nav-item-link" href="/">Отзывы</a></span></span></span></li>
                                <li class="di nav-item nav-item-line">|</li>
                                <li class="di nav-item"><span><span><span><a class="nav-item-link" href="/">Статьи</a></span></span></span></li>
                                <li class="di nav-item nav-item-line">|</li>
                                <li class="di nav-item"><span><span><span><a class="nav-item-link" href="/">Контакты</a></span></span></span></li>
                            </ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
#nav{
    height: 63px;
    position: relative;
    z-index: 1;
}
    .nav{
        width: 1021px;
        height: 63px;
        margin: 0 auto !important;
        background: url(../img/background-nav.png)50% 0 no-repeat;
        padding: 0 23px !important;
        text-align: center;
        }
            .nav-item{
                vertical-align: top;
                text-align: left;
                height: 51px;
                font-size: 17px; 
                line-height: 51px;
                color: #fff;
                text-shadow:1px 1px 1px #682b08;
                padding: 0 25px !important;
            }
            .nav-item-line{
                padding: 0 !important;
                position: relative;
                z-index: 1;
            }
            .nav-item-line:first-child{
                display: none;
            }
                .nav-item-link{
                    display: block;
                    padding: 0 8px;
                    color: #fff;
                    text-decoration: none;
                    margin: 0 -25px;
                }
                .nav-item.active span,
                .nav-item:hover span {
                    background-image:url("../img/background-nav-item-hover.png");
                }
                .nav-item.active > span,
                .nav-item:hover > span {padding-left:50px; margin-left:-50px;}
            
                .nav-item.active > span > span,
                .nav-item:hover > span > span {padding-right:50px; margin-right:-50px;}
 
                .nav-item span {display:block; height:48px; position: relative;}
                .nav-item > span {background-position:0 0; background-repeat:no-repeat;}
                .nav-item > span > span {background-position:100% -48px; background-repeat:no-repeat;}
                .nav-item > span > span > span {background-position:0 -96px; background-repeat:repeat-x;}

@Qwertiy · 08.01.2015, 13:35

Вот это да... Дибо они какое-то старьё поддерживают, либо кто-то не умеет нормально делать.
Ну а скрывать первую палку - это шедевр в обоих случаях...

@Qwertiy · 08.01.2015, 20:11

Я бы вот так сделал:

@Qwertiy · 08.01.2015, 20:16

Вероятно, точное наложение текстур только css'ом сделать не удастся. Да и в оригинальном коде не вижу ничего на эту тему.

Новые блоги и статьи Все статьи Все блоги /
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .

@valackar 1 / 0 / 0 Регистрация: 24.02.2014 Сообщений: 32

	Как сделать подсветку 30.12.2014, 22:09. Показов 2055. Ответов 14 Метки нет (Все метки) Как делается такая подстветка? скрин приложен. тоесть при наведение подствечивается так. 0

@Qwertiy 835 / 643 / 101 Регистрация: 20.08.2013 Сообщений: 2,524
	30.12.2014, 22:10
	Радиальный градиент на hover подойдёт? 0

@Al_lord 39 / 39 / 26 Регистрация: 11.01.2014 Сообщений: 343
	30.12.2014, 22:16
	с прозрачностью в 50% ... 0

@valackar 1 / 0 / 0 Регистрация: 24.02.2014 Сообщений: 32
	30.12.2014, 22:34 [ТС]
	получилось не так как на скрине, хотелось бы узнать реально ли это все сделать через css или что то еще надо подключать? 0

@Qwertiy 835 / 643 / 101 Регистрация: 20.08.2013 Сообщений: 2,524
	30.12.2014, 23:31
	Если просто подсветку, то должно быть реально. Если центр под курсором мыши, то нужен ещё скрипт. 0

@dolte Человек 331 / 205 / 63 Регистрация: 04.02.2013 Сообщений: 1,223
	31.12.2014, 01:39
	Не нужны никакие скрипты Делаете спрайт, со статичной картинкой и картинкой с подсветкой. далее при hover меняете background-position 1

@dolte Человек 331 / 205 / 63 Регистрация: 04.02.2013 Сообщений: 1,223
	31.12.2014, 13:25
	Покажите код, придумаем чегонить. 0

@valackar 1 / 0 / 0 Регистрация: 24.02.2014 Сообщений: 32
	07.01.2015, 16:06 [ТС]
	Спасибо но уже разобрался. Скопировал с иходника. правда так и не понял их логику Тему можно закрывать 0

@Qwertiy 835 / 643 / 101 Регистрация: 20.08.2013 Сообщений: 2,524
	08.01.2015, 13:35
	Вот это да... Дибо они какое-то старьё поддерживают, либо кто-то не умеет нормально делать. Ну а скрывать первую палку - это шедевр в обоих случаях... 0

@Qwertiy 835 / 643 / 101 Регистрация: 20.08.2013 Сообщений: 2,524
	08.01.2015, 20:16
	Вероятно, точное наложение текстур только css'ом сделать не удастся. Да и в оригинальном коде не вижу ничего на эту тему. 0