Оригинальное оформление цитаты в тексте

Всем доброго времени суток. Возвращаюсь к теме оформления цитаты в сообщении блога и предлагаю ещё один код, как красиво можно выделить цитату в тексте, используя CSS. Достаточно достойно и элегантно смотрится. Зразу же посмотрите на конечный результат.

Сам код.

<style>blockquote {
color:rgb(255,150,100);
font-family:georgia, serif;
font-size:30px;
line-height:1.2;
text-align:center;
padding:24px 60px;
margin:0 120px;
margin-bottom:18px;
border:solid 1px rgb(220,220,220);
position:relative;
}

blockquote:before,
blockquote:after {
position:absolute;
width:48px;
height:48px;
content:".";
font-size:0;
}

blockquote:before {
background-image:url('http://s013.radikal.ru/i323/1602/26/f9d62a17cccb.png');
top:0;
left:0;
}

blockquote:after {
background-image:url('http://s019.radikal.ru/i633/1602/b9/ce67bce551e4.png');
bottom:0;
right:0;
}

.author {
display:block;
text-align:right;
font-size:18px;
padding:4px;
color:rgb(150,150,150);
font-style:italic;
}</style>

<blockquote>
Шум ничего не доказывает. Курица, снесши яйцо, часто клохчет так, как будто она снесла небольшую планету..
<span class="author">~ Марк Твен.</span>
</blockquote>

Синим цветом я указала картинки – кавычки. Если у вас есть свои варианты можно поменять. И конечно же ваша цитата с именем автора.

Как обычно, если это не предполагает частого использования, то лучше весь код устанавливать непосредственно в самом сообщении в режиме HTML. При частом применении  первую часть кода CSS, которая заключена в теги <style>тут весь код</style> уместнее установить в шаблоне блога. Вкладка шаблон – изменить HTML. Находим строку
 ]]></b: skin> и над ней его устанавливаем. Только уже без тегов style> и </style>.
Затем при написании сообщения перейти из режима создать в режим HTML и в нужном месте вставить код HTML.

<blockquote>
Шум ничего не доказывает. Курица, снесши яйцо, часто клохчет так, как будто она снесла небольшую планету..
<span class="author">~ Марк Твен.</span>
</blockquote>

С цветовыми вариантами текста и его размером решайте сами. Они отмечены зелёным цветом.

В этом сообщении ещё один вариант оформления цитаты или текста.

А я хочу поблагодарить вас за внимание. Пожелаю всем удачи и до новых встреч.

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

Введите Ваш email