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

оформить цитату в тексте
Всем доброго времени суток. Возвращаюсь к теме оформления цитаты в сообщении блога и предлагаю ещё один код, как красиво можно выделить цитату в тексте, используя 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


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

  1. То что нужно, благодарю!

    ОтветитьУдалить
    Ответы
    1. Рамазан, спасибо, что заглядываешь и что тебе пригодилось.

      Удалить
  2. ВИКТОРИЯ! Наконец-то у меня тоже получились красивые цитаты! Смотрите последнее сообщение от 6 марта на блоге "Волшебный фонарик". Файл PDF я тоже вставила в этот блог (сообщение от 4 марта). Вы это знаете (поставили мне плюсик в Google +). Google презентации я умею делать. СПАСИБО Вам Большое! Какая Вы выдумщица!

    ОтветитьУдалить
    Ответы
    1. Ирина, Вы скоро настоящим вебмастером станете. Мне так нравится как Вы радуетесь своим успехам. Удачи Вам и терпения. Всё получится.

      Удалить
  3. Виктория, спасибо за доходчивое и наглядное объяснение! Буду пробовать)

    ОтветитьУдалить
    Ответы
    1. Мария, мне очень нравится такой вариант оформления цитаты.

      Удалить

Пользовательский поиск
Foto Saya
My Photo