Подчеркивание заголовков используя CSS для блоггер

---

Здравствуйте друзья и читатели. В своих статьях я уже писала об оформлении заголовков в блоге, сегодня самый простой вариант, как с помощью CSS стилей, используя границы (border) и закругления (border-radius) подчеркнуть названия заголовков блога, сообщения и сайдбара.

Самое простое подчеркивание

Для заголовка H1

.Header H1 {border-bottom: 7px solid #03b4cc;padding-bottom: 5px;}

Для меню блога

#PageList1 {border-bottom: 5px groove #03b4cc;padding-bottom: 9px;}

Подчеркивание для заголовков сообщения

.post-title{border-bottom:2px solid #03b4cc;}

Для названия гаджетов H2

.sidebar .widget h2 {border-bottom:5px solid #03b4cc;}

Пример оформления с фоном и радиусом закругления углов

Оформление заголовка H1 и H2 (название гаджетов) с фоном и закруглением углов справа. Также добавила тень текста (text-shadow). При желании посмотрите вживую в демо блоге.

CSS для основного заголовка

.Header H1 {

  background: #0e5198;

  padding: 4px;

 text-shadow:-1px 0 green,0 1px green,1px 0 green,0-1px green;color:#f8f8ff;  

  border-radius: 16px 0px 80px 0px;

  -webkit-border-radius: 16px 0px 80px 0px;

border-bottom: 7px solid #03b4cc;

padding-bottom: 5px;  

} 

CSS для заголовков сайдбара

.sidebar .widget h2 {

 background: #0e5198; 

  padding: 4px;

text-shadow:-1px 0 black,0 1px black,1px 0 black,0-1px black;color:#fff;

 border-radius: 8px 0px 40px 0px;

  -webkit-border-radius: 8px 0px 40px 0px;

}

Выделенное фиолетовым можно удалить. Это еще одна линия подчеркнуть название заголовка, как в простом примере выше. Экспериментировать разные варианты оформления можно до бесконечности: убрать фон, настроить закругление справа и слева, здесь уже зависит от фантазии каждого из Вас. Обязательно почитайте статьи ниже, информация поможет в оформлении.

Стили CSS желательно вставить в шаблон изменить шаблон выше строки ]]></b:skin>. Кто пока с шаблоном на Вы, можно добавить гаджет: <style>код CSS</style>. Но помните, много Html/JavaScript влияют на скорость загрузки блога.

Новый пост:   Рамочки с прошивкой для текста и цитат на CSS;

Обращайтесь в комментариях по интересующим вопросам этой темы. Удачи и всего Доброго.

Читайте также:

• Как выровнять текст и изменить форму заголовка в блогах Blogspot;
• Как поднять/опустить заголовок и вставить гаджет сверху заголовка;
• Фишки для дизайна с использованием CSS для блоггер;
• Как выделить часть текста в рамку;
• Как убрать панель навигации Navbar;
• Скрыть navbar atom attribution с помощью CSS Сохранить гаджет без названия заголовка;
• Тень текста заголовка ссылок цитат в blogger используя CSS;

Рекомендуемый контент: