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



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

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

Стили CSS для выделения заголовков H1 и H2

Для заголовка 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;}

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

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


Оформление заголовка 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;

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

TEXT.RU - 100.00%


Автор статьи ✎ Olga Protasova Выпуск ✹ 10/16/2016 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *