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

19 января, 2005

Цитаты aka Pull Quote

Очень мне нравится идея так называемых “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, Полезности