Как изменить blockquote - Исправление ошибок и поиск оптимальных решений проблем

В данной заметке представлено 8 вариантов оформления цитат <blockquote>

Все примеры имеют очень простой HTML код:

<blockquote class="blockquote-N">
	<p>Текст цитаты</p>
	<cite>Автор цитаты</cite>
</blockquote>

Вариант 1:

ПРИМЕР
HTML
CSS

Опасность не в том, что компьютер однажды начнет мыслить, как человек, а в том, что человек однажды начнет мыслить, как компьютер.

Sydney J. Harris

Текст цитаты

<cite>Автор цитаты</cite>

</blockquote>

.blockquote-1 {

box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);

margin: 16px 16px 30px 16px;

padding: 16px 24px;

position: relative;

font-size: 16px;

background: #efefef;

color: #000;

font-style: italic;

}

.blockquote-1::before {

border: 14px solid transparent;

border-top: 14px solid #efefef;

border-bottom: 0;

height: 0;

width: 0;

border-top-width: 25px;

content: »;

display: block;

position: absolute;

left: 40px;

bottom: -25px;

transform-origin: center;

transform: rotate(90deg) skew(-25deg) translateY(17px);

}

.blockquote-1 cite {

position: absolute;

bottom: -24px;

left: 62px;

font-size: 13px;

font-style: normal;

font-weight: 300;

color: #000;

}

Вариант 2:

Вариант очень похож на первый, с небольшим отличием.

Кавычка “ ставится для тега  в цитате.

ПРИМЕР
HTML
CSS

Контент предшествует дизайну. Дизайн без контента не дизайн, это – художественное оформление.

Jeffrey Zeldman

Текст цитаты

<cite>Автор цитаты</cite>

</blockquote>

.blockquote-2 {

margin: 16px 16px 30px 16px;

padding: 26px 24px;

font-size: 16px;

background: #BFE2FF;

border-left: 5px solid;

border-color: #337AB7;

}

.blockquote-2::after {

content: »;

margin-top: -30px;

padding-top: 0;

position: relative;

bottom: -50px;

left: 20px;

border-width: 30px 0 0 30px;

border-style: solid;

border-color: #BFE2FF transparent;

display: block;

width: 0;

}

.blockquote-2 p::before {

content: «“»;

font-family: Georgia;

font-size: 40px;

line-height: 0;

display: inline-block;

}

.blockquote-2 cite {

float: right;

font-size: 13px;

}

.blockquote-2 cite:before {

content: ‘- ‘;

}

Вариант 3:

ПРИМЕР
HTML
CSS

Работает? Не трогай!

Любой программист

Текст цитаты

<cite>Автор цитаты</cite>

</blockquote>

.blockquote-3 {

position: relative;

text-align: center;

margin: 16px 16px 34px 16px;

border: 4px solid #337AB7;

border-radius: 20px;

padding: 16px 24px;

font-size: 18px;

}

.blockquote-3:before,

.blockquote-3:after {

content: »;

position: absolute;

width: 0;

height: 0;

}

.blockquote-3:before {

left: 30px;

bottom: -32px;

border: 16px solid;

border-color: #337AB7 transparent transparent #337AB7;

}

.blockquote-3:after {

left: 35px;

bottom: -21px;

border: 12px solid;

border-color: #fff transparent transparent #fff;

}

.blockquote-3 cite {

position: absolute;

bottom: -28px;

left: 62px;

font-size: 15px;

font-weight: bold;

color: #337AB7;

}

Вариант 4:

ПРИМЕР
HTML
CSS

Помните, что обычно есть решение проще и быстрее того, что первым приходит вам в голову.

Donald Knuth

Текст цитаты

<cite>Автор цитаты</cite>

</blockquote>

.blockquote-4 {

position: relative;

font-size: 16px;

margin: 16px 16px 46px 16px;

border: 2px solid #337AB7;

border-radius:20px;

padding: 25px;

}

.blockquote-4::after {

content:«»;

position: absolute;

border: 2px solid #337AB7;

border-radius: 0 50px 0 0;

width: 40px;

height: 40px;

bottom: -40px;

left: 50px;

border-bottom: none;

border-left: none;

z-index: 2;

box-sizing: border-box;

}

.blockquote-4::before {

content:«»;

position: absolute;

width: 80px;

border: 6px solid #FFF;

bottom: -3px;

left: 50px;

z-index: 1;

}

.blockquote-4 cite {

position: absolute;

bottom: -30px;

left: 110px;

font-size: 13px;

font-weight: bold;

color: #337AB7;

}

Вариант 5:

ПРИМЕР
HTML
CSS

Некоторые проблемы лучше не решать, а избегать.

DTony Hoare

Текст цитаты

<cite>Автор цитаты</cite>

</blockquote>

.blockquote-5 {

position: relative;

padding: 16px 24px;

margin: 16px 16px 26px 16px;

font-size: 16px;

border-top: 2px solid #337AB7;

border-bottom: 2px solid #337AB7;

}

.blockquote-5::after {

font-family: Times, sans-serif;

font-weight: bold;

position: absolute;

content: «”»;

color: #BFE2FF;

font-size: 160px;

line-height: 0;

bottom: -22px;

right: 30px;

text-shadow: 2px 0 0 #337AB7, -2px 0 0 #337AB7, 0 2px 0 #337AB7, 0 -2px 0 #337AB7, 1px 1px #337AB7, -1px -1px 0 #337AB7, 1px -1px 0 #337AB7, -1px 1px 0 #337AB7;

}

.blockquote-5 cite {

color: #337AB7;

font-size: 15px;

padding-top: 20px;

display: block;

}

Вариант 6:

ПРИМЕР
HTML
CSS

Если Вы сделаете хорошую работу для хороших клиентов, то это приведет к следующей хорошей работе для других хороших клиентов. А если Вы сделаете плохую работу для плохих клиентов, то это, в свою очередь, приведет к другой плохой работе для других плохих клиентов.

Michael Bierut

Текст цитаты

<cite>Автор цитаты</cite>

</blockquote>

.blockquote-6 {

border-left: 6px solid #BFE2FF;

font-size: 16px;

font-style: italic;

margin: 16px;

padding: 16px 24px;

position: relative;

}

.blockquote-6:before {

content: «»;

position: absolute;

top: 50%;

left: -6px;

height: 40px;

background-color: #fff;

width: 6px;

margin-top: -1em;

}

.blockquote-6:after {

content: «”»;

position: absolute;

top: 50%;

left: -20px;

color: #337AB7;

font-size: 50px;

font-family: Times, sans-serif;

font-weight: bold;

line-height: 30px;

}

.blockquote-6 cite {

color: #337AB7;

font-size: 15px;

padding-top: 10px;

display: block;

text-align: right;

}

Вариант 7:

Очень простой пример с тенью.

ПРИМЕР
HTML
CSS

Сократ говорил «Познай себя». А я говорю «Познай своих пользователей». И знаете что? Они не думают, так же как и вы.

Joshua Brewer

Текст цитаты

<cite>Автор цитаты</cite>

</blockquote>

.blockquote-7 {

border: 2px solid #337AB7;

font-size: 16px;

font-style: italic;

margin: 16px 31px 31px 16px;

padding: 16px 24px;

position: relative;

box-shadow: 15px 15px 0 0 #337AB7;

}

.blockquote-7 cite {

color: #337AB7;

font-size: 15px;

padding-top: 10px;

display: block;

text-align: right;

}

Вариант 8:

ПРИМЕР
HTML
CSS

Я хочу создавать красивые вещи, даже если это никому не нужно, в качестве противостояния некрасивым вещам. Это – мое намерение

Saul Bass

Текст цитаты

<cite>Автор цитаты</cite>

</blockquote>

.blockquote-8 {

position: relative;

padding: 16px 24px;

margin: 16px 46px;

font-size: 16px;

text-align: center;

}

.blockquote-8:before,

.blockquote-8:after {

position: absolute;

color: #BFE2FF;

font-size: 100px;

font-family: Times, sans-serif;

line-height: 100px;

}

.blockquote-8:before {

content: ‘“’;

left: -30px;

top: -10px;

}

.blockquote-8:after {

content: ‘”’;

right: -30px;

bottom: -10px;

}

.blockquote-8 cite {

color: #337AB7;

font-size: 15px;

padding-top: 10px;

display: block;

}

Опубликовано: 13.03.2019
Рубрики: Вкладки, блоки и списки
Метки: CSS, Сборники
27545 просмотров

Источник

Тег <blockquote> предназначен для выделения цитат внутри документа. Как правило текст, обозначенный этим тегом, отображается в виде блока с отступами слева и справа, а также с отбивкой сверху и снизу. В этой статье я расскажу как «красиво» его оформить у себя на сайте с помощью CSS.

Примеры оформления тега blockquote на html

На момент написания этой инструкции блоки цитат на моем сайте на WordPress выглядят так:

Как настроить blockquote на css

В простейшем случае нужно изменить фон блока (мы помним, что тег blockquote является блочным элементом CSS), добавить бордюрчик и отступы. У меня это выглядит так:

blockquote {
  background: none repeat scroll 0 0 #fafafa;
  border-bottom: 3px dashed #bababa;
  border-top: 3px dashed #bababa;
  color: #878787;
  font-size: 16px;
  font-style: italic;
  line-height: 1.45;
  padding: 20px;
  position: relative;
  text-align: justify;
  margin: 4% auto;
  min-height: 48px;
  }

Псевдоэлемент :before

Вы спросите, а как же знак «i» перед цитатой (на других сайтах вы так же можете увидеть кавычку(и) и другие символы)? Чтобы добавить больше «украшательств» мы используем всевдоэлемент тегов :before, который применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется.

У меня на сайте CSS стили псевдоэлемента :before для тега blockquote выглядят так:

blockquote:before {
  font-family: FontAwesome; 
  content: "f05a"; 
  font-size: 48px; 
  font-style: normal; 
  float:left; 
  line-height: 1.0; 
  margin-right: 2%;
  }

Иконочные шрифты для сайта

Как вы успели заметить для вывода значка «i» я использовал специальный иконочный шрифт Awesome. Чтобы его использовать у себя на сайте вам нужно подключить следующий файл CSS стилей у себя на сайте перед закрывающим тегом </boby>:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Выводы

Используя CSS стили можно выделить блоки цитат оформленные тегом blockquote на фоне содержимого сайта. А при помощи превдотегов :before, :after и иконочных шрифтов это оформление будет еще краше.

Благодарности

При написании статьи были использованы следующие источники:

http://htmlbook.ru/html/blockquote
https://zaurmag.ru/priemy-verstki-html-css/ikonochnye-shrifty-dlya-sajta-chto-eto-i-kak-ispolzovat.html
http://wordsmall.ru/html-i-css/oformleniya-citaty-teg-blockquote.html

Источник

30+ стилей блочных цитат

Здесь предоставлены некоторые варианты стилей цитат, их установка и настройка в Blogger. По сути, стиль блочной цитаты — это типографский элемент, основанный на HTML-теге «<blockquote>». Обычно мы используем его для цитирования некоторых строк, абзаца или блока текста. На самом деле, цитата используется для выделения фрагмента текста от другого текста. Поэтому мы должны использовать некоторые привлекательные стили цитат, чтобы выделить текст и сделать его другими.

Сегодня я собираюсь представить некоторые стильные стили блочных цитат. Они основаны на чистом CSS. На самом деле, вы можете просто взять код отсюда и вставить его в свой блог. Вы можете выбрать желаемый стиль цитаты из списка ниже и следовать инструкциям, чтобы добавить его в свой блог Blogger. Также я предоставлю пошаговое руководство для всего процесса.

Как применить стили цитат в Blogger?

Мы должны использовать цитаты, чтобы сделать наш контент более понятным, логичным и информативным. На самом деле, все последние шаблоны Blogger поставляются с блок-цитатами по умолчанию. Если вам это не нравится, этот список предоставит вам несколько красивых стилей CSS-цитат. Используя любой из этих стилей, мы можем улучшить внешний вид блочной цитаты нашего блога. Итак, давайте узнаем, как настроить blockquote в Blogger

Шаг 1. Сначала создайте резервную копию шаблона и войдите в свою учетную запись Blogger и перейдите в раздел « Тема ». Теперь нажмите на кнопку « Редактировать HTML ».

Шаг 2. Найдите «<b:skin>… </b:skin>» и раскройте его.

Шаг 3: Прокрутите весь путь вниз и найдите конечный код « ]]></b:skin> ».

Шаг 4: выберите нужный стиль цитаты из списка ниже и вставьте его прямо над «]]></b:skin>», как показано на следующем рисунке.

Шаг 5: Наконец, нажмите кнопку « Сохранить тему » и зайдите в свой блог, чтобы увидеть измененный стиль цитат.

Устранение неполадок: если вы видите, что настроенный вами стиль цитат блога не совпадает с тем, который вы выбрали в приведенном ниже списке, стиль по умолчанию может конфликтовать с новым. В этом случае, нужно выполнить действия, описанные мною ниже.

Основные способы устранения неполадок.

1. Войдите в свою учетную запись Blogger и перейдите в раздел «Тема»> «Редактировать HTML» и найдите стиль блочного цитирования CSS по умолчанию для шаблона.

2. Вы должны закомментировать (отключить) весь блок цитат по умолчанию, используя / * …. Код… * / как показано выше. Наконец, нажмите кнопку « Сохранить тему », и все готово.

Зайдите в свой блог снова> Удалите историю браузера и кэш> перезагрузите свой блог, и вы увидите, что вновь примененный стиль цитат отображается правильно. Теперь давайте выберем желаемый стиль цитат Blogger из следующего списка.

Список стилей CSS-цитат для Blogger:

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

CSS Blockquote Стиль: 1

blockquote {font: 16px/24px Arial, sans-serif;text-align:left;color: #666;margin: 15px 10px;padding: 15px 10px;}
blockquote:before {background: #ddd;text-align: center;height: 25px;content: open-quote;float: left;line-height: 42px;border-radius: 25px;font-size: 24pt;color: #fff;vertical-align: -0.5em;position: relative;margin-right: 0.5em;display: block;width: 25px;}
blockquote:after {display: block;text-align: center;color: #fff;float: right;border-radius: 25px;vertical-align: -0.5em;content: close-quote;font-size: 24pt;line-height: 42px;background: #ddd;position: relative;margin-right: 1em;width: 25px;height: 25px;}
blockquote:hover:after, blockquote:hover:before {transition: all 350ms;background-color: #555;-moz-transition: all 350ms;-o-transition: all 350ms;-webkit-transition: all 350ms;}

Это действительно красивый и простой стиль цитат для Blogger с эффектом наведения. На самом деле, он обернет ваш выделенный текст в две серые кавычки. Если вы используете чистый шаблон, я рекомендую этот для вас.

CSS Blockquote Стиль: 2

blockquote {
background:url(https://4.bp.blogspot.com/-ZUe4vndy1Og/WYQF-1CpfFI/AAAAAAAAAHQ/RDg_SfSN7twv7wbrKT-zjnBsh1tZwlEYQCLcBGAs/s1600/bo-blockquote.png) no-repeat;
font-size:15px;text-align:left;color: #555;
border: dashed 1px #eee;margin: 25px 35px;padding: 20px 30px 30px 40px;}

Среди многих стилей blockquote, это очень чистый и легкий дизайн. На самом деле, знак одинарной кавычки даст хороший визуальный эффект и правильно выделит текст. Кроме того, он будет создавать пунктирную рамку вокруг текста.

CSS Blockquote Стиль: 3

blockquote{border-left: 15px solid #c76c0c;font-family: Georgia, serif;font-size:15px;text-align: justify;background: #fff;line-height: 1.2;
display:block;margin: 0 0 20px;padding: 15px 20px 15px 45px;position: relative; font-size: 16px;color: #666;
border-right: 2px solid #c76c0c;box-shadow: 2px 2px 15px #ccc;-webkit-box-shadow: 2px 2px 15px #ccc;-moz-box-shadow: 2px 2px 15px #ccc;}
blockquote::before{font-size: 50px;position: absolute;color: #999;left: 10px;top:5px;font-weight: bold;content: «1C»;}
blockquote a{cursor: pointer;color: #c76c0c;text-decoration: none;background: #eee;padding: 0 3px;}
blockquote a:hover{color: #555;}

Этот удивительно разработанный стиль цитат улучшит впечатление от чтения вашего блога. Он имеет приятный эффект тени, чтобы привлечь больше внимания читателей. По этой причине я буду считать, что это один из лучших стилей цитат для блогеров.

CSS Blockquote Стиль: 4

blockquote:before,blockquote:after{background:transparent;}
blockquote{line-height:normal;font-size:16px;color:#666;padding:12px 0 0 44px;text-align:left;font-style:italic;margin:10px 30px 20px;position:relative}
blockquote:before{color:#ccc;content:»1C»;line-height:1;font-size:85px;left:-5px;position:absolute;top:-5px;font-family:Georgia,serif;}

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

CSS Blockquote Стиль: 5

blockquote{text-align:left;
border:1px solid #ededed;
padding:35px;font-size:15px;margin:10px 0;
font-family:’Cookie’,cursive;color:#676767;}

Это супер простой стиль цитат для блогера. Шрифт Cookie создает причудливый, но заметный вид в этом дизайне. Кроме того, полноразмерная граница очень плавно отделит выделенный текст от другого.

CSS Blockquote Стиль: 6

blockquote:before, blockquote:after{content: «»;}
blockquote{margin: 0 2em;font-size:16px;line-height:22px;text-align:left;quotes: «» «»;border-left:3px solid #737e7e;padding-left:10px;}

Очень короткие CSS-линии создают магию для этого дизайна. На самом деле, этот стиль цитирования предназначен для любителей простоты. На самом деле дизайн свободен от каких-либо внешних таблиц стилей с использованием нескольких свойств CSS.

CSS Blockquote Стиль: 7

blockquote {
background: #f9f9f9;margin: 10px 20px;text-align:left;font-size:16px;
border: 1px solid #d2d2d2;
color: #555;padding: 24px;font-style: italic;}

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

CSS Blockquote Стиль: 8

blockquote {font-family: «Merriweather», Georgia, serif;font-style: italic;
padding-left: 35px;padding: 17px 58px 20px 55px;font-size: 16px;text-align:left;font-weight: 300;color: #333;background: #F2E4A0;margin: 21px 30px;}
blockquote:before {content: «1C»;margin-left: -35px;line-height: 1.33;float: left;font-weight: 700;font-style: normal;font-size: 25px;color: #111;}

Этот тип стилей блочных цитат очень популярен и широко используется многими разработчиками шаблонов блогов. Фактически, он создаст уникальный вид с небольшим знаком кавычки и светлым фоном. Даже вы можете изменить цвет фона, если хотите, основываясь на стиле шаблона вашего блога.

CSS Blockquote Стиль: 9

@import «https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»;
blockquote{padding:15px;margin-left:0;border:1px solid #d8d8be;
background:lightyellow;font-style:italic;text-align:left;font-family:Georgia;}
blockquote:after{font-family:FontAwesome;content:’f10e’;display:inline-block;font-weight:500;
font-style:normal;line-height:1;-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;color:#999985;margin-left:10px;}
blockquote:before{content:’f10d’;font-style:normal;display:inline-block;font-family:FontAwesome;
line-height:1;-webkit-font-smoothing:antialiased;margin-right:10px;font-weight:500;
color:#999985;-moz-osx-font-smoothing:grayscale;}

Это очень персонализированный и красиво оформленный блокнот для Blogger. На самом деле, дизайн использует шрифт для генерации знаков кавычек. Текст останется внутри двойной кавычки на гладком фоне.

CSS Blockquote Стиль: 10

blockquote {
color: #8ABA9C;text-align:left;border-left:5px solid #8ABA9C;
padding: 21px;line-height: 20px;
margin: 30px 40px;float: left;}

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

CSS Blockquote Стиль: 11

@import «https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»;
blockquote{ font-size: 16px; text-align:left; height: auto; margin: 0px; font-family: ‘Roboto Slab’, serif;
padding: 20px; font-style:italic; background: #F8F8F8; overflow: hidden;}
blockquote:before {content: «f10d»; color: #00bf8f; margin-right: 6px; font-family: fontawesome;}
blockquote:after {font-family: fontawesome; content: «f10e»; margin-left: 6px; color: #00bf8f;}

CSS Blockquote Стиль: 12

@import «https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»;
blockquote{background:#f7f7f7;padding:25px;border:1px solid #eee;text-align:justify;position:relative;
font-weight:500;clear:both;font-style:italic;}
blockquote:before{color:#6f6a6a;position:absolute;line-height:1;font-size:25px;z-index:0;
transition:.2s ease-in;font-family:FontAwesome;left:-18px;top:-21px;font-style:normal;padding:7px;content:»f10d»;border:1px solid #ddd}
blockquote:after{content:»f10e»;border:1px solid #ddd;position:absolute;font-size:25px;color:#6f6a6a;z-index:0;
font-family:FontAwesome;line-height:1;bottom:-21px;right:-18px;font-style:normal;transition:.2s ease-in;padding:7px;}

CSS Blockquote Стиль: 13

blockquote{margin:0 auto;position:relative;line-height:24px;padding:24px 20px 24px 45px;text-shadow:0 1px 1px white;
border:1px solid rgba(0,0,0,0.05);background-color:#F2F2F2;
background-image:
-webkit-radial-gradient(center,cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 90%),
-webkit-repeating-linear-gradient(top,transparent 0%,
transparent 24px,rgba(139,207,173,0.7) 24px,
rgba(139,207,173,0.7) 25px);}
blockquote:before{content:»;position:absolute;top:0;bottom:0;left:20px;border:4px solid rgba(139,207,173,0.7)}
blockquote:after{background:rgba(242,246,193,0.9);z-index:-1;left:0;right:0;transform:rotate(2deg);border:1px solid rgba(170,157,134,0.7);}

CSS Blockquote Стиль: 14

blockquote {
border-left:2px dashed #FACC2E;color:#FACC2E;font-size:14px;
line-height:18px;font-style:italic;
text-align:justify;margin:15px 30px;padding-left:20px;
font-family:Georgia,»Times New Roman»,Times,serif;}

CSS Blockquote Стиль: 15

blockquote{quotes:none;margin:1.5em 0;text-align:left;font-size:16px;}
blockquote a{color:#34495f;}
blockquote{display:block;border-left:6px solid rgba(2,2,2,0.4);border-radius:3px;position:relative;
color:#5c5544;background-color:#f2dca8;padding:20px 15px 20px 25px;margin:.75em 0;}

CSS Blockquote Стиль: 16

blockquote {
font-family: Georgia, serif;font-style: italic;background-color:#f5f5f5;
background: url(https://4.bp.blogspot.com/-apuX-9ARUao/WYTQg7l4jVI/AAAAAAAAAHg/soRgkjsn0XEm_EKv3Phqepp4k-w8ppIFACLcBGAs/s1600/quote-icon.png) 0 0 no-repeat;
padding-left:40px;padding-top:10px;margin:1em 0;}

CSS стиль цитаты: 17

@import «https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»;
blockquote { margin: 20px 0; color: #666; border: 1px solid #e1e1e1; padding: 20px; background: #f6f6f6; }
blockquote:before {text-align:left;margin-right: 3px; font-family: fontawesome; content: «f10d»; color: #FF5353; }
blockquote:after { content: «f10e»; font-family: fontawesome; margin-left: 5px; color: #FF5353; }

CSS Blockquote Стиль: 18

blockquote{text-align:left;position:relative;display:block;background-color:#FCE5AE;color:#555555;
border-radius:4px;padding:10px 15px;margin:.75em 0;}blockquote a{color:#34495e;}
blockquote:before{height:0;content:»»;width:0;position:absolute;left:15px;bottom:100%;
border:7px solid transparent;border-color:transparent transparent #FCE5AE}

CSS Blockquote Стиль: 19

blockquote {background: #fafafa;font-style: italic;margin: 1em 1em 1.5em 1em;
font-size: 16px;padding: 2.1em 1.5em;
border-radius: 5px;border-left: 15px solid #1ABC9C;box-shadow: 11px 10px 0px #eee;}

CSS Blockquote Стиль: 20

@import «https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»;
blockquote{position: relative;color: #888;line-height: 1.4;border-left: 0;padding: 60px 30px 45px;font-size: 16px!important;font-family: ‘Droid Serif’,serif;margin: 0;z-index: 1;}
blockquote:after, blockquote:before {color: #f3f3f3;line-height: 1;font-family: FontAwesome;position: absolute;font-size: 50px;transition: .2s ease-in;z-index: 0;}
blockquote:before {content: «f10d»;top: 0px;left: 0;}
blockquote:after {content: «f10e»;bottom: 0px;right: 0;}
blockquote:hover:after {color: #F5BB00;}blockquote:hover:before {color: #F5BB00;}

CSS Blockquote Стиль: 21

@import «https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»;
blockquote{margin-left:0;font-style:italic;font-weight:500;font-size:14px;padding:0px;
padding-left:60px;margin:40px 0px;position:relative;}
blockquote:before {content:»f10d»;font-family:FontAwesome;text-align:left;font-size:19px;
line-height:20px;position:absolute;color:#fff;background:#eee;padding:10px;
left:0;top:0;}blockquote:hover:before {color: blue;}

CSS Blockquote Стиль: 22

blockquote{padding:20px 30px;text-align:left;
background: #999 no-repeat right;
color: #fff;font-size: 16px;line-height: 1.4;
border: 0;border-radius: 10px;margin: 0 30px 10px;display: block;
box-shadow: 11px 10px 0px #555;}

CSS Blockquote Стиль: 23

blockquote {position: relative;
display: block;border-left: 5px solid #21610B;
padding: 1.5em 1.5em 1.5em 3.5em;border-right: 2px dashed #21610B;margin: 0 0 1.5em;}
blockquote::before {position: absolute;font-size: 62px;font-weight: bold;
content: «1C»;line-height: 1;top: 10px;left: 10px;}

CSS Blockquote Стиль: 24

blockquote{border-left:5px solid #E7C297;background:#FFD4A1;
text-align:left;
margin:20px 30px;padding:20px;}

CSS Blockquote Стиль: 25

@import «https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»;
blockquote{background:#FF6052;margin-left:2em;padding:1em 1em;margin-right:2em;color:#fff;
border:3px solid #c94033;font-size:100%;box-shadow:5px 5px 0 rgba(0,0,0,0.1);}
blockquote:before {font-family:FontAwesome;content:»f10d»;font-style:normal;padding-right:4px;
text-decoration:inherit;color:#fff;font-weight:normal;}

CSS Blockquote Стиль: 26

@import «https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»;
blockquote{margin:0 auto;background:#f9f9f9;padding:30px 40px;margin-top:1em;margin-bottom:30px;color:#888;position:relative;}
blockquote:after{position:absolute;font-family:»FontAwesome»;content:»f10e»;font-size:16px;right:30px;
bottom:20px;font-style:normal;color:#aaa;font-weight:normal}

CSS Blockquote Стиль: 27

@import «https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»;
blockquote{background: #fbfbfb; border-left:5px solid #22B7AD; margin-left:0; padding:10px 15px; font-size:14px; color:#555; font-family: georgia; line-height:22px; font-style: italic;}
blockquote:before, blockquote:after{font-family:FontAwesome;display:inline-block; font-style:normal; font-weight:500;
line-height:1;-moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; color:#777;}
blockquote:before{content:’f10d’; margin-right:7px;}blockquote:after{margin-left:10px;content:’f10e’;}

CSS Blockquote Стиль: 28

blockquote {font-family: Georgia, serif;border-left:5px solid #FF7F01;line-height: 1.45;margin: 0.25em 2em;font-size: 14px;
font-style: italic;padding: 1.25em 40px;position: relative;background:#4b8baf;color: #ffffff;}

CSS Blockquote Стиль: 29

blockquote {font-style: italic;color:#fafafa;text-align:left;background: #22B7AD;
background: -moz-linear-gradient(top, #22B7AD 0%, #0e0e0e 100%);background: -webkit-linear-gradient(top, #22B7AD 0%,#0e0e0e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22B7AD), color-stop(100%,#0e0e0e));
background: -o-linear-gradient(top, #22B7AD 0%,#0e0e0e 100%);border: 1px solid #ccc;border-radius: 6px;
background: linear-gradient(to bottom, #22B7AD 0%,#0e0e0e 100%);background: -ms-linear-gradient(top, #22B7AD 0%,#0e0e0e 100%);
box-shadow: 1px 1px 1px #ccc;padding:20px 30px;}

CSS Blockquote Стиль: 30

blockquote {position: относительный; цвет: # 333; граница: 5px solid # 0ABCB1; border-radius: 100px; отступ: 30px 60px; поле: 2em 60px 60px; выравнивание текста: по центру; шрифт: 16px Камбрия, Грузия, без шрифт; шрифт вес: 600;}
blockquote: before {display: block; рамка: 10px solid # 21B028; позиция: абсолютная; фон: нет повторения прокрутки 0 0 #FFFFFF; content: «»; высота: 50px; ширина: 50px; справа: 100px; снизу: -40px ; border-radius: 50px; z-индекс: 10;}
цитата: после {позиция: абсолютная; фон: нет повторная прокрутка 0 0 #FFFFFF; отображение: блок; содержимое: «»; высота: 25 пикселей; граница: 10 пикселей сплошная # 5A8F00; снизу: -60 пикселей; справа: 50 пикселей; ширина: 25 пикселей ; border-radius: 25px; z-индекс: 10;}
@media только экран и (максимальная ширина: 500 пикселей) {
blockquote {padding: 30px 20px; поле: 1em 30px 30px; размер шрифта: 12px;}}

Вот полный список некоторых стильных стилей блочных цитат CSS с кодом. Не стесняйтесь использовать любой из вышеперечисленных стилей в своем блоге Blogger (как и любую другую CMS). Несмотря на то, что здесь я описал процесс настройки блочных цитат и устранения неполадок, не стесняйтесь обращаться за дополнительной поддержкой. Кроме того, пожалуйста, поделитесь этим постом, используя кнопки поделиться, чтобы поддержать мою тяжелую работу ?.

Источник