Оформление цитат css: Красивое оформление цитат на сайте с помощью CSS – Оформление цитат на CSS

Оформление цитат с помощью CSS

Цитаты на сегодняшний день являются неотъемлемой частью любого мало-мальски серьезного интернет проекта, да и одностраничные сайтики нет-нет да и вставят что нибудь этакое в форме цитаты.
Вставить, это мы все горазды, у многих же возникает проблема с оформлением цитат. В первую очередь цель цитирования — это привлечь внимание посетителя впечатав умную мысль, свою или чужую.
Кто-то обходится просто наклонным текстом, кто-то использует готовые шаблоны. Распространенный вид цитаты – это наклонный текст или фон в виде кавычки. Тут уж все зависит от неуемной фантазии «человеков».
В WordPress цитаты оформляются автоматом и обусловлены стилем Вашего шаблона. Или же с помощью отличного плагина : WP-Note. Если у вас тематический блог и вы хотите подчеркнуть свою мысль в статье, то такое выделение слов c помощью этого плагина несомненно привлечет внимание читателя, да и смотрится это красиво.
С WordPress все понятно, нас интересует как оформить цитату на HTML-странице если нет возможности использования сторонних продуктов. Если вам не хочется возиться с картинками, то вполне можно обойтись оформлением с помошью CSS: сделать рамочку или просто отделить текст пунктирной границей.

Давайте наконец рассмотрим несколько примеров, как оформить цитату с помощью CSS кода.

Пример 1:

Цвет текста необязательно делать ярче, потому как 2 границы – верхняя и нижняя шириной в 3 пикселя заметно выделят цитату.

CSS код:

blockquote {
border:solid #999;
border-width:3px 0;
margin:10px 40px;
padding:15px;
font-size:14px;
color:#999;
}

blockquote { border:solid #999; border-width:3px 0; margin:10px 40px; padding:15px; font-size:14px; color:#999; }

Изгаляясь над кодом стиля, можно экспериментировать с внешним видом до бесконечности.

Пример 2:

Блок сразу заметен в тексте благодаря яркой границе слева.

CSS код:

blockquote {
border: dotted #666 1px;
border-left:solid #ff5a00 5px;
margin:10px 40px;
padding:15px;
color:#333;
font-style:italic;
font-size:14px;
background:#fcfcfc;
}

blockquote { border: dotted #666 1px; border-left:solid #ff5a00 5px; margin:10px 40px; padding:15px; color:#333; font-style:italic; font-size:14px; background:#fcfcfc; }

Такой вариант хорошо подойдет не только для цитат, но и например, для выделения кода, ссылок для скачивания, и т.д...

Пример 3:

Рискованный вариант. Прекрасно подойдет для случаев, когда цитата должна обязательно привлечь внимание читателя, призывая его что-то делать, или наборот не делать.

“… Здесь мерилом работы считают усталость…”

CSS код:

blockquote {
border: 3px 0 solid #000;
margin: 10px 40px;
}
blockquote p{
border: 10px 0 solid #eee;
margin: 0;
padding: 15px;
color: #333333;
font:16px 'Arial Black';
}

blockquote { border: 3px 0 solid #000; margin: 10px 40px; } blockquote p{ border: 10px 0 solid #eee; margin: 0; padding: 15px; color: #333333; font:16px 'Arial Black'; }

Пример 4:

Довольно строгий, аскетичный вариант оформления. Подойдет для сайтов, где текст является основной частью дизайна, нежели красивые рисунки.

Раскаяться никогда не поздно, а согрешить можно и опоздать.

CSS код:

blockquote {
border-left: solid 3px #333;
padding-left:1px;
margin: 10px 40px;
}
blockquote p{
border-left: solid #666 1px;
margin:0;
padding:15px;
color:#333;
font:16px 'Times New Roman';
}

blockquote { border-left: solid 3px #333; padding-left:1px; margin: 10px 40px; } blockquote p{ border-left: solid #666 1px; margin:0; padding:15px; color:#333; font:16px 'Times New Roman'; }

Пример 5:

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

” Бог у всех один – провайдеры разные.“

CSS код:

blockquote {
margin:10px 40px;
padding:15px;
font: italic 14px Georgia;
border: solid 1px #eee
}

blockquote { margin:10px 40px; padding:15px; font: italic 14px Georgia; border: solid 1px #eee }

Посмотрели примеры, теперь делайте выбор и вперед. Код CSS соответственно добавьте в свой файл стилей .cssПри написании какой-нибудь нетленной мысли, просто обнесите ее тегами blockquote и довольные собой любуйтесь результатом.

Расскажите, а как вы оформляете цитаты в блоге, или вам достаточно того, как они были оформлены изначально в шаблоне вашей темы?

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Как красиво оформить цитаты на CSS — Технический блог

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

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

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

Пример блока цитат blockuote

Как настроить 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 и иконочных шрифтов это оформление будет еще краше.

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

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

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

ОБРАЗЦЫ ЦИТАТ С ПРИМЕРАМИ CSS КОДА ДЛЯ КРАСИВОГО ОФОРМЛЕНИЯ СТАТЕЙ ~ Страницы Интернета

18 Образцов — примеров, как красиво оформить цитату с помощью CSS кода. Оформление цитируемых блоков является неотъемлемой частью любого мало-мальски серьёзного сайта или блога. Цитаты в умеренных количествах украшают текст и создают впечатление основательности. 

CSS Код добавляется в файл стилей .css Текст который нужно выделить, привлечь внимание, заключается в теги < blockquote > < /blockquote > или к параграфу добавляется стиль < p > < /p >.

Образцы CSS кода брались из разных источников и публикуются как есть. Если вас интересует чистота кода, рекомендуем изучить css и сделать правки.

Разные способы оформления цитат:

CSS Код можно получить нажав на ссылку под образцом цитаты блока

  • Посмотреть CSS Код блока:
  • Посмотреть CSS Код цитаты:
  • Посмотреть CSS Код блока:
  • Посмотреть CSS Код цитаты:

    .blockquote {
    background: #f7f7f7;
    border-left:5px solid #FF7F00;
    font-style: italic;
    margin: 1.5em 10px;
    padding: 0.5em 10px;
    }
    .blockquote:before {
    color: #bbb;
    content: "\201C"; /* Непечатаемый символ слева */
    font-size: 3em;
    line-height: 0.1em;
    margin-right: 0.2em;
    vertical-align: -.4em;
    }
    .blockquote:after {
    color: #bbb;
    content: "\201D"; /* Непечатаемый символ справа */

    font-size: 3em;
    line-height: 0.1em;
    vertical-align: -.45em;
    }
    .blockquote > p:first-child {
    display: inline;
    }

  • Посмотреть CSS Код:

Css блок для выделения большого текста. При наведении курсора боковая полоса-бордюр меняется. Demo: http://mmktricks.blogspot.ru/2013/01/stylish-blockquote-for-blogger-with.html

  • Посмотреть CSS Код:
  • Посмотреть CSS Код:
  • Посмотреть CSS Код:
  • Посмотреть CSS Код:
  • Посмотреть CSS Код:
  • Посмотреть CSS Код:
  • Получить CSS Код:
  • Получить CSS Код:
  • Получить CSS Код:
  • CSS Код блока:
Оформление ссылок для скачивания с файлообменников
  • CSS Код ссылок:
  • CSS Код ссылок:
  • CSS Код ссылок:

Вот пожалуй и всё! По аналогии делаются врезки в статье, примечания, заметки и т.д. Всё зависит от вашей фантазии и знаний CSS.

http://editlw.ru/articles.php?article_id=288

Источник: EditLw.Ru

Тег цитаты html. Красивое оформление цитаты css

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

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

Для обоих элементов может быть указан атрибут CITE , значением которого является URL-aдpec цитируемоrо фраrмента.

Пример: длинные и короткие цитаты

  • Попробуй сам »

можно легко определить с помощью вертикального отвеса.

Как сказал А. А. Милн, некоторые люди говорят с животными.

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

Как сказал А. А. Милн, некоторые люди говорят с животными.

Тег

Аббревиатура — принятое на письме сокращение слов или слово, составленное из нескольких частей друrих слов (ВУЗ, НИИ, исполком и др.). При употреблении в тексте какого-либо акронима или аббревиатуры следует воспользоваться тегом . С помощью атрибута «title» можно задать всплывающую подсказку с расшифровкой аббревиатуры. При этом поисковые роботы индексируют именно полный вариант расшифровки, определенный в атрибуте «title». Чтобы отличать аббревиатуры от обычноro текста, они подчеркиваются пунктирной линией.

Пример: Аббревиатура

  • Попробуй сам »

NАSА проводит несколько невероятных космических экспериментов.

Пp. Стивен Хокинг — физик-теоретик и космолог.

NАSА проводит несколько невероятных
космических экспериментов.

Пp. Стивен Хокинг — физик-теоретик и космолог.

Тег

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

Пример: Адрес

  • Попробуй сам »
HTML- Учебный курс
Белый Максим Максимович
Северо-Западный институт технологий
Теплогорского государственного университета технологии и дизайна
[email protected]

Теги и

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

Тег используется для обозначения определения какого-либо нового термина. Объяснение нового термина (научного концепта или узкопрофильного названия) в тексте называется «определением». Элемент можно использовать, если новый термин встречается в тексте впервые и тут же дается его определение. Браузер отображает такой текст курсивом.

Пример: Источники и определения

  • Попробуй сам »


на просмотр фильма Красный дракон Стивена Хопкинса.

Импульс тела — векторная величина, направление её вектора совпадает
с направлением скорости

Только за первый месяц было продано более десяти тысяч билетов
на просмотр фильма Красный дракон Стивена Хопкинса.

Импульс тела — векторная величина, направление её вектора совпадает
с направлением скорости

Тег

Тег управляет направлением отображаемого текста. Имеет обязательный атрибут dir, который принимает значения ltr (слева направо) и rtl (справа налево).

Пример: Направление текста

  • Попробуй сам »

Оформляем цитаты, стильно и современно!

 

Сегодня мы собираемся создать некоторые привлекательные стили для оформления блоков с цитатами. Используя текстуры, круги, и псевдо-элементы, можно значительно оживить блоки с цитатами или советами.

Пожалуйста, обратите внимание: результат этого урока будет работать, как задумано, только в браузерах, которые поддерживают соответствующие свойства CSS.

Мы будем опускать префиксы браузеров в примерах кода в статье. Но вы, конечно, можете найти их в исходных файлах.

HTML-разметка

Разметка для цитат будет следующей:

<div>
    <div></div>
    <blockquote cite="http://www.gutenberg.org/ebooks/1257">
        <p>Never fear quarrels, but seek hazardous adventures.</p>
    </blockquote>
    <div>
        <p>Alexandre Dumas</p>
        <cite><a href="http://www.gutenberg.org/ebooks/1257">The Three Musketeers</a></cite>
    </div>
</div>

Div с классом mb-thumb будет присутствовать не во всех примерах. В примере 3 мы его добавим как дочерний по отношению к div-у с классом mb-attribution.

CSS

Давайте сначала определим некоторые общие стили:

@font-face {
    font-family: 'icons';
    src: url("font/icons.eot");
    src:
        url("font/icons.eot?#iefix") format('embedded-opentype'),
        url("font/icons.woff") format('woff'),
        url("font/icons.ttf") format('truetype'),
        url("font/icons.svg#icons") format('svg');
    font-weight: normal;
    font-style: normal;
}
 
/* Let's set and reset some common styles */
.mb-wrap {
    width: 300px;
    margin: 20px auto;
    padding: 20px;
    position: relative;
}
 
.mb-wrap p{
    margin: 0;
    padding: 0;
}
 
.mb-wrap blockquote {
    margin: 0;
    padding: 0;
    position: relative;
}
 
.mb-wrap cite {
    font-style: normal;
}

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

Пример 1

Первый пример будет иметь кожанный фон и круглый эскиз для украшения.
Итак, в первую очередь определим стили для всей оболочки. Мы зададим ей текстурный фон и переопределим ширину:

.mb-style-1 {
    background: #363738 url(../images/dark_leather.jpg) repeat top left;  
    margin-top: 100px;
    padding-top: 100px;
    width: 400px;
    color: #fff;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    border-top: 10px solid #fff;
}

Круглый эскиз будет приподнят при помощи отрицательного значения для top. Полупрозрачные границы добавят некоторый особый стиль:

.mb-style-1 .mb-thumb {
    display: block;
    width: 180px;
    height: 180px;
    border: 10px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    background: url(../images/Dartagnan-musketeers.jpg) no-repeat center center;
    position: absolute;
    left: 50%;
    top: -90px;
    margin: 0 0 0 -90px;
    box-shadow:
        inset 1px 1px 4px rgba(0,0,0,0.5),
        0 2px 3px rgba(0,0,0,0.6);
}

Для добавления кавычек мы будем использовать шрифт с иконками, который мы подключили раньше, и псевдо-классы :before и :after. 

.mb-style-1 blockquote:before,
.mb-style-1 blockquote:after {
    font-family: 'icons';
    position: absolute;
    font-size: 70px;
    top: -95px;
    color: #242526;
    text-shadow: 0 1px 1px rgba(255,255,255,0.1);
}
 
.mb-style-1 blockquote:before{
    content: '\275d';
}
 
.mb-style-1 blockquote:after{
    right: 0px;
    content: '\e800';
}

Стили для текстовых элементов будут выглядеть следующим образом:

.mb-style-1 blockquote p {
    font-family: Cambria, Georgia, serif;
    font-style: italic;
    font-size: 25px;
    border-bottom: 1px solid rgba(0,0,0,0.5);
    box-shadow: 0 1px 0 rgba(255,255,255,0.1);
    padding: 10px 10px 20px 10px;
    text-align: center;
    margin: 0 0 20px 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
 
.mb-style-1 .mb-attribution {
    text-align: right;
}
 
.mb-style-1 .mb-author{
    text-transform: uppercase;
    font-size: 20px;
    font-weight: bold;
    color: #1b1c1d;
    text-shadow: 0 1px 1px rgba(255,255,255,0.1);
}
 
.mb-style-1 cite a{
    color: #f0f0f0;
    font-style: italic;
    font-family: Cambria, Georgia, serif;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.7)
}
 
.mb-style-1 cite a:hover{
    text-shadow: 2px 2px 3px rgba(0,0,0,0.9)
}

И это был первый пример! Давайте перейдем к следующему.

Пример 2

Пример 2 будет иметь модный асимметричный стиль с закругленным элементом с левого бока. Сверху мы хотим разместить круг с кавычками. Итак, давайте сначала добавим отступ к цитате, чтобы сдвинуть её вниз:

.mb-style-2 blockquote{
    padding-top: 150px;
}

Круг имеет следующие стили:

.mb-style-2 blockquote:after {
    font-family: 'icons';
    background: rgba(235,150,108,0.8);
    width: 130px;
    height: 130px;
    border-radius: 50%;
    content: '\275e';
    position: absolute;
    font-size: 70px;
    line-height: 130px;
    text-align: center;
    top: 0px;
    left: 50%;
    margin-left: -65px;
    color: rgba(255,255,255,0.5);
    text-shadow: 0 1px 1px rgba(255,255,255,0.1);
}

Мы отцентрировали круг по горизонтали, установив left равный 50% и отрицательный левый отступ, равный половине его ширины.

Теперь давайте добавим закругленный элемент с помощью другого псевдо-элемента. Мы установим его ширину и высоту равную 500px, border-radius - 50%, и только левую границу. Это создаст нужную форму:

 .mb-style-2 blockquote:before{
    content: '';
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border-left: 5px solid rgba(235,150,108,0.1);
    position: absolute;
    top: 0px;
    left: -50px;
    z-index: -1;
}

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

 

.mb-style-2 blockquote p {
    font-family: Baskerville, Georgia, serif;
    font-size: 28px;
    font-style: italic;
    background: rgba(255,255,255,0.5);
    display: inline;
    color: rgba(235,150,108,0.8);
    text-shadow: 0 1px 1px rgba(255,255,255,0.5);
    line-height: 46px;
    box-shadow: 0 -6px 0 rgba(235,150,108,0.2);
}

 И, наконец, давайте определим стили для остальных текстовых элементов:

.mb-style-2 .mb-attribution {
    text-align: right;
}
 
.mb-style-2 .mb-author{
    text-transform: uppercase;
    font-size: 18px;
    padding-top: 10px;
    font-weight: bold;
    color: #d48158;
    text-shadow: 0 1px 1px rgba(255,255,255,0.1);
}
 
.mb-style-2 cite a{
    color: #d7aa94;
    font-style: italic;
}
 
.mb-style-2 cite a:hover{
    color: #d48158;
}

Пример 3

В третьем примере, мы хотим увеличить область с текстом и установить тень для цитаты:

.mb-style-3 {
    width: 500px;
}
 
.mb-style-3 blockquote{
    background: #fff;
    padding: 30px;
    border-radius: 5px;
    box-shadow:
        inset 0 2px 0 rgba(188, 147, 200, 0.7),
        -5px -4px 25px rgba(0, 0, 0, 0.3);
}

Мы добавим маленькую стрелку, указывающую вниз, используя технику, предлагаемую в CSS Arrow Please!

.mb-style-3 blockquote:after,
.mb-style-3 blockquote:before  {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
 
.mb-style-3 blockquote:after  {
    border-top-color: #ffffff;
    border-width: 10px;
    left: 65%;
    margin-left: -10px;
}
 
.mb-style-3 blockquote:before {
    border-top-color: rgba(0,0,0,0.01);
    border-width: 11px;
    left: 65%;
    margin-left: -11px;
}

Параграфы будут иметь следующие стили:

.mb-style-3 blockquote p {
    font-family: 'Alegreya', serif;
    font-size: 24px;
    color: #b4b4b4;
    font-weight: 400;
    line-height: 40px;
    font-style: italic;
    text-indent: 100px;
    position: relative;
}

Теперь мы будем добавлять кавычки cлева с помощью псевдо-элемента :before:

.mb-style-3 blockquote p:before{
    content: '\201C';
    font-family: serif;
    font-style: normal;
    font-weight: 700;
    position: absolute;
    font-size: 175px;
    top: 0px;
    left: -105px;
    color: rgba(188, 147, 200, 1);
    text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1);
}

Часть со ссылкой и автором будет иметь большой отступ справа, потому что мы добавим туда эскиз:

.mb-style-3 .mb-attribution {
    text-align: right;
    padding: 20px 100px 20px 20px;
    position: relative;
}

Блок с эскизом будет в виде маленького кружка с изображением автора в качестве фона:

.mb-style-3 .mb-thumb {
    display: block;
    width: 70px;
    height: 70px;
    border: 5px solid #fff;
    border-radius: 50%;
    background: url(../images/bronte.jpg) no-repeat center center;
    position: absolute;
    right: 10px;
    bottom: 5px;
    box-shadow:
        inset 1px 1px 4px rgba(0,0,0,0.5),
        0 2px 3px rgba(0,0,0,0.6);
}

Добавим остальные стили для текста:

.mb-style-3 .mb-author{
    font-family: 'Alegreya SC', serif;
    font-weight: 700;
    font-size: 18px;
    color: rgba(188, 147, 200, 1);
    text-shadow: 0 1px 1px rgba(255,255,255,0.7);
}
 
.mb-style-3 cite a{
    font-family: 'Alegreya', serif;
    font-weight: 700;
    font-style: italic;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
 
.mb-style-3 cite a:hover{
    color: rgba(188, 147, 200, 1);
    text-shadow: 0 1px 1px rgba(255,255,255,0.7);
}

Пример 4

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

.mb-style-4 {
    width: 600px;
    padding: 20px 240px 50px 20px;
    background: #444 url(../images/dickens.jpg) no-repeat 140% 25%;
    overflow: hidden;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.6);
}

Параграф будут иметь RGBA значение для цвета. Это позволит нам определить значение для полупрозрачности:

.mb-style-4 blockquote p {
    color: rgba(255,255,255,0.95);
    font-size: 21px;
    line-height: 26px;
    text-align: right;
    color: #999;
    text-transform: uppercase;
    font-weight: bold;
}

Тег span будет иметь особый стиль. Мы повернем его немного и установим ему большой размер текста и цвет:

.mb-style-4 blockquote p span {
    font-weight: 700;
    color: #fcf779;
    font-size: 58px;
    line-height: 58px;
    display: block;
    padding: 10px;
    text-shadow: 7px 7px 2px rgba(0,0,0,0.2);
    transform: rotate(-7deg) translateY(10px);
}

Добавим кавычки из нашего шрифта с помощью псевдо-класса :before:

.mb-style-4 blockquote p span:before {
    font-family: 'icons';
    content: '\275d';
    font-weight: normal;
    opacity: 0.1;
    font-size: 136px;
    position: absolute;
    color: #fff;
    top: -50px;
    left: -25px;
    transform: rotate(45deg);
}

Зададим им небольшую полупрозрачность, и повернем на 45 градусов.

Блок с подписью будет повернут таким образом, что мы можем видеть только треугольник в правом углу:

.mb-style-4 .mb-attribution {
    text-align: right;
    text-transform: uppercase;
    font-weight: bold;
    background: #222;
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 0px;
    text-align: center;
    padding: 30px;
    transform: rotate(-40deg) translate(175px, 110px);
}

Давайте добавим тире перед автором цитаты:

.mb-style-4 .mb-author:before {
    content: '\2014';
    padding-right: 4px;
}
 
.mb-style-4 .mb-attribution cite a{
    color: #777;
}
 
.mb-style-4 .mb-attribution cite a:hover{
    color: #fcf779;
}

Пример 5

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

.mb-style-5 {
    width: 390px;
}
 
.mb-style-5 blockquote {
    text-align: center;
    background: #333;
    width: 350px;
    height: 350px;
    padding: 60px;
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 10px #333,
        inset 0 0 0 12px rgba(255,255,255,0.6),
        80px 0 0 rgba(255,255,255,0.3),
        -80px 0 0 rgba(255,255,255,0.3),
        50px 0 0 rgba(60,185,145,0.2),
        -50px 0 0 rgba(185,60,60,0.2);
}

Зададим стили для абзаца:

.mb-style-5 blockquote p {
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    padding-top: 25px;
    text-transform: uppercase;
    text-shadow: 0 0 1px #fff, 0 1px 1px #000;
    font-family: 'Annie Use Your Telescope', cursive;
}

Для того, чтобы разделить цитату, мы поставим последнюю её часть в span и зададим отступы:

.mb-style-5 blockquote p span {
    display: block;
    position: relative;
    padding-top: 40px;
    margin-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.3);
}

Давайте добавим маленький круг с кавычками:

.mb-style-5 blockquote p span:before {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #ddd;
    content: "\275d";
    font-size: 40px;
    color: #333;
    top: 0px;
    left: 50%;
    margin: -25px 0 0 -25px;
    border-radius: 50%;
}

И, наконец, некоторые стили для других текстовых элементов:

.mb-style-5 .mb-attribution {
    text-align: center;
    font-family: 'Annie Use Your Telescope', cursive;
    padding: 20px;
    font-size: 16px;
}
.mb-style-5 cite a:hover{
    color: #000;
}

Пример 6

Последний пример будет выглядеть как Polaroid, при этом мы не будем использовать изображения. Давайте вначале зададим стили для оболочки:

.mb-style-6 {
    width: 350px;
    height: 400px;
    background: #fff;
    border-radius: 4px;
}

Добавим некоторые симпатичные тени, используя технику Nicolas Gallagher:

/* Shadow style from Nicolas Gallagher: http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ */
.mb-style-6:before,
.mb-style-6:after {
    content: "";
    position: absolute;
    z-index: -2;
    transform: rotate(-3deg);
    bottom: 15px;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
    height: 20%;
    left: 10px;
    max-height: 100px;
    max-width: 300px;
    width: 50%;
}
.mb-style-6:after {
    transform: rotate(3deg);
    left: auto;
    right: 10px;
}

Цитата будет на темном фоне:

.mb-style-6 blockquote{
    background: #333;
    height: 75%;
    padding: 30px;
    text-align: center;
}

И мы добавим кавычки с правой стороны:

.mb-style-6 blockquote:before{
    color: rgba(255,255,255,0.2);
    position: absolute;
    content: '\0022';
    font-size: 150px;
    line-height: 130px;
    font-style: italic;
    top: 0px;
    right: 20px;
    font-family: Cambria, Georgia, serif;
}

Параграф будет иметь следующий стиль:

.mb-style-6 blockquote p {
    color: #fff;
    font-family: 'Abril Fatface', sans-serif;
    font-size: 24px;
    text-shadow: 1px 1px 1px #000;
}

Давайте добавим некоторый отступ к подписи:

.mb-style-6 .mb-attribution {
    padding: 20px;
}

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

.mb-style-6 .mb-author {
    font-size: 24px;
    font-family: 'Dr Sugiyama', cursive;
    -moz-transform: rotate(-4deg);
    color: #070d5f;
}

И последнее, но не менее важное, ссылку на цитату:

.mb-style-6 cite a{
    color: #999;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 12px;
}
.mb-style-6 cite a:hover{
    color: #000;
}

 Надеюсь, вам понравилось и эти примеры будут полезными для вас!

Демонстрация

Скачать исходные файлы

Перевод статьи с tympanus.net/codrops


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

отсебятина — Оформление цитат — стилизация blockquote с помощью CSS3

Отсебятина от 08 января 2012 года.    Теги: HTML CSS

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

HTML:

<blockquote>текст</blockquote>


CSS:

blockquote { display: block; padding: 0 45px; /* Делаем отступы для кавычек */ border: 10px solid #EFEFEF; /* Делаем рамку */ border-width: 0 10px 0 10px; /* по бокам */ margin: 10px 0; color: #505050; } blockquote:before { content: "“"; /* Левая кавычка */ font: 6em/66px Times, serif; /* Указываем размер и высоту строки (уменьшенная, чтобы кавычка была приподнята) */ color: #CFCFCF; float: left; /* Для обтекания текстом */ margin-left: -45px; /* Углубляем кавычку в отступ блока */ padding: 0 2px; } blockquote:after { content: "”"; /* Правая кавычка */ font: 6em/36px Times, serif; /* Указываем размер и высоту строки (еще более уменьшенная, чтобы кавычка была сильнее приподнята) */ color: #CFCFCF; float: right; /* Для обтекания текстом */ margin-right: -45px; /* Углубляем кавычку в отступ блока */ }

Как это выглядит в вашем браузере (чтобы выделить цитату, она помещена в белый бокс):

То есть как-то не получилось вот так вот «раз!» — и на другую ступеньку вскочить. И это за 20 то лет. Ведь у меня не то что бы не получилось… Получилось! Но как-то средненько. То есть я такой средненький. Ведь мне никто не мешал, не запрещал, то есть я не могу никому сказать: «Вон у меня из-за кого все не так!». И, знаете, какая главная проблема? Мне хватает мозгов все это понять, но не хватает, чтобы изменить.

Как это должно выглядеть:

Если необходимо, чтобы указывался автор цитаты, то меняем HTML-код:

<blockquote>текст<div>автор</div></blockquote>

Добавляем описание класса в CSS и изменяем одно из правил (в blockquote:after меняем line-height на 6 px):

blockquote .cite:before { content: "— "; } blockquote .cite { font-size: 16px; padding-right: 30px; text-align: right; } blockquote:after { content: "”"; /* Правая кавычка */ font: 6em/6px Times, serif; /* Указываем размер и высоту строки (еще более уменьшенная, чтобы кавычка была сильнее приподнята) */ color: #CFCFCF; float: right; /* Для обтекания текстом */ margin-right: -45px; /* Углубляем кавычку в отступ блока */ }


То есть как-то не получилось вот так вот «раз!» — и на другую ступеньку вскочить. И это за 20 то лет. Ведь у меня не то что бы не получилось… Получилось! Но как-то средненько. То есть я такой средненький. Ведь мне никто не мешал, не запрещал, то есть я не могу никому сказать: «Вон у меня из-за кого все не так!». И, знаете, какая главная проблема? Мне хватает мозгов все это понять, но не хватает, чтобы изменить.

Камиль, «О чём еще говорят мужчины»

Кроссбраузерность (проверял, на том, что есть):

  • Mozilla Firefox 9
  • Opera 11.60
  • IE 8+


Автор, спасибо это просто супер.


Новенького там ничего не появилось ? Ищу что то ординарное...

Оформление цитат

Всем привет и добро пожаловать на SerBlog.ru. Не так часто, но иногда приходится пользоваться тегами (blockquote) цитат на странице. Обычно это происходит в комментариях, когда нужно процитировать ранее опубликованный комментарий, чтобы было понятно кому вы ответили. Или же просто выделить в статье какую-то часть текста, чтобы сделать акцент и привлечь внимание читателя к чему-то очень важному, по вашему мнению. Обычно в таблицах стилей сайтов уже прописано какое-то оформление для этого тега, но в большинстве случаев это оформление ограничивается лишь наклоном текста. Поэтому мы попробуем изменить эту ситуацию и настроить оформление так, как нам нужно. Выглядеть эту будет вот так:

Знать много и не выставлять себя знающим есть нравственная красота. Знать мало и выставлять себя знающим есть болезнь. Только понимая эту болезнь, мы можем избавиться от нее.
Лао Цзы.

Для того, чтобы изменить оформление, нужно открыть таблицу стилей, обычно это style.css и найти там blockquote. Добавить или вставить вместо тех, которые есть примерно такие строчки:

1
2
3
4
5
6
7
8
9
blockquote{
 background: none repeat scroll 0 0 #FFFFCC;
 border: 1px solid #DDDDDD;
 border-radius: 5px 5px 5px 5px;
 color: gray;
 font: italic 14px arial;
 padding: 5px 10px !important;
}
blockquote:before, blockquote:after{content:"---";}

blockquote{ background: none repeat scroll 0 0 #FFFFCC; border: 1px solid #DDDDDD; border-radius: 5px 5px 5px 5px; color: gray; font: italic 14px arial; padding: 5px 10px !important; } blockquote:before, blockquote:after{content:"---";}

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *