Вы здесь

Web-разработка Как красиво стилизовать цитаты с кавычками с помощью CSS

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

Валидное оформление цитат с помощью css

А теперь пример кода css, как это сделать:

  1. blockquote {
  2. background: #f7f7f7;
  3. border-left: 1px solid #bbb;
  4. font-style: italic;
  5. margin: 1.5em 10px;
  6. padding: 0.5em 10px;
  7. }
  8.  
  9. blockquote :before {
  10. color: #bbb;
  11. content: "\201C"; /* Непечатаемый символ слева */
  12. font-size: 3em;
  13. line-height: 0.1em;
  14. margin-right: 0.2em;
  15. vertical-align: -.4em;
  16. }
  17.  
  18. blockquote:after {
  19. color: #bbb;
  20. content: "\201D"; /* Непечатаемый символ справа */
  21. font-size: 3em;
  22. line-height: 0.1em;
  23. vertical-align: -.45em;
  24. }
  25.  
  26. blockquote > p:first-child {
  27. display: inline;
  28. }

Для декорации использую т.н. немецкие кавычки вида "лапки". Шрифты: Georgia, "Times New Roman", Times, serif. Междустрочный интервал: 1.5.

Как видите ничего сверх-сложного, и ненужно никакой графики, - только обычный валидный CSS2.1-код.

Похожие материалы

Комментарии

I have exactly what info I want. Check, plseae. Wait, it's free? Awesome!

Оригинальная идея. Только вот интересно сколько время на это потрачено?

Спасибо. Применил

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

CAPTCHA
Этот вопрос задается для того, чтобы выяснить, являетесь ли Вы человеком или представляете из себя автоматическую спам-рассылку.
CAPTCHA на основе изображений
Введите код с картинки