Page 61 - Сила CSS3 Освой новейший стандарт

Графические эффекты без графики • 61

отрезки рамки, за исключением одного, сделать прозрачными. Степень остроты
угла можно варьировать, устанавливая разные значения толщины для разных от-
резков рамки.
Создание хвостика
Теперь вы знаете, как сделать треугольник без помощи изображений. Давайте до-
бавим треугольник слева от поля комментария так, чтобы он указывал на аватар
пользователя. Для этого можно было бы вложить блок span или div внутрь каждого
комментария, а затем трансформировать этот элемент в наш треугольник. Однако я
предлагаю не менять код HTML и использовать для создания нужного нам элемента
содержимое, генерируемое CSS.
Генерируемое содержимое (generated content) — это метод CSS 2.1, позволяющий
делать так, чтобы содержимое из CSS появлялось в коде HTML. Его удобно приме-
нять для добавления элементов, которые вам не хочется программировать вручную
в коде HTML, таких как порядковые номера в заголовках или значки после ссылок.
Однако его не следует применять для важного содержимого, отсутствие которого
исказит страницу или испортит впечатление пользователя, браузер которого не
может загрузить файл CSS.
Для создания генерируемого содержимого необходимо указать, куда оно должно
быть вставлено; для этого используются псевдоэлементы ::before и ::after (кото-
рые также можно записывать как :before и :after). Свойство content указывает
на то, какое содержимое вставляется в код HTML.

откуда взялоСь двойное двоеточие?

Вы наверняка обратили внимание, что в названии псевдоэлементов ::before и ::after я ис-
пользовала не привычное одинарное, а двойное двоеточие. Нет, это не опечатка. В CSS3
синтаксис псевдоэлементов поменялся, и теперь они записываются с двойным двоеточием,
в то время как одинарное двоеточие сохраняется за псевдоклассами.
При желании вы можете продолжать использовать версию с одинарным двоеточием;
она прекрасно работает. В действительности, поскольку IE 8 и более ранние версии
не поддерживают запись с двойным двоеточием, в этой книге мы также будем при-
держиваться варианта с одинарным двоеточием. Кроме того, оба псевдоэлемента
можно применять как групповые селекторы, например .caption:before, .caption::before
{ content: «Figure: »;}.

Например, для того чтобы вставить слово «Figure» перед подписями ко всем кар-
тинкам на странице, можно добавить такой код CSS:
.caption:before {
content: "Figure: ";
}

www.trk.kg