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

Распространенное решение — разместить большие изображения кавычек с двух сторон от цитируемого текста. Раньше, до появления CSS3 и множественных фоновых изображений, это нельзя было сделать без дополнительных элементов HTML, таких как <span>. Примечание редакции (переводчика Maya_Specctra или как ты посчитаешь нужным написать):  но сейчас проще всего сделать это с помощью псевдоэлементов «до» и «после» или одного из них. Возможно, Вам больше понравится способ с использованием множественных фоновых изображений, который также будет показан ниже.

Классические кавычки, созданные с использованием псевдоэлемента после:

Современные кавычки, без использования графики и дополнительных элементов:

Забавные кавычки, реализованные с помощью множественных фоновых изображений:

Интересные кавычки только с одной стороны:

Технические кавычки, выполненные при помощи псевдоэлементов «до» и «после», а также растягивания размера фона:

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также: