Двойные кавычки для цитаты

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

Пример блока с цитатой Вы можете посмотреть здесь

Реализация данного метода состоит из HTML+CSS частей и 2-х изображений.

HTML часть:

<blockquote>Ваш текст</blockquote>

CSS часть:

blockquote {
font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif;
width: 400px;
background: url(img/close-qu.gif) no-repeat right bottom;
padding-left: 18px;
text-indent: -18px;
}

blockquote:first-letter {
background: url(img/open-quo.gif) no-repeat left top;
padding-left: 18px;
font: normal 1.4em Georgia, "Times New Roman", Times, serif;
}

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

Изображения:

Сохраните картинки через меню правой кнопки мыши "Сохранить рисунок как".

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ebdesignerwall.com/tutorials/simple-double-quotes/
Перевел: Евгений Попов
Урок создан: 14 Мая 2008
Просмотров: 30015
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^