Оформление цитат с помощью css



Цитаты, как правило, доводят информацию до пользователей. Оригинальное оформление цитаты с помощью css украсят ваши статьи. Большинство людей читают их и это самое прекрасное. Для оформления используется наклонный текст, фон в виде кавычек, выделение в виде рамки и т.д. Многое зависит от вашей фантазии. Если вы просматривали страницы сайта, то встречались с цитатами.

Цитата с изображениями.


Пример записи кода 1:


<style type="text/css"> .post1_h3 { width:600px; /*ширина блока*/ background:url(../images/h3.png) no-repeat;/*путь к файлу, без повторения*/ font:normal 20px Oswald;/*начертание,размер,семейство шрифта */ padding: 3px 10px 3px 80px;/*Поля вокруг текста*/ color: #2C5074;/*цвет текста*/ border: 3px solid #2B6BC3;/*ширина,размер,цвет рамки*/ text-shadow: 0 1px 0 #CCC;/*тень текста:сдвиг по x,сдвиг по y,радиус размытия,цвет*/ -moz-border-radius: 60px;/*для браузера Firefox */ -webkit-border-radius: 60px;/*для браузера Chrome и Safari */ border-radius: 60px;/*радиус скругления углов рамки*/ -moz-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset; -webkit-box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset; box-shadow: 0 1px 3px #5bb5f0, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;/*тень к элементу:сдвиг по x,сдвиг по y,радиус размытия,растяжение,цвет*/ margin: 15px 3px;/*отступ сверху-снизу,справа-слева*/ text-transform: uppercase;/*символы текста становятся прописными*/ line-height: 1.3;/*интерлиньяж (межстрочный интервал) текста*/ </style>
Полный список статей, уроков вы можете
найти по карте, выбрав категорию раздела.

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


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


Пример записи кода 2:


<style type="text/css"> .blockquote4 { background:url(../images/ezik.jpg) no-repeat;/*путь к файлу, без повторения*/ margin: 10px 40px;/*величина отступа сверху-снизу,слева-справа*/ border: 2px solid #D4D4D4; /*рамка: ширина, стиль, цвет*/ box-shadow: 0 0 6px #DDD;/*тень*/ background-position:445px 5px;/*положение изображения по горизонтали ,по вертикали*/ width: 432px;/*высота блока*/ min-height: 90px; /*минимальная ширина необходима для изображения*/ height: 90px;/*ширина блока*/ margin: 10px;/*отступы по всем сторонам*/ padding: 10px 105px 10px 10px;/*поля для сторон элемента*/ font: 600 16px Tahoma, Geneva, sans-serif;/*начертание текста,размер и семейство шрифта*/ color: #2C5074;/*цвет шрифта*/ border-radius: 5px;/*радиус скругления рамки*/ -moz-border-radius: 5px; -webkit-border-radius: 5px; } </style> <div class="blockquote4">Характер подобен дереву, а репутация – его тени. Мы заботимся о тени; но на самом деле надо думать о дереве.</div>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР


В данном примере, в качестве изображения мы взяли этого симпатичного ежика.. Вы также можете здесь поменя ть свойства для текста, самой рамки и получить то, что вы хотите.




Пример записи кода 3:


<style type="text/css"> .blockquote5 { background:url(../images/2.png), url(../images/1.png);/*адрес изображений*/ background-position: top left, bottom right;/*положение изображений*/ background-repeat:no-repeat;/*отменяем повторение*/ padding: 35px 45px 20px;/*поля для сторон элемента*/ margin: 10px;/*отступы по всем сторонам*/ width:500px; /*высота блока*/ font-style: italic; /*начертание текста*/ color: #666;/*цвет текста*/ } </style> <div class="blockquote5">Праздность и ничегонеделание влекут за собой порочность и нездоровье - напротив того, устремление ума к чему-либо приносит за собой бодрость, вечно направленную к укреплению жизни.</div>

РЕЗУЛЬТАТ В БРАУЗЕРЕ:

    ПРИМЕР



Для выразительности цитаты использовано два изображения (кавычки слева и справа).



Эта цитата сразу выделяется из контента и на нее невозможно не обратить внимание.


При создании цитат старайтесь оптимизировать стили. Можно написать таблицу с использованием множества классов и стилей, а можно упорядочить и оптимизировать. Чем меньше символов в файле, тем меньше его вес и, соответственно, быстрее грузятся страницы.


28.06.2013