Текст. Оформяне на няколко блока с цитати

Приятели, редовни мои читатели и гости, здравейте! Тази публикация е за тези от вас, които искат да отделят няколко цитата в текста или да разпределят текста в отделни блокове. Възможностите за красиво оформяне на части от текст в публикация, върху които да се съсредоточи вниманието на читателя, са много.

В предложения пример можете да направите номерация на цитатите или да я премахнете. В стиловете да изберете желания фон на блоковете, който ще съответства на вашия дизайн. Това става много просто в самия редактор на публикацията.

Код

<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.

</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.

</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.

</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.

</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. </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 редактора на публикацията. Надявам се, че на някого от вас ще послужи. Понякога сухият текст, въпреки че е интересен, се възприема трудно. Нещо в него трябва да бъде подчертано, цитат или блок, върху което да се съсредоточи вниманието. Уеб страницата не е страница от книга или списание. Оформлението на текста ѝ играе важна роля.
Успех!

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: