Здравствуйте друзья и читатели. В своих статьях я уже писала об оформлении заголовков в блоге, сегодня самый простой вариант, как с помощью CSS стилей, используя границы (border) и закругления (border-radius) подчеркнуть названия заголовков блога, сообщения и сайдбара.
Самое простое подчеркивание
Подчеркивание для заголовков сообщения
.post-title{border-bottom:2px solid #03b4cc;}
Для заголовка 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;
Обращайтесь в комментариях по интересующим вопросам этой темы. Удачи и всего Доброго.
Стили CSS желательно вставить в шаблон изменить шаблон выше строки ]]></b:skin>. Кто пока с шаблоном на Вы, можно добавить гаджет: <style>код CSS</style>. Но помните, много Html/JavaScript влияют на скорость загрузки блога.
Новый пост: Рамочки с прошивкой для текста и цитат на CSS;
Обращайтесь в комментариях по интересующим вопросам этой темы. Удачи и всего Доброго.
Читайте также:
- Как выровнять текст и изменить форму заголовка в блогах Blogspot;
- Как поднять/опустить заголовок и вставить гаджет сверху заголовка;
- Фишки для дизайна с использованием CSS для блоггер;
- Как выделить часть текста в рамку;
- Как убрать панель навигации Navbar;
- Скрыть navbar atom attribution с помощью CSS Сохранить гаджет без названия заголовка;
- Тень текста заголовка ссылок цитат в blogger используя CSS;
Рекомендуемый контент: