Данная запись о том, как добавить в оформление текст непосредственно через CSS. В чём преимущество перед заранее приготовленным изображением с текстом? Во-первых, весит в разы меньше, во-вторых, проще оформить в стилистике самого дневника. Итак, к делу.
Вся фишка в селекторах. В данном случае, конкретно в двух: :before и :after, - которые добавляют блок текста до либо после блока, к которыму были применены, соответственно. Возьмём, к примеру, #add_block1. Применение селектора выглядит следующим образом:
#add_block1:before {content:"test text";}
Также в content можно прописывать url (только из БИ, разумеется) (синтаксис тот же, что и в background). Кроме того, в блоках с данными селекторами можно описывать непосредственно стиль текста и его положение на странице. Пример:
#add_block1:after {position:fixed; top:20 left: 20 color:#ff0000; text-shadow: 0 0 3px #ff0000; font-size:12 content:"test text";}
Пожалуй, есть только одна проблема. Этот текст всё равно нельзя выделять и копировать, чтобы получить к нему доступ надо лезть в код страницы. Ну а в остальном - использование данных селекторов может быть весьма удобным.
:before и :after
diaryCSS
| вторник, 27 сентября 2011