Интересное оформление для элемента цитаты с использованием CSS
15 декабря 2018 | Опубликовано в css | Нет комментариев »
Элемент цитаты используется для того, чтобы обозначить, что конкретная часть текста была взята из другого ресурса, такого как литературное, музыкальное или другое произведение, или даже веб-сайт. В разных браузерах используются разные стили по умолчанию для элемента цитаты, иногда это только левый внешний отступ. Так что если на веб-сайте используется много цитат, например, в блоге при цитировании новостей, может быть важно для сохранения общей идеи оформления задать стили CSS этому элементу.
Распространенное решение — разместить большие изображения кавычек с двух сторон от цитируемого текста. Раньше, до появления CSS3 и множественных фоновых изображений, это нельзя было сделать без дополнительных элементов HTML, таких как <span>. Примечание редакции (переводчика Maya_Specctra или как ты посчитаешь нужным написать): но сейчас проще всего сделать это с помощью псевдоэлементов «до» и «после» или одного из них. Возможно, Вам больше понравится способ с использованием множественных фоновых изображений, который также будет показан ниже.
Классические кавычки, созданные с использованием псевдоэлемента после:
Современные кавычки, без использования графики и дополнительных элементов:
Забавные кавычки, реализованные с помощью множественных фоновых изображений:
Интересные кавычки только с одной стороны:
Технические кавычки, выполненные при помощи псевдоэлементов «до» и «после», а также растягивания размера фона:
Автор урока Chris Coyier
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191