вторник, 6 декабря 2016 г.

Оформление цитат при помощи CSS

06:41 By , No comments


css техники
Оформление цитат, выделенных в тексте веб-страницы – сложная дизайнерская техника, способная добавить вебсайту приятный элемент стиля. Многие журналы, электронные книги и прочие онлайн-публикации используют цитаты, чтобы выделить немного самого важного текста с тем, чтобы привлечь к нему взгляд читателя. Цитаты – чрезвычайно лакомые кусочки для взора читателя. Вот несколько способов, которыми дизайнер может оформить цитаты, выделенные в статье.
Вручную
Дизайнер может ручным способом сделать дополнительный div, что выглядит примерно так:
view sourceprint?
1.<div class="quote">
2.This is the quoted text, floated right with some padding.
3.</div>
со стилем, который выглядит так:
view sourceprint?
1..quote {
2.float:right;
3.padding-left:15px;
4.....
И множеством других стилей, которые могли понадобиться. Создание дополнительного div’а вручную – не самая выдающаяся идея, потому что занимает больше времени и добавляет избыточное содержимое.
Javascript
Вы могли бы также использовать javascript, чтобы оформить цитаты в тексте. Это устраняет избыточное содержимое и не требует жестко закодированного div’а, однако вам все еще понадобится включить немного javascript.
На Designmeme есть великолепный учебник о том, как оформлять цитаты, используя всего лишь немного CSS и CSS 2: перед псевдоэлементом, чтобы показать цитату.
view sourceprint?
1.<p class="pullquote" title="Only this, and nothing more.">Once upon a midnight dreary, while I pondered weak and weary, Over many a quaint and curious volume of forgotten lore, While I nodded, nearly napping, suddenly there came a tapping, As of some one gently rapping, rapping at my chamber door. ‘'Tis some visitor,’ I muttered, ‘tapping at my chamber door – Only this, and nothing more.’
2.</p>
Вот класс pullquote:
view sourceprint?
1..pullquote {
2.width:550px;
3.line-height:1.5;
4.font-size:1.2em;
5.text-align:justify;
6.}
Вместе с псевдоклассом :before:
view sourceprint?
01..pullquote:before {
02.content:"201C" attr(title) "201D";
03.font-family: "Times New Roman", Times, serif;
04.font-size:1.2em;
05.text-align:center;
06.background:#333;
07.color:#fff;
08.display:block;
09.float:left;
10.width:7em;
11.margin: 0.25em 1em 0.5em 0;
12.padding:1em;
13.}
Теперь каждый раз, когда у вас будет абзац с классом quote, любой текст, вставленный в атрибут title, появится в окне цитат (с изогнутыми кавычками).

0 коммент.:

Отправить комментарий