Оформлення цитат з допомогою CSS

Цитати на сьогоднішній день є невід’ємною частиною будь-якого мало-мальськи серйозного інтернет-проекту, так і односторінкові сайтики ні-ні та і вставлять що отаке у формі цитати.
Вставити, це ми всі мастаки, у багатьох виникає проблема з оформленням цитат. В першу чергу мета цитування — це привернути увагу відвідувача впечатав розумну думку, свою або чужу.
Хтось обходиться просто похилим текстом, хтось використовує готові шаблони. Поширений вид цитати – це похилий текст або фон у вигляді лапки. Тут вже все залежить від невгамовної фантазії людей«.
В WordPress цитати оформляються автоматом і зумовлені стилем Вашого шаблону. Або ж з допомогою відмінного плагіна : WP-Note. Якщо у вас тематичний блог і ви хочете підкреслити свою думку в статті, то таке виділення слів c допомогою цього плагіна безсумнівно приверне увагу читача, та й виглядає це красиво.
З WordPress все зрозуміло, нас цікавить як оформити посилання на HTML-сторінці, якщо немає можливості використання сторонніх продуктів. Якщо вам не хочеться возитися з картинками, то цілком можна обійтися оформленням з допомогою CSS: зробити рамочку або просто відокремити текст пунктирною кордоном.
Давайте нарешті розглянемо кілька прикладів, як оформити цитату з допомогою CSS коду.

Приклад 1:

CSS код:

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;
}

Такий варіант добре підійде не тільки для цитат, але і, наприклад, для виділення коду, посилань для скачування, і т. д…

Приклад 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';
}

Приклад 4:

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

CSS код:

blockquote {
border-left: 3px solid #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
}

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

Розкажіть, а як ви оформляєте цитати в блозі, або вам достатньо того, як вони були оформлені спочатку в шаблоні вашої теми?

З Повагою, Андрій .

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