Имя:
Пароль:
Выслать пароль?  Регистрация
Google

Учимся работе с графическими редакторами:
Adobe Photoshop,
Adobe Illustrator,
QuarkXpress.

Уроки веб дизайна.

Шаблоны wordpress new

Это надо знать:
статьи по дизайну,
справочная литература.

Может пригодиться:
программы для работы с графикой,
словарь терминов Adobe Photoshop,
кисти для Фотошопа и Иллюстратора,
actions для Фотошопа,
клипарты.

Коммерческие объявления:
Последние статьи:


Двойные кавычки легко и просто

Этот урок по CSS покажет вам как можно отобразить два изображения двойных кавычек используя один тэг blockquote. Прием заключается в применении одного фонового изображения на теге blockquote, а затем применить другой фон на первой букве (псевдо-элементе) blockquote.

Просмотреть двойные кавычки

Загрузить файл HTML

1. Исходный HTML код

Начните с тега blockquote и какого-нибудь текста.

<blockquote>Hello, I am a double quote...</blockquote>

2. Задайте тег blockquote


blockquote {
  font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif;
  width: 400px;
  background: url(images/close-quote.gif) no-repeat right bottom;
  padding-left: 18px;
  text-indent: -18px;
}

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

3. Первая буква тега blockquote

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


blockquote:first-letter {
  background: url(images/open-quote.gif) no-repeat left top;
  padding-left: 18px;
  font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}

Стиль с врезными кавычками

Если вы хотите сделать врезные кавычки, просто задайте тег blockquote размещенным слева или справа. Посмотрите мой пример с врезными кавычками.


Источник статьи: www.webdesignerwall.com. Перевод: Портал для дизайнеров «Балбесов НЕТ»


Оцените, пожалуйста, эту статью:

Рейтинг: 1.8/5 (голосов: 9)

  Опубликовано: 07 мая 2009 | Просмотров: 15322 | Страница для печати  

Читать комментарии [8] на форуме.

Оставить комментарий
Ваше имя:

Проверка на человечность:

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


  О нас Советы Уроки Карта уроков по Фотошоп Уроки по Adobe Illustrator Клипарты Форум Блог админа Реклама на сайте