Продолжая тему неоновых теней для текста, сегодня расскажу еще об одном маленьком трюке в Blogger, с помощью которого можно выделить первые буквы во многих заголовках блога.

Достигается этот трюк путем добавления в шаблон нескольких строк CSS, после которых все названия статей и виджетов автоматически будут иметь заглавную букву в названии, отличную от других и оформленную оригинальным образом.

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

Дабы читатель имел представление о чем идет речь, привожу примерный вариант развития событий на изображении ниже:


Таким образом, посредством одной небольшой правки шаблона вы сможете выделить одновременно все заглавные буквы:

• в названиях сообщений,
• в заголовках у виджетов боковой колонки;
• в подписях даты.

Баловоство, но нам ничего не чуждо :)

Добавление особого стиля к первой букве заголовков.

Как и прежде, для доступа к HTML-шаблону потребуется совершить знакомый с детства путь: Дизайн > Изменить HTML. Ввиду последних приятных изменений интерфейса Blogger путь этот будет выглядеть: Ваш блог > Шаблон > Изменить HTML.
А следующий действием потребуется отыскать в шаблоне строку ]]></b:skin> и перед ней разместить код, который и заставит наполнить смыслом первую букву заголовков:

h2:first-letter {color: #CB941C; font-size: 20px; text-shadow: 0 0 0.1em #BB1818, 0 0 0.1em #BB1818, 0 0 0.1em #BB6006;}
h3.post-title:first-letter{color: #CB941C; font-size: 28px; text-shadow: 0 0 0.1em #BB1818, 0 0 0.1em #BB1818, 0 0 0.1em #BB1818;}

После выполнения этой тяжкой процедуры остается сохранить шаблон и взглянуть на блог по-новому.
Однако, как упоминалось мною ранее, этот эффект можно полностью настроить по своему собственному эстетическому вкусу, о чем я и укажу ниже:

• color: #CB941C; - определяет цвет самой буквы, изменяется путем замены кода цвета (для его нахождения используйте онлайн-подбор веб-цвета);
• font-size: 18px; (28 px - во втором случае) - означает размеры буквы в названии сообщений и в названии виджетов (подбирается согласно шрифту ваших заголовков);
• text-shadow: 0 0 0.1em #BB1818, 0 0 0.1em #BB1818, 0 0 0.1em #BB1818; - добавляет неоновую тень заглавной букве (подробное совершение изменений здесь смотрите в ранней статье).

Вам остается испробовать данный эффект у себя в блоге, а мне - немедленно распрощаться с вами.