Светящиеся заголовки с помощью CSS

Об этой фигне я изначально писать не хотел, уж слишком просто. Но это не очередная тень или (ещё хуже) скрипт с цветочками для того, чтобы испортить свой блог.  Сейчас думаю, что таким образом пора мне в блоге оформлять цитаты.

Первоисточник здесь. Я не буду скатывать статью, немнго проанализирую и дополню.

Для тех, кто не рубит в английском или не хочет разбираться, объясню более понятным языком.
В любом шаблоне Blogger (это касается разметки шаблона любого движка) есть заголовки.
Посмотрите внимательнее на скриншот, который будет ниже. Заголовки h1 (главный и самый ядрёный) я пометил (коряво) красным цветом, заголовки h2 (менее важные, служебные) обведены (тоже коряво) синим цветом ↓

Заголовки в Blogger на примере шаблона

Как вы видите, название блога и название статей - это h1.
Описание блога и название виджетов - это h2.

Собственно - это не плохое деление, но в другом шаблоне может быть иначе. За рубежом сплошь и рядом веб мастера используют заголовок h3 (менее значительный) для названия статей. Если у вас именно так, то советую задуматься над исправлением сего недоразумения.

В зарубежной статье, на которую я вверху сослался, рекомендуют забацать себе в h3 вот такую красочную штуку:

Яндексы индексировали, индексировали, да не выиндексировали

На мой взгляд, делать этого не стоит, будет лучше оставить заголовки максимально простыми или добавить немного тени по вкусу.

А вот использовать в качестве цитаты или усиления нужного текста в статье вполне можно:

Есть не мало способов создать экстримальную ситуацию и заработать визит к стоматологу. Вот несколько из них:
– подойти к патрулю на улице и назвать их свиньями
– спорить и угрожать вилкой пьяному на свадьбе
– в день ВДВ-шников ходить с транспарантом “свобода чеченскому народу!”
– мешать сеошнику работать за компом
– кидаться косточками от вишни в копающих траншею таджиков
и т.д.

Сделать это не трудно. Открываете шаблон, находите ту часть (обычно она заканчивается тегом ]]></b:skin>) и вставляете такой блок:

.zag {
font-size:15px;
color:#666;
border-left:10px solid #666;
border-right:10px solid #666;
padding:3px 5px 3px  20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #666;
-webkit-box-shadow:0px 0px 13px #666;
-moz-box-shadow:0px 0px 13px #666;


}

.zag:hover {
font-size:15px;
color:#FF133F;
border-left:10px solid #FF133F;
border-right:10px solid #FF133F;
box-shadow:0px 0px 13px #FF133F;
-webkit-box-shadow:0px 0px 13px #FF133F;
-moz-box-shadow:0px 0px 13px #FF133F;
}

Обратите внимание, что .zag отвечает за исходное состояние элемента, .zag:hover за наведение мыши.
Соответственно, в обеих частях вы можете поменять размер текста (для эффекта лупы в .zag:hover увеличьте шрифта в font-size) и цвет. Коды цветов можете взять здесь.

Теперь поговорим о том, как вставлять в статью такую светящуюся штуку.
А очень просто. Любому куску текста, например "Яндексы индексировали, индексировали, да не выиндексировали" присваиваете класс zag:

<div class="zag">
Яндексы индексировали, индексировали, да не выиндексировали</div>

Можете сделать несколько таких стилей (в css прописать zag1, zag2 и т.д.) с разными настройками и пользоваться по мере необходимости. Не забудьте потренироваться со скороговоркой ^^.

И вместо постового смотрим на блаженного офисного енота: