Во время написания статей для сайтов часто необходимо выделить основную информацию особенным образом. Показывая что текст в этом блоке наиболее важный и его стоит прочитать. В таких блоках могут размещаться правила, предупреждения, главные мысли или другие тексты несущие информативный характер требующий внимания.
Первый способ
Давайте рассмотрим самый простой способ. Ниже вы можете увидеть что у нас должно получится.
Наш блок будет состоять из одного элемента с классами и необходимым текстом внутри.
<div class="note note-important">
Текст текст текст
</div>
Теперь добавим основные стили к классу note
.note{
display: block;
margin: 10px;
padding: 10px;
border: 2px dotted #ccc;
}
.note:before{
content: "";
display: block;
margin: 0;
padding: 10px;
}
Для добавления шапки с заголовком мы воспользуемся отдельным классом. Это даст нам возможность использовать разные заголовки и фоновый цвет.
.note-important:before{
content: "ВАЖНО!";
background: #ff0;
}
Теперь все что вам нужно, добавить свои дополнительные классы для разных потребностей.
.note-notice:before{
content: "ВНИМАНИЕ!";
background: #ff5722;
color: #fff;
}
.note-remember:before{
content: "ЗАПОМНИ!";
background: #3f51b5;
color: #fff;
}
Весь код:
HTML
<div class="note note-important">
Текст текст текст
</div>
<div class="note note-notice">
Текст текст текст
</div>
<div class="note note-remember">
Текст текст текст
</div>
CSS
.note{
display: block;
margin:10px;
padding: 10px;
border: 2px dotted #ccc;
}
.note:before{
content: "";
display: block;
margin: 0;
padding: 10px;
}
.note-important:before{
content: "ВАЖНО!";
background: #ff0;
}
.note-notice:before{
content: "ВНИМАНИЕ!";
background: #ff5722;
color: #fff;
}
.note-remember:before{
content: "ЗАПОМНИ!";
background: #3f51b5;
color: #fff;
}
Второй способ
Второй способ похож на первый, но шапка будет вынесена за пределы текстового поля, а сам текст прядётся обернуть в дополнительный div.
Весь код:
HTML
<div class="note note-important">
<div>Текст текст текст</div>
</div>
<div class="note note-notice">
<div>Текст текст текст</div>
</div>
<div class="note note-remember">
<div>Текст текст текст</div>
</div>
CSS
.note{
display: block;
margin:10px;
}
.note div{
padding: 10px;
border: 1px solid #ccc;
border-top: none;
}
.note:before{
content: "";
display: block;
margin: 0;
padding: 10px;
}
.note-important:before{
content: "ВАЖНО!";
background: #ff0;
}
.note-notice:before{
content: "ВНИМАНИЕ!";
background: #ff5722;
color: #fff;
}
.note-remember:before{
content: "ЗАПОМНИ!";
background: #3f51b5;
color: #fff;
}
Если этот материал вам хоть как-то помог, пожалуйста поставьте оценку в начале статьи!!!!
