Отсебятина Статьи Проекты
Облако тегов
Web CMS CSS htaccess HTML Javascript MySQL Php Безопасность Мониторы Новостная лента Оптимизация Ошибки Разработка сайта Часы Юзабилити оптимизация ошибки

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

Отсебятина от 09 января 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 то лет. Ведь у меня не то что бы не получилось… Получилось! Но как-то средненько. То есть я такой средненький. Ведь мне никто не мешал, не запрещал, то есть я не могу никому сказать: «Вон у меня из-за кого все не так!». И, знаете, какая главная проблема? Мне хватает мозгов все это понять, но не хватает, чтобы изменить.


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

стилизация blockquote с помощью CSS3


Если необходимо, чтобы указывался автор цитаты, то меняем HTML-код:
<blockquote>текст<div class="cite">автор</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+
Kostya  17.08.2013 в 17:26
Автор, спасибо это просто супер.
Аноним  20.04.2015 в 20:00
Новенького там ничего не появилось ? Ищу что то ординарное...
Оставить сообщение






Любое копирование должно сопровождаться ссылкой на сайт.
Если вам что-то не понравилось — сообщайте.
Кича Владимир
x
Мне не нравится этот сайт, удалить его