оформление нескольких блоков для важных объявлений

Привет, друзья. Бывает, что иногда просто необходимо выделить какие - то основные моменты, фразы, важные объявления в отдельном блоке, чтобы на них заострить внимание читателей. Вариантов оформления достаточно много. Самым простым решением для этого будет использование CSS. Ни каких картинок вам, фотошопов и сторонних скриптов.  И  с таким окончательным вариантом.

Всё достаточно просто. И для реализации нам такой этот код

<div class="tabl hpargalka">
<p> первое пояснение</p>
</div>
 
<div class="tabl blok">
<p>второе пояснение</p>
</div>
 
<div class="tabl natura">
<p>Следующее пояснение</p>
</div>

<style>
.tabl {
  background-color: #fdf6f6;
  width: 399px;
  padding: 1em 1em 1em 1.5em;
  border-left-width: 5px;
  border-left-style: solid;
  border-radius: 1px;
  position: relative;
  line-height: 1.3;
  margin: 49px;
}

.tab + .tabl {
margin-top: 2em;
}

.tabl:before {
color: white;
width: 1.5em;
height: 1.5em;
position: absolute;
top: 1em;
left: -3px;
border-radius: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
font-weight: bold;
line-height: 1.5;
text-align: center;
}

.tabl p {
margin: 0 0 1em;
}

.tabl p:last-child {
margin-bottom: 0;
}

.hpargalka {
  border-left-color: #8e1111;
}

.hpargalka:before {
  background-color: #a01212;
  content: "1";
}

.blok {
  border-left-color: #dc851c;
}

.blok:before {
  background-color: #e88409;
  content: "2";
}

.natura {
  border-left-color: #5b6f37;
}

.natura:before {
  background-color: #445624;
  content: "3";
}
</style>

При желании можно поиграться со всеми  background, чтобы изменить цвета на желаемые.

Готовый код, как всегда устанавливаем в самом редакторе в режиме HTML в нужном месте сообщения.

Оформление списков в блоге
Оформление участков текста и списков

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :