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

Привет, друзья. Бывает, что иногда просто необходимо выделить какие - то основные моменты, фразы, важные объявления в отдельном блоке, чтобы на них заострить внимание читателей. Вариантов оформления достаточно много. Самым простым решением для этого будет использование 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 в нужном месте сообщения.

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


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

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

12 комментариев:

  1. Виктория, как всегда, очень интересно! Спасибо! Объявление - это важно!

    ОтветитьУдалить
    Ответы
    1. Ирина, дизайн страницы тоже очень важно. Спасибо.

      Удалить
  2. Дорогая Вика! Всегда читаю с восторгом и вожделением. Не понимаю ни чёрта пухлого, но превесело же!

    ОтветитьУдалить
  3. Очень полезная функция. Спасибо, Вика!

    ОтветитьУдалить
  4. Виктория, спасибо.

    ОтветитьУдалить
  5. Викуся Привет! Пока не решаюсь залезть в коды с " далее", но вот др. твою заморочку прекрасную сделала. Уж очень понравилась! Как он там называется ? Спойлер? Нажми и увидишь... Игралась и доигралась...Долго думала куда засунуть такую прелесть!!!. Поигралась в размерами- вид не тот, не так презентабелен. Сделала вверху сообщения.Как тебе такой твой вариант! Спасибо тебе за придумки, Вика!

    ОтветитьУдалить
  6. Ирина, посмотрела. Красиво получилось и на месте. Молодец.

    ОтветитьУдалить
  7. Вика, только что попробовала код - очень здорово получилось. Сразу оживился материал. Единственное - я чайник кипяченый, хотела вставить самостоятельно еще один пункт, не вышло ничего. Но вот в записях на три пункта буду периодически использовать )))

    ОтветитьУдалить
  8. Виктория, посмотрела у тебя в блоге. Красиво придумала. Да можно ещё добавлять, но тут в обоих кодах нужно дополнения делать.

    ОтветитьУдалить
  9. Вика, привет. Спасибочки за шпаргалку. Воспользовалась. Удачи!

    ОтветитьУдалить
    Ответы
    1. Люба, привет. Рада видеть тебя. Уже сбегала в гости Красиво получилось и неожиданно.

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск