Вы здесь: Главная > CSS > Извлечённая цитата

Извлечённая цитата

Опубликовано автором Просмотры: 9

Традиционным методом печати является извлечённая цитата ─ фрагмент контента, который выделяется из окружения и привлекает внимание читателя при просмотре страниц.

Типичная базовая извлекаемая цитата

Шаг 1: HTML-код

Для основы извлечения кавычек мы можем начать с некоторого HTML, подобного следующему:

<p>If ever there was ...[Big load of text]... humble pea is it.</p>

<p>Mother Nature has never created ...[Big load of text]... something so flawless.</p>

<aside class="pquote">
    <blockquote>
        <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    </blockquote>
</aside>

<p>The green seed ...[Big load of text]... favorite for good reason.</p>

<!-- ...and so on... -->

Элемент new-to-HTML5 aside идеально подходит для этого сценария — мы хотим добавить фрагмент контента, но дать понять, что это выходит за рамки значимого потока окружающего его контента. Внутри aside, извлекаемая кавычка, очевидно, являющаяся цитатой, делает blockquote элемент ещё одним идеальным решением.

Шаг 2: Плавающая цитата

Теперь мы хотим взять рамку, созданную aside элементом, вытащить её из визуального потока и оформить так, чтобы она выделялась на фоне остального содержимого:

.pquote {
    float: left;
    width: 100px;
    background: #ddf;
    font-weight: bold;
    padding: 13px;
    margin: 0 13px 13px 0;
}

blockquote {
    margin: 0; /* gets rid of the default blockquote margin */
}


Посмотрите на эту базовую извлекаемую цитату в действии.

Шаг 3: добавление оформления

Это очень простой CSS, который даёт вам представление о том, как можно легко создавать вытягивающие кавычки. Немного повозившись, можно добиться что-то гораздо более интересное.

.pquote {
    float: right;
    width: 200px;
    background: url(images/openquote.gif) top left no-repeat;
    color: #030;
    font-size: 26px;
    line-height: 0.9;
    font-style: italic;
    padding: 13px;
}

blockquote {
    margin: 0;
}

.pquote p:first-letter {
    font-size: 39px;
    font-weight: bold;
}

И вот она.
Более сложный метод ─ добавление дополнительного элемента к извлечённой цитате, например фотографии.

Потребуется больше HTML кода.

<p>If ever there was ...[Big load of text]... humble pea is it.</p>

<p>Mother Nature has never created ...[Big load of text]... something so flawless.</p>

<aside class="quotebox">
    <blockquote>
        <p>"It is my educated opinion that this is complete and utter tosh."</p>
    </blockquote>
    <p class="by">Patrick Griffiths (pea farmer)</p>
</aside>

<p>The green seed ...[Big load of text]... favorite for good reason.</p>

<!-- etc. -->

Немного другой CSS, по сути, следующий тем же принципам, что и в первых двух примерах, может выглядеть следующим образом:

.quotebox {
    float: left;
    width: 200px;
    background: #900 url(images/ptg1.jpg) top no-repeat;
    color: #fc0;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 71px;
    border: 2px solid #600;
    margin: 0 12px 12px 0;
}

.quotebox p {
    margin: 0;
}

.quotebox blockquote {
    font-weight: bold;
    padding: 6px;
    border-top: 2px solid #600;
    margin: 0;
}

.quotebox .by {
    padding: 6px;
}

Смотрите живой пример.
Извлекаемая цитата может вызвать проблемы с её размещением в середине HTML-содержимого. Для визуального браузера с поддержкой CSS всё будет выглядеть безупречно.

Однако для тех браузеров, которые не обращают внимания на CSS и возвращаются к обычному HTML, лучшим примером являются программы чтения с экрана для слабовидящих пользователей, извлекаемая цитата будет отображаться прямо посреди основного содержимого. Цитата, внезапно появляющаяся между двумя абзацами, явно неуместна и может привести к путанице в потоке.

Элемент HTML5 aside разработан, чтобы избежать подобных проблем. Создавайте свои страницы на HTML5 и используйте aside.

Если вы не умеете использовать HTML5 или если вы обеспокоены тем, что браузеры ваших пользователей не смогут правильно интерпретировать сторонние файлы, вы могли бы рассмотреть возможность предоставления небольшой дополнительной информации вместе с вашими извлекаемыми кавычками.

Сообщение, скрытое от просмотра с помощью CSS, которое гласит что-то вроде “Начало вытягиваемой цитаты” перед цитатой, а затем “конечная цитата” после неё, возможно. Или у вас могла бы даже быть ссылка, похожая на ссылку “пропустить навигацию”, которая предлагала бы пользователю возможность пропустить извлекаемую цитату и перейти к основному контенту.

Страницы в тему:

Примеры CSS:

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