cssing Архив » Цитаты aka Pull Quote

Цитаты aka Pull Quote

XHTML/CSS, Полезности

Очень мне нравится идея так называемых “Pull Quote”. На русском просто цитата или врезка. Что это такое вы можете посмотреть например на сайте http://www.melos.com.ua/ . Это те серые цитаты слева.
Вот и решил посвятить им пост.

Про это

Хотя некоторые спорят насчет их полезности мне все же они кажутся очень удобными. Обычно они дублтруют какую-то строку из текста, для лучшего восприятия. Часто это означает и дублирование этой строки в коде. Вот это мне и не нравится.
Я нашел 2 метода избежания этой ситуации. Вдруг кому пригодятся

Метод первый

Первый метод я “спер” с сайта http://digital-web.com/.
(например в этой статье – цитата на сером фоне).
Небольшой скрипт решает простую задачу. Однако у них предусмотрено лишь одна такая цитата. И каждый раз в конкретном месте страницы(мы задаём номер абзаца). Для того чтобы скрипт работал нужно

1. Подключить его.
2. Иметь SPAN с классом pullquote

В результате скрипт при загрузке спродуцирует такой код:

<blockquote class='pullquote'>
  <p class='pullquote'>
    <span class='pullquote'>
        content
    </span>
  </p>
</blockquote>

Из которого вы уже можете сделать все что вам прийдет в голову с помощью CSS.(посмотреть пример).
Лучше им конечно не пользоваться – он писался специально для тех страниц. Им нужны была лишь одна цитата.

Метод второй

Прочитал в статье “Create a Pull Quote with Javascript (and CSS)“.
Этот метод гораздо универсальнее. С помощью этого скрипта этих цитат вы можете сделать столько сколько SPAN с классом pullquote, причем каждая цитата будет напротив своего “родного” параграфа.
Требования к работе точно такие, как и у предыдущего.
Этот скрипт будет при загрузке генерировать вот такой код:

<blockquote class='pullquote'>
  <p>
    <span class=''>
      content
    </span>
  </p>
</blockquote>

Этот скрипт и меньше и универсальнее. Им я и рекомендую вам пользоваться.
(посмотреть пример)

В конце

Мне нравится когда с содержанием можно вот так кратко ознакомиться в таких цитатах. (если их умело подбирать, конечно). А скрипты эти более чем просты в использовании. Так что себе наверно я такие сделаю, как только перейду на новый WP. ;)

Вот два примера(скрипты можно легко из них достать)

• Универсальный пример
• Пример украденный из журнала Digital Web

XHTML/CSS, Полезности