оформление нескольких блоков с цитатами или текстом

Всем, доброго времени суток. Если необходимо выделить несколько цитат в тексте или разбить сам текст на отдельные красивые блоки - пост для Вас. Вариантов оформления чего - то, на чём стоит заострить внимание читателя, предостаточно. В предложенном примере, можно сделать нумерацию списка или убрать её. В стилях подобрать нужный цвет отдельных блоков, который будет соответствовать вашему дизайну.

Делается это достаточно просто в самом редакторе сообщений.

Для просмотра результата сначала скопируйте весь код целиком и установите его в этом редакторе. Настройки разберём ниже.

<style>.post-body {counter-reset:blockquote;}
.post-body blockquote.kata{font-size:18px;font-family:Georgia;color:#000;border-left:3px solid #FF1744;padding:10px 10px 10px 40px;margin:0;background:#efefef;counter-increment:blockquote;position:relative;}
.post-body blockquote.kata-kata:before{content:counter(blockquote)'.';position:absolute;left:0;top:0;color:#000;font-size:18px;font-weight:700;z-index:2;width:40px;height:40px;line-height:40px;text-align:center;}</style>

<div class="post-body">
<blockquote class="kata">
1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ex lacus, viverra sed tortor sit amet, porta pharetra mauris. Duis malesuada nec nunc eu vestibulum. Etiam non tempor libero. Quisque suscipit nibh nec mauris varius bibendum. Donec id commodo orci. In vel venenatis metus, quis eleifend felis. Ut mollis faucibus purus eleifend tempus. Nullam aliquam aliquet libero, eget porttitor ligula malesuada vel. Etiam a arcu metus. Praesent sit amet cursus diam. Duis pellentesque justo purus, ac consequat nunc egestas sed. Ut congue consequat dui, id ultrices diam. Nam nisl elit, posuere sed risus eu, dictum vestibulum diam. Nam facilisis libero quis elementum rhoncus. Donec condimentum justo sodales cursus fringilla. Fusce in diam lacus.
</blockquote>
<br />
<blockquote class="kata">
2. Nullam tempor purus quis ex aliquam tincidunt. Maecenas mauris justo, tincidunt ac felis sit amet, lobortis pellentesque purus. Sed accumsan consectetur tempus. Sed mollis nisi lacus, at convallis orci malesuada in. Quisque pulvinar mauris id mauris posuere, vel sollicitudin arcu elementum. Suspendisse sit amet mollis nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris eu tempor odio, sit amet posuere sem. Vestibulum varius tempor nunc eget scelerisque. Nam lobortis luctus felis in dignissim.
</blockquote>
<br />
<blockquote class="kata">
3. Suspendisse ut sollicitudin risus. Donec aliquam velit mauris, maximus cursus tortor ornare eu. Nunc nibh magna, ultricies a maximus quis, dictum non nunc. Maecenas venenatis pellentesque augue, sed lacinia eros. Sed ut nibh eget magna aliquet sodales. Nullam varius sagittis tortor eu laoreet. In efficitur mi eget mi mollis vehicula. Vivamus suscipit consequat diam, at pharetra neque hendrerit vel. Mauris non erat sit amet lectus accumsan consectetur. Quisque ut mattis metus. Etiam eleifend hendrerit tincidunt. Praesent ac aliquet mi. Integer accumsan elementum elit, id egestas arcu ornare at. Nullam et nisl vehicula, lacinia purus ac, venenatis purus.
</blockquote>
<br />
<blockquote class="kata">
4. Nam rutrum orci eu diam sodales aliquam. Mauris fringilla suscipit nisl tempor cursus. Morbi metus metus, malesuada eget accumsan et, consectetur vel nibh. Nulla facilisi. Vivamus consequat, enim at posuere molestie, dolor augue suscipit lorem, nec finibus tellus turpis in velit. Phasellus quis gravida massa. Donec bibendum, nulla id molestie pellentesque, purus tortor congue purus, sed tincidunt justo metus et metus. Ut non aliquam mauris. Etiam vitae metus eleifend, hendrerit erat vel, pharetra tortor. Maecenas accumsan ac risus a dignissim.
</blockquote>
<br />
<blockquote class="kata">
Proin tempor sapien justo, in pretium diam facilisis a. In hendrerit vitae nisl at venenatis. Maecenas in faucibus purus. In eu sem tempus quam bibendum scelerisque. Nulla convallis tempus tortor, ut convallis libero auctor vitae. Vestibulum lacus nisl, fringilla sed odio vehicula, fringilla feugiat nisl. Nunc ultricies libero eu laoreet lacinia. Donec ut lectus eget elit dapibus commodo. Quisque odio dui, iaculis eget cursus non, pellentesque nec mi. Maecenas eget tristique lectus. Duis eget dictum ante, sollicitudin rutrum nibh.
</blockquote>
<br />
<blockquote class="kata">
5. Maecenas gravida eros sed lorem porta hendrerit. In hac habitasse platea dictumst. Nam sed auctor quam. Morbi pharetra rhoncus porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam tincidunt dictum nisl sit amet sagittis. Nam feugiat quis tortor ac mattis. Integer gravida sed nunc ut varius. Pellentesque sit amet hendrerit nisl. Ut in tincidunt urna. In mattis neque nibh, vel aliquam justo porttitor ac. Duis egestas urna enim, vitae viverra dui imperdiet vitae. Integer finibus semper porta. Cras eu ipsum ornare, pulvinar urna sit amet, cursus ligula. Donec maximus urna elit, vitae convallis turpis tempus in. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</blockquote>
</div>

font-size:18px; размер шрифта.
color:#000; цвет шрифта.
background:#efefef; цвет фона отдельного блока
border-left:3px solid #FF1744; ширина и цвет линии бордюра
text-align:center; в примере текст расположен по центру ( можно менять на left)

Добавляйте сколько нужно новых абзацев или убирайте

<blockquote class="kata">
1. Тут весь ваш интересный текст
</blockquote>
<br />

Готовый код установите непосредственно в редакторе в режиме HTML.

Всё готово. Надеюсь, что кому - то пригодится.

👇

Получайте новые сообщения с блога прямо на почту

Введите Ваш email