Все началось с обсуждения
треугольников средствами HTML/CSS...
...потом треугольники с границей, треугольник от pop-up'а...
А зачем нужен треугольник от pop-up'а без самого pop-up'а?
Вот и родилась мысль: "А не слабо ли мне сделать pop-up аналогичной виндовскому? (закругленные границы и треугольничек снизу)"
"А не слабо!" - ответил я и получит вот такой
результат
CODE (
html):
скопировать код в буфер обмена
<div id="btn">
Hover on me!
<div class="popup">
<h3>Your header here</h3>
<p>Your text<br />here</p>
</div>
</div>
Как видно pop-up создается добавлением единственного
div'а с кодом содержимого. Если в коде будет только строка текста, то он не сильно мешает основному содержанию и не сильно мешает его редактированию (если код не слишком насыщен pop-up'ами).
Все остальное спрятано в стилях, которые, я надеюсь, вынесены в отдельный файл
CODE (
CSS):
скопировать код в буфер обмена
/*Created by IllusionMH*/
/*стили документа не вызывающие никакого интереса*/
body {
background-color: #ffffff;
}
h3 {
margin: 5px 0px;
}
#btn {
position: absolute;
left: 200px;
top: 200px;
}
/*основная часть pup-up'а. Надеюсь тут ничего объяснять не нужно*/
.popup {
background: #f4f4f4;
border: 1px solid #000000;
padding: 10px;
width: 150px;
height: 85px;
position: absolute;
border-radius: 10px;
right: 10px;
bottom: 32px;
}
.popup:before { /*треугольник который создает внешнюю границу*/
border-bottom: 23px solid transparent;
border-right: 23px solid #000000;
position: absolute;
bottom: -23px;
right: 10px;
content: '';
}
.popup:after { /*треугольник который создает "выпирающую" часть сливающуюся с фоном*/
border-left: 20px solid transparent;
border-top: 20px solid #f4f4f4;
position: absolute;
bottom: -20px;
right: 11px;
content: '';
}
.popup {display: none;} /*прячем все pop-up'ы, т.к. они нам не нужны, пока мы не наведем на соответствующие*/
#btn:hover .popup {display: block;} /*отображаем pop-up принадлежащий элементу #btn при наведении на #btn*/
Более подробно код разобран
тут. Единственная разница заключается в том, что треуголник и его граница создаются не одним элементом(в его псевдоэлементом
:before), а двумя псевдоэлементами
:before и
:after, что позволяет разгрузить разметку тела документа.
Существовать 4 вида такого pop-up'а, различающихся положением pop-up'а относительно элемента и соответственно положением уголка:
- Левый нижний угол
- Правый нижний угол (рассмотрен в данном посте)
- Левый верхний угол
- Правый верхний угол
Задача сделать их по аналогии, с имеющимся примером и подсказками в теме про треугольники, вы сможете сами ;)
Буду рад вашим комментариям и разумной критике
