Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
TVPNERO
9 / 8 / 12
Регистрация: 29.03.2016
Сообщений: 1,088
1

Как сделать слева пункта свечение границы

28.10.2016, 10:34. Просмотров 838. Ответов 7
Метки css, html (Все метки)

В макете свечение границы должно быть как на скрине. А у меня на сайте получилось как то не похоже. Адрес сайта: http://www.ross.ho.ua

Как я сделал на сайте:

Как сделать слева пункта свечение границы


Вот макет:

Как сделать слева пункта свечение границы
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
28.10.2016, 10:34
Ответы с готовыми решениями:

Как сделать так, что бы, три пункта меню было слева и три с права, а между ними логотип
Меню, написано с помощью плагина Max Mega Menu, как сделать так, что бы, три пункта меню было слева...

Свечение пункта меню
Всем привет. Хочу добиться того что на первом изображении, на втором изображении результат пр на...

Как сделать вход слева?
Всем привет! Подскажите пожалуйста, как сделать так, чтобы вход был слева, а справа было свободное...

Как сделать текст слева?
есть такая секция(типо слайд шоу) <section style="padding-top: 0px" id="main"> ...

Как сделать, чтобы не выходило за границы
У меня есть блок. если его сделать меньше чем требует содержимое, то текст выходит за границы...

7
mrtoxas
Модератор
Эксперт HTML/CSS
2569 / 1903 / 1184
Регистрация: 12.07.2015
Сообщений: 5,116
Записей в блоге: 3
28.10.2016, 10:53 2
Да по-разному. Когда вы уже будете код прикладывать?
CSS
1
2
3
4
5
6
.block{
  padding:20px 5px 0 5px;
  box-sizing: border-box;
  border-left: 2px solid darkblue;
  border-top: 1px solid darkblue;
}
HTML5
1
2
3
<div class="block">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, deserunt.
</div>
1
TVPNERO
9 / 8 / 12
Регистрация: 29.03.2016
Сообщений: 1,088
28.10.2016, 15:02  [ТС] 3
mrtoxas,

вот код

HTML5
1
2
3
4
<ul class="list_prenuws">
<li id="firstlinews" style="color: grey;">Что такое "Аxel-Helberg"? </li><br>
<li id="liprevnews">Покупка фирмы в готовом формате </li>
</ul>


CSS
1
2
3
4
5
6
7
8
9
10
.list_prenuws {
    list-style: none;
    position: relative;
        color: #4f748f;
    font-size: 23px;
}
 
#liprevnews:hover {
    border-left: 8px solid #1f5577;
}
http://codepen.io/anon/pen/dpEKOP

Добавлено через 9 минут
mrtoxas, нет у вас тоже левая граница к верхней границе доходит.

а на макете левая граница идет по высоте строки где то на 19 пикселов.
левая граница не должна доходить к верхней серой границе на начале темы я прикрепил ссылку на сайт там можно посмотреть как я сделал--моя левая граница тоже доходит к верхней
0
mrtoxas
Модератор
Эксперт HTML/CSS
2569 / 1903 / 1184
Регистрация: 12.07.2015
Сообщений: 5,116
Записей в блоге: 3
28.10.2016, 15:15 4
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.list_prenuws {
  list-style: none;
  position: relative;
  color: #4f748f;
  font-size: 23px;
  padding:0;
  margin:0;
}
#firstlinews{
  padding-left:20px;
}
 
#liprevnews {
  padding-top: 29px;
  padding-left:10px;
  margin-top:29px;
  border-top:1px solid #1f5577;
  border-left: 8px solid transparent;
}
#liprevnews:hover{
  border-left: 8px solid #1f5577;
}
И уберите <br> из списка. Вы если учитесь, то в код сайта, ссылку которого привели, лучше не смотрите.
0
TVPNERO
9 / 8 / 12
Регистрация: 29.03.2016
Сообщений: 1,088
28.10.2016, 20:25  [ТС] 5
mrtoxas, все так же --->у вас тоже левая граница к верхней границе доходит.

как видите я на начале темы прикрепил скрин макета где видно что подсвечиваемая грпница не должна
доходить к верхней линии.
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2745 / 2305 / 1017
Регистрация: 15.12.2012
Сообщений: 8,561
Записей в блоге: 1
28.10.2016, 20:44 6
Лучший ответ Сообщение было отмечено TVPNERO как решение

Решение

TVPNERO, может так?

HTML5
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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
            position: relative;
            color: #4f748f;
            font-size: 23px;
        }
        li{position:relative; padding:0 10px; margin:10px 0}
        li:hover:before{
            content:"";
            position:absolute;
            top:50%;
            margin-top:-8px;
            left:0;
            width:6px;
            height:16px;
            background: #0000ff
        }
        a{text-decoration: none}
    </style>
</head>
<body>
    <ul>
        <li><a href="#">ITEM - 1</a></li>
        <li><a href="#">ITEM - 2</a></li>
        <li><a href="#">ITEM - 3</a></li>
        <li><a href="#">ITEM - 4</a></li>
        <li><a href="#">ITEM - 5</a></li>
    </ul>
</body>
</html>
1
TVPNERO
9 / 8 / 12
Регистрация: 29.03.2016
Сообщений: 1,088
28.10.2016, 21:16  [ТС] 7
Fedor92,
Благодарю.
Да оно.Только не пойму за счет чего появляется левая граница без--border-left

За счет чего появляется ??
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2745 / 2305 / 1017
Регистрация: 15.12.2012
Сообщений: 8,561
Записей в блоге: 1
28.10.2016, 21:18 8
Цитата Сообщение от TVPNERO Посмотреть сообщение
За счет чего появляется ??
С помощью псевдоэлемента :before
1
28.10.2016, 21:18
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
28.10.2016, 21:18

Как сделать картинку для каждого пункта меню?
Здравствуйте, есть меню: - Пункт 1 - Пункт 2 -Пункт 3 - .... Хочу менять для каждого пункта...

Как сделать фон для текущего пункта меню?
Как сделать фон для текущего пункта меню, т.е. для пункта, на странице которого я нахожусь (не...

Как сделать круглые границы радиокнопок в CSS
Здравствуйте.Подскажите пожалуйста-как сделать круглые границы радиокнопок в CSS? Как на...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru