блок на CSS

@legio1milenium · Регистрация: 04.02.2013

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

как с помощь css сделать такой блок (div) Название: de0b8d1f55.jpg
Просмотров: 20

Размер: 8.2 Кб

без использования картинок

@евгенийпро · 10.09.2017, 11:46

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
</head>
<body>
<br /><br /><br /><br />
<a href="#" target="_blank" title="Какая-то подсказка" class="tooltip"><span>Сссылка куда-то</span></a>
 
 
</body>
</html>

CSS

.tooltip{
            display: inline;
            position: relative;
        }
        
        .tooltip:hover:after{
            background: #333;
            background: rgba(0,0,0,.8);
            border-radius: 5px;
            bottom: 26px;
            color: #fff;
            content: attr(title);
            left: 20%;
            padding: 5px 15px;
            position: absolute;
            z-index: 98;
            width: 220px;
        }
        
        .tooltip:hover:before{
            border: solid;
            border-color: #333 transparent;
            border-width: 6px 6px 0 6px;
            bottom: 20px;
            content: "";
            left: 50%;
            position: absolute;
            z-index: 99;
        }

Добавлено через 1 минуту

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

как с помощь css сделать такой блок

под себя дальше исправьте как надо.

@Lazy_Den · 10.09.2017, 11:49

Пример в песочнице

CSS

.tooltip {
    display: inline-block;
    position: relative;
    padding: 5px 10px;
    background-color: #b24e4c;
    color: #fff;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
}
 
.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 25%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid #b24e4c;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

@legio1milenium · 10.09.2017, 11:50 **[ТС]**

нужен активный бок а не всплывающая подсказка чтобы постоянно его видно было без наведение на что ли бо

@Lazy_Den · 10.09.2017, 11:54

legio1milenium, а немножко самому разобраться в коде, который показал евгенийпро слабо? Убрать не нужное и добавить то, чего не хватает.

@legio1milenium 3 / 3 / 4 Регистрация: 04.02.2013 Сообщений: 214
		1
	блок на CSS 10.09.2017, 11:31. Показов 668. Ответов 4 Метки нет (Все метки) как с помощь css сделать такой блок (div) без использования картинок 0

@legio1milenium 3 / 3 / 4 Регистрация: 04.02.2013 Сообщений: 214
	10.09.2017, 11:50 [ТС]	4
	нужен активный бок а не всплывающая подсказка чтобы постоянно его видно было без наведение на что ли бо 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	10.09.2017, 11:54	5
	legio1milenium, а немножко самому разобраться в коде, который показал евгенийпро слабо? Убрать не нужное и добавить то, чего не хватает. 0