Иногда нам на форуме нужно создать красивое оформление в статье, и здесь как раз блок для информации будет отличным дополнением к основному дизайн. Ведь здесь мы делаем стиль как цитата, только со своим ключевым словом, и по левую сторону идет вертикальная полоса, где больше информации, и меняется по ширине вертикальная полоса.
Так получится:
HTML
Код
<div class="dan_logedas_blue kedasunag">
<code>Заголовок ключевого слова</code>
<p>
Здесь идет тематическое описание.
</p>
</div>
CSS
Код
[class*="dan_logedas"]:before {
content: "";
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
display: inline-block;
width: 6px;
border-radius: 3px; }
.dan_logedas_green:before {
background: #618414;
background-image: linear-gradient(45deg, #82b01b 70%, #618414 71%); }
.dan_logedas_red:before {
background: #e8484b;
background-image: linear-gradient(45deg, #ee7578 70%, #e8484b 71%); }
.dan_logedas_blue:before {
background: #427abe;
background-image: linear-gradient(45deg, #6895cb 70%, #427abe 71%); }
.dan_logedas_orange:before {
background: #e26101;
background: linear-gradient(45deg, #fe7a18 70%, #e26101 71%); }
[class*="dan_logedas"] {
display: inline-block;
vertical-align: top;
position: relative;
padding: 5px 0px 5px 20px;
/*margin: 30px auto;*/
margin: 30px;
max-width: 75%;
line-height: 1.5; }
.kedasunag code {
position: relative;
top: -5px;
color: black;
}
code {
font-family: courier;
background: linear-gradient(#ffd21f 0%, #ff0d05 100%) !important;
border-radius: 0px 15px 0px 0px;
box-shadow: inset 0px 0px 2px #6310ed;
margin: 3px 0px;
padding: 3px 5px;
}
@media screen and (max-width: 480px) {
[class*="dan_logedas"] {
margin: 15px auto;
max-width: 95%; }
Цветовая палитра меняется с изменением dan_logedas_blue kedasunag то что выделено меняем на (red, green, orange)_blue demo то что выделено меняем на (red, green, orange) и многие другие.
