Комментарии в виде пузырька.
Всем привет. Сегодня мы рассмотрим, как сделать блок комментария в виде пузырька на чистом CSS.
Для начала созадим разметку. Откроем файл index.html и пропишем следующее:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Комментарии в виде пузырька</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="comments">
<div class="comment bubble">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, error.</p>
</div>
</div>
</body>
</html>
Теперь перейдем к CSS.
body {
background: #f0f0f0;
}
.comments {
width: 400px;
}
.comment {
width: 100%;
margin-bottom: 20px;
}
.comment p {
margin: 0 0 10px 0;
}
.bubble {
position: relative;
background: #fff;
padding: 20px;
color: #222;
border-radius: 3px;
margin-left: 20px;
}
.bubble::after {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 15px solid #fff;
left: -15px;
top: 15px;
}
Этим кодом мы получили сразу 2 выгоды. Первая - вы узнали, как создавать красивые блоки с комментариями, а вторая - вы узнали, как создавать треугольники на CSS с помощью свойства border. Меняйте значения border, чтобы добиться того треугольника, который вам нужен.
Итак, на этом все. Спасибо за внимание!
-
Создано 15.06.2014 20:21:49
-
Михаил Русаков
Комментарии (4):
Добрый день Михаил! Скажите пожалуйста почему в данной статье в файле стилей указано отдельно .comment и .bubble, если имя класса у нас comment bubble? Что дает это разбиение? Вы об этом нигде не писали. Объясните пожалуйста для чего это и как это работает? С уважением, Евгений.
Ответить
В html разметке несколько классов к одному элементу принято писать в class="", в CSS же чтобы применять правило надо указывать с точкой имя класса. comment и bubble - 2 разных класса
Ответить
В html вы можете задавать сразу несколько классов для одного элемента через пробел. Т.е. в нашем случае это не один класс с пробелом, а 2 разных класса - bubble и comment. Такое разбиение дает нам возможность применять разные стили для определенной ситуации. К примеру, все блоки с классом comment будут квадратными, а если мы еще добавим класс bubble, то они станут круглыми и с тенями.
Ответить
У <MyRusakov.ru /> появился клон?? 0_о http://e-rentier.ru.gotika2.ru/
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.