Тег blockquote
в HTML используется для выделения цитат или частей текста, которые должны отличаться от остального контента стилем и внешним видом.
В этой статье мы расскажем о различных способах оформления цитат в HTML и поделимся примерами, которые помогут сделать ваш контент более привлекательным и структурированным.
Как оформить цитату в HTML: простой гид и примеры
Оформление цитаты в HTML — это важный аспект, который помогает выделить важные фразы, мнения или идеи на вашем сайте. Это не только делает контент более читаемым, но также улучшает его уровень взаимодействия с вашим контентом.
У тега blockquote есть атрибут cite
, которым указывает автора и источник цитаты. Берем это во внимание для оформления.
Оформление цитат в минимализме
Минимализм всегда приветствуется – просто и со вкусом. Несколько линий, фон подходящего цвета – стильная цитата готова. Такой дизайн встречается на многих сайтах, и его главная цель – выделить цитату от остального контента, чтобы пользователь сразу обратил внимание на эту часть текста.
1.
<blockquote> Текст... <cite>Автор Цитаты</cite> </blockquote>
blockquote { border-left: 2px solid #333; padding: 20px 20px 20px 30px; margin: 20px 0; font-style: italic; background: #f7f7f7; } blockquote cite { display: block; margin-top: 10px; font-style: normal; color: #555; } blockquote cite:before { content: "\2014\00a0"; }
2.
<blockquote> <p>Текст...</p> <cite>Автор Цитаты</cite> </blockquote>
blockquote { font-size: 16px; font-style: italic; padding: 20px 20px 20px 30px; margin: 20px 0; background-color: #fff5e8; border-left: 2px solid #cc962e; } blockquote p:first-letter { font-family: "Times New Roman"; font-size: 200%; color: #cc962e; line-height: 1; } blockquote cite { display: block; margin-top: 10px; font-size: 14px; color: #555; }
3.
<blockquote> Текст... <cite>Автор Цитаты</cite> </blockquote>
blockquote { font-size: 16px; font-style: italic; padding: 20px 20px 20px 30px; margin: 20px 0; background-color: #f6e5a2; position: relative; border-radius: 10px; font-family: "Times New Roman"; font-size: 20px; } blockquote:before { content: ""; width: 35px; height: 35px; display: block; background: #f6e5a2; position: absolute; bottom: -10px; left: 159px; transform: rotate(45deg); } blockquote p { line-height: 1.2; } blockquote cite { display: block; margin-top: 10px; font-size: 14px; color: #555; } blockquote cite:before { content: "\2014\00a0"; }
Оформления цитаты с кавычками
Традиционный способ оформления цитаты заключается в использовании кавычек. Это самый популярный стиль, который часто используется. Кавычки могут быть одинарными или двойными, как было упомянуто ранее в статье.
1.
<blockquote> Текст... <cite>Автор Цитаты</cite> </blockquote>
blockquote { font-size: 16px; font-style: italic; padding: 20px 20px 20px 30px; margin: 20px 0; border: 1px solid #333; position: relative; } blockquote::before { content: "\201C"; /* Левая кавычка */ position: absolute; top: -15px; left: 20px; font-size: 56px; width: 45px; height: 45px; border-radius: 50%; background: #fff; border: 1px solid #333; padding-left: 8px; line-height: 1.3; } blockquote::after { content: "\201D"; /* Правая кавычка */ position: absolute; bottom: -15px; right: 20px; font-size: 56px; width: 45px; height: 45px; border-radius: 50%; background: #fff; border: 1px solid #333; padding-left: 8px; line-height: 1.3; } blockquote cite { display: block; margin-top: 10px; font-size: 14px; color: #555; }
2.
<blockquote> Текст... </blockquote>
blockquote { font-size: 16px; font-style: italic; padding: 20px 20px 20px 30px; margin: 20px 0; background-color: #f9f9f9; position: relative; z-index: 2; } blockquote::after { content: "\201D"; position: absolute; top: -31px; left: -13px; font-size: 253px; color: #e3e3e3; z-index: -1; }
3.
<blockquote> Текст... </blockquote>
blockquote { font-size: 16px; font-style: italic; padding: 20px 20px 20px 30px; margin: 20px 0; background-color: #efefef; position: relative; } blockquote::after { content: "\201D"; position: absolute; top: 50%; left: -25px; font-size: 56px; width: 45px; height: 45px; border-radius: 50%; background: #1eadd9; padding-left: 8px; line-height: 1.3; transform: translateY(-50%); color: #fff; }
Оформления цитаты с анимацией
Для того чтобы придать цитатам еще более привлекательный вид, можно использовать анимацию. Анимированные цитаты привлекают внимание читателей и создают уникальный эффект на странице.
1.
<blockquote> Текст... </blockquote>
blockquote { font-size: 16px; font-style: italic; padding: 20px 20px 20px 30px; margin: 20px 0; background-color: #f2f2f2; position: relative; } blockquote:before { content: "\201C"; position: absolute; top: -24px; left: 21px; font-size: 91px; color: #007bff; animation: fadeInOut 2s infinite; } @keyframes fadeInOut { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
2.
<blockquote> Текст... </blockquote>
blockquote { font-size: 16px; font-style: italic; padding: 20px 20px 20px 30px; margin: 20px 0; border-radius: 10px; position: relative; background: linear-gradient(270deg, #ebf2f4, #d9a2f7); background-size: 400% 400%; animation: AnimationName 6s ease infinite; text-align: center; } @keyframes AnimationName { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } } blockquote::before { content: "\201C"; font-size: 56px; width: 45px; height: 45px; border-radius: 50%; background: #b140bb; padding-left: 8px; line-height: 1.3; position: absolute; top: -22px; left: 50%; transform: translateX(-50%); color: #fff; text-align: left; }
А как получить картинку для цитаты? Ссылка на скачивание не верная((( Нужен 6 вариант
Ева, извините! Обновил, можете скачать.
WordSmall, спасибо))
7 тоже нет картинки((
Исправлено!
В 7 примере, в хроме не отображается
background: url («top.png») no-repeat scroll 50% 11px #fedbc200;
пишет: prntscr.com/cx1moo
А путь к картинке правильно указан?
Установил на сайт вариант номер 9, но вот есть проблема с выравниванием блока. Как отцентрировать его ровно по центру. И, кстати, на мобильных разрешениях экрана блок с цитатой выплывает за границы 😥
Там просто указана ширина в 500px. Если нужен определенный размер, то укажите так
max-width: 500px; margin: 0 auto;
. Если ширина нужна на всю страницу, то просто уберите значениеwidth: 500px
или поставьте в 100%width: 100%
WordSmall, все получилось. Есть еще один вопрос, почему-то размер текста цитаты на больших разрешениях нормальный, а вот на самом минимальном для мобилок — большой. Как выставить допустим 14 размер шрифта цитаты для мобилок?
Кстати, при выставлении параметра
Margin:0 auto
стрелка из цитаты номер 9 налезает на нижний текстMistic, смотрите в вашей теме. В медиах запросах где-то установлен размер шрифта для определенного разрешения экрана тегу цитаты.
WordSmall, премного благодарен, все заработало как нужно)
Рад был помочь.
Спасибо!