Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos
  пятница, сентября 02, 2011  

Выделяем заглавные буквы заголовков в блоге
Продолжая тему неоновых теней для текста, сегодня расскажу еще об одном маленьком трюке в 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; - добавляет неоновую тень заглавной букве (подробное совершение изменений здесь смотрите в ранней статье).
Вам остается испробовать данный эффект у себя в блоге, а мне - немедленно распрощаться с вами.



Понравилась статья? Поделись ею с друзьями!

Не забудь подписаться на обновления блога:


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