Двойные кавычки для цитаты

В этом уроке мы будем учиться делать цитаты в красивых кавычках с использованием CSS.

Пример блока с цитатой Вы можете посмотреть здесь

Реализация данного метода состоит из HTML+CSS частей и 2-х изображений.

HTML часть:

<blockquote>Ваш текст</blockquote>

CSS часть:

blockquote {

  font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif;
  

  width: 400px;
  

  background: url(img/close-qu.gif) no-repeat right bottom;
  

  padding-left: 18px;
  

  text-indent: -18px;
  

  }

  

  

  blockquote:first-letter {
  

  background: url(img/open-quo.gif) no-repeat left top;
  

  padding-left: 18px;
  

  font: normal 1.4em Georgia, "Times New Roman", Times, serif;
  

  }

Шрифты и пути к изображениям можете изменить, если в этом появится необходимость.

Изображения:

Сохраните картинки через меню правой кнопки мыши "Сохранить рисунок как".

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ebdesignerwall.com/tutorials/simple-double-quotes/
Перевел: Евгений Попов
Урок создан: 14 Мая 2008
Просмотров: 30232
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^