Привет, друзья. Бывает, что иногда просто необходимо выделить какие - то основные моменты, фразы, важные объявления в отдельном блоке, чтобы на них заострить внимание читателей. Вариантов оформления достаточно много. Самым простым решением для этого будет использование 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>
<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 в нужном месте сообщения.
Оформление списков в блоге
Оформление участков текста и списков
оформите подписку на новые шпаргалки
Виктория, как всегда, очень интересно! Спасибо! Объявление - это важно!
ОтветитьУдалитьИрина, дизайн страницы тоже очень важно. Спасибо.
УдалитьДорогая Вика! Всегда читаю с восторгом и вожделением. Не понимаю ни чёрта пухлого, но превесело же!
ОтветитьУдалитьСемён, ну хоть что - то.
УдалитьОчень полезная функция. Спасибо, Вика!
ОтветитьУдалитьВиктория, спасибо.
ОтветитьУдалитьВикуся Привет! Пока не решаюсь залезть в коды с " далее", но вот др. твою заморочку прекрасную сделала. Уж очень понравилась! Как он там называется ? Спойлер? Нажми и увидишь... Игралась и доигралась...Долго думала куда засунуть такую прелесть!!!. Поигралась в размерами- вид не тот, не так презентабелен. Сделала вверху сообщения.Как тебе такой твой вариант! Спасибо тебе за придумки, Вика!
ОтветитьУдалитьИрина, посмотрела. Красиво получилось и на месте. Молодец.
ОтветитьУдалитьВика, только что попробовала код - очень здорово получилось. Сразу оживился материал. Единственное - я чайник кипяченый, хотела вставить самостоятельно еще один пункт, не вышло ничего. Но вот в записях на три пункта буду периодически использовать )))
ОтветитьУдалитьВиктория, посмотрела у тебя в блоге. Красиво придумала. Да можно ещё добавлять, но тут в обоих кодах нужно дополнения делать.
ОтветитьУдалитьВика, привет. Спасибочки за шпаргалку. Воспользовалась. Удачи!
ОтветитьУдалитьЛюба, привет. Рада видеть тебя. Уже сбегала в гости Красиво получилось и неожиданно.
Удалить