Уроки дизайна и вёрстки

В этом CSS уроке я расскажу как нарисовать двойные кавычки вокруг одного блока цитат, используя только один тэг <span class="keyword">blockquote</span>. Трюк заключается в том, чтобы использовать одно изображение кавычек с тэгом <span class="keyword">blockquote</span>, а другое — с первой буквой текста внутри тэга <span class="keyword">blockquote</span>.

1. HTML исходный текст

Начнем с самого тэга blockquote и текста внутри негоt.

<span class="tag"><<span class="keyword">blockquote</span>></span>Привет, я двойная кавычка...<span class="tag"></<span class="keyword">blockquote</span>></span>

2. Опишем blockquote

Опишем тэг blockquote следующим образом:

<span class="keyword">blockquote</span> <span class="rules">{  <span class="keyword">font</span>:<span class="value"> 1.2em/1.6em Georgia, "Times New Roman", Times, serif</span>;

<span class="keyword">width</span>:<span class="value"> 300px</span>;

<span class="keyword">background</span>:<span class="value"> url(images/close-quote.gif) no-repeat right bottom</span>;

<span class="keyword">padding-left</span>:<span class="value"> 18px</span>;

<span class="keyword">text-indent</span>:<span class="value"> -18px</span>;

}
</span>

Этот CSS код выведет картинку close-quote.gif в правом нижнем углу блока. Свойства padding-left и text-indent сформируют обратный отступ в -18px. Это будет выглядеть примерно так:

3. первая буква в blockquote

Теперь добавим левый отступ в 18px первой букве блока blockquote. Это выровнят текст по левому краю. А теперь выведем картинку open-quote.gif в левом верхнем углу. Обратите внимание, что я изменил стиль первой буквы. Так она выглядит интересней.

<span class="keyword">blockquote</span>:first-letter <span class="rules">{  <span class="keyword">background</span>:<span class="value"> url(images/open-quote.gif) no-repeat left top</span>;

<span class="keyword">padding-left</span>:<span class="value"> 18px</span>;

<span class="keyword">font</span>:<span class="value"> italic 1.4em Georgia, "Times New Roman", Times, serif</span>;

}
</span>

Можно задать всему блоку свойство float:left, чтобы основной текст обтекал цитату справа.