Цитата придает материалу индивидуальность, делает его уникальным, что является основной задачей при оптимизации сайта. Но как выделить такие изречения в тексте, чтобы они были пестрыми и украшали страницу визуально? Самым простым вариантов решения является выделение – сделать текст жирным или курсивом, а можно пойти совсем иной тропой – CSS
Системы управления сайтом (CMS), как правило, цитаты помещают в блоки с классом blockquote которые, по умолчанию, выводят цитируемые строки в кавычках и они мало выделяется на фоне общего текста.
Попробуем исправить, выделим цитату горизонтальными линиями
blockquote
{
border
:
solid
#999
;
border-width
:
3
px
0
;
margin
:
10
px
40
px
;
padding
:
15
px
;
font-size
:
14
px
;
color
:
#999
;
}
или установим вертикальную черту слева
blockquote
{
border
:
dotted
#666
1
px
;
border-left
:
solid
#ff5a00
5
px
;
margin
:
10
px
40
px
;
padding
:
15
px
;
color
:
#333
;
font-style
:
italic
;
font-size
:
14
px
;
background
:
#fcfcfc
;
}
Так уже намного лучше, цитаты имеют более четкий вид и сразу бросаются в глаза посетителю. Но какие еще есть способы оформления цитат?
Способы оформления цитат
Начать обзор способов оформления начнем с варианта с рамкой, поскольку все последующие примеры будут опираться на рамку.
Тень и закругленные края
Тень блоку задается с помощью box-shadow , а вот за закругленность углов отвечает значение параметра border-radius и чем он больше, тем сильнее округлены углы
blockquote
{
background-color
:
#D4F4EA
;
border
:
1
px solid
#00B37C
;
border-radius
:
6
px
;
box-shadow
:
1
px
2
px
2
px
2
px
rgba(
0
,
0
,
0
,
0.4
)
;
font-family
:
Georgia,serif
;
font-size
:
16
px
;
font-style
:
italic
;
margin
:
20
px
;
padding
:
20
px
15
px
;
width
:
550
px
;
}
Легкий оттиск
Оттиск – это эффект незначительной вдавленности внешнего блока в фон родителя. Данный вариант более четко будет заметен если использовать темные цвета для фона и достигается корректировкой параметра box-shadow
blockquote
{
background
:
none repeat scroll
0
0
#222222
;
border-radius
:
10
px
;
box-shadow
:
0
2
px
3
px
#555555
;
color
:
#555555
;
text-shadow
:
0
2
px
3
px
#171717
;
}
Объем
Приведенный ниже способ выделения родился как-то сам по себе, отдельной задачи не было, но экспериментируя со стилями плагина WP-Note (подробнее о котором, чуть позже) родилось вот такое оформление
blockquote
{
background-color
:
#EEF
;
color
:
#4D4B4B
;
border
:
1
px solid
#999999
;
border-radius
:
10
px
10
px
;
-moz-border-radius
:
10
px
10
px
;
-webkit-border-radius
:
10
px
10
px
;
box-shadow
:
2
px
2
px
3
px
#999
;
-webkit-box-shadow
:
2
px
2
px
3
px
#999
;
-moz-box-shadow
:
2
px
2
px
3
px
#999
;
}
WP-Note
Как и обещал, плагин
WP-Note (CMS WordPress)
позволяет по специальным тегам выводить цитаты различного типа (помощь, внимание и тд). Не стану приводить скриншоты сообщений, скажу только, что они имеют оформление, нечто похожее на пример – объем, каждому тегу отвечает свой индивидуальный фон.
Остановимся подробнее на настройках плагина.
Скачать плагин WP-Note можно с
домашней страницы
.
Распаковываем архив и копируем файлы в папку
/wp-content/plugins/wp-note/
В админпанели WordPress-а, во вкладке плагины, активируем только что установленный WP-Note.
Наиболее часто используемые специальные теги:
-цитата —
[note] Текст [/note]
;
-внимание –
[warning] Текст [/warning]
;
-важно —
[important] Текст [/important]
;
-помощь —
[help] Текст [/help]
.
Если есть желание изменить отображение сообщений необходимо внести свои корректировки в стили – файл
style.css
в папке плагина