Светящиеся заголовки с помощью 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 и т.д.) с разными настройками и пользоваться по мере необходимости. Не забудьте потренироваться со скороговоркой ^^.

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

6 комментариев:

  1. Отлично! Все идеально написано. А я и вправду 2 раза повторил Скороговорку :)

    ОтветитьУдалить
  2. Значит пора писать отдельной статьёй выпуск seo-скороговорок. А вдруг они помогают в продвижении?))

    ОтветитьУдалить
  3. Интересные эффекты для заголовков - http://lecaw.ru/index.php/categories/css/item/291-priemi-css-dlia-zagolovkov-shriftov-i-stilei-teksta

    ОтветитьУдалить
  4. Здравствуйте.
    Подскажите пожалуйста,как изменить размеры рамки,допустим сделать ее квадратной.
    Заранее спасибо.

    ОтветитьУдалить
    Ответы
    1. Здравствуйте.
      Пример:
      .zag {width: 200px; height: 200px;}
      Будет квадратной.
      Если интересует граница рамки, то меняйте border-radius и -moz-border-radius.
      См. htmlbook.ru.

      Удалить
    2. Спасибо вам большое.

      Удалить