Цитати на сьогоднішній день є невід’ємною частиною будь-якого мало-мальськи серйозного інтернет-проекту, так і односторінкові сайтики ні-ні та і вставлять що отаке у формі цитати.
Вставити, це ми всі мастаки, у багатьох виникає проблема з оформленням цитат. В першу чергу мета цитування — це привернути увагу відвідувача впечатав розумну думку, свою або чужу.
Хтось обходиться просто похилим текстом, хтось використовує готові шаблони. Поширений вид цитати – це похилий текст або фон у вигляді лапки. Тут вже все залежить від невгамовної фантазії людей«.
В 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; } |
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: 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'; } |
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 } |
blockquote {
margin:10px 40px;
padding:15px;
font: italic 14px Georgia;
border: solid 1px #eee
}
Подивилися приклади, тепер робіть вибір і вперед. Код CSS відповідно додайте в свій файл стилів .cssПри написанні який-небудь нетлінної думки, просто обнесите її тегами blockquote і задоволені собою милуйтеся результатом.
Розкажіть, а як ви оформляєте цитати в блозі, або вам достатньо того, як вони були оформлені спочатку в шаблоні вашої теми?
З Повагою, Андрій .
Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: