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



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

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

Для создания какой-то группы цитат создайте общий стиль и при использовании задайте разные классы.

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

<style type="text/css"> .info, .vagno, .inform { margin:10px; /*отступ по периметру блока*/ padding:15px 20px 15px 80px; /*внутренний отступ*/ border:1px solid #999999; /*рамка*/ border-radius: 8px; /*скругление углов*/ -moz-border-radius:8px 8px 8px 8px; box-shadow:2px 2px 3px #999999; /*тень для блока*/ -moz-box-shadow:2px 2px 3px #999999; -webkit-box-shadow: #999 2px 2px 3px; background-position:20px 50%; /*позиционирование картинки*/ background-repeat:no-repeat; /*отменяем повторение картинки*/ position:relative; text-align:justify; /*Выравнивание теста по ширине*/ font-size : 14px; min-height: 50px;/*минимальная высота блока*/ } .info { background-color : #FFFFCC; /*фон блока*/ background-image : url(адрес картинки); } .vagno { background-color : #FFD4A0; background-image : url(адрес картинки); } .inform { background-color : #CFF; background-image : url(адрес картинки); } </style> <div class="info"></div>

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

    ПРИМЕР


Мы создали общий стиль, присвоив отдельно для каждого направления цитаты свой класс .info, .vagno, .inform.


Швейная строчка на CSS3


Швейная строчка — элемент оформления современного дизайна веб-сайтов. Рисуют ее в Photoshop, но можно выполнить такую строчку с помощью кода CSS.

Создаем блок с текстом. Затем задаем пунктирную рамку в 2 пикселя. Делаем скругление углов 3 пикселя. Так как строчка находится на самом краю блока, добавляем box-shadow с тем же фоновым цветом, что и основной блок и толщиной в 3 пиксела.


Cпасибо paulund.co.uk


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

.stitched { width: 250px; padding: 10px; margin: 10px; background: #777; color: #fff; border: 2px dashed #ddd; /*Пунктирная рамка в 2 пикселя*/ border-radius: 3px; /*Скругление углов в 3 пикселя*/ -moz-border-radius 3px; -webkit-border-radius: 3px; -moz-box-shadow: 0 0 0 3px #777, 2px 1px 4px 4px rgba(10,10,0,.5); -webkit-box-shadow: 0 0 0 3px #777, 2px 1px 4px 4px rgba(10,10,0,.5); box-shadow: 0 0 0 3px #777, 2px 1px 6px 4px rgba(10,10,0,.5);/*Тень блока толщиной 3пикселя*/ }

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

    ПРИМЕР


Выделение цитаты


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

.blockquote { border: dotted #666 1px; /*штриховая рамка*/ border-left:solid #820a42 5px; /*справа линия*/ margin: 10px 0px 10px 10px; padding:15px; color:#333; font-style:italic; font-size:14px; background:#fcfcfc; text-align: left; width: 200px; float: right; /*обтекание текста справа*/ }

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

    ПРИМЕР


07.06.2013