Стили заголовков и подзаголовков Блоггер

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

Оформление заголовков

Давайте начнём со шрифтов. Если сделать у заголовков красивые шрифты, то другие украшения могут и не понадобиться. Поставив на заголовки витиеватый или декоративный шрифт, то другое украшение, будь то рамка или подчёркивание, затмят его. О том как добавлять шрифты с https://fonts.google.com/ можно прочитать здесь, но шрифты можно брать не только с этого сайта.

Шрифты

Шрифты в заголовки и подзаголовки добавляются в шаблон, выше тега ]]></b:skin>

Не забываем, что коды даны для оптимизированных шаблонов. Если шаблон не оптимизировался, то нужно заменить h1 на h3

Код выглядит так:

.post h1 {
font-family: ' Calligraph', arial;
}

Вместо h1 можно поставить нужный вам заголовок.

А теперь о том, где взять шрифты.
Ищем в сети сайты со шрифтами. Заходим, например, на https://allfont.ru/. Здесь русских шрифтов много. В настройках отмечаем, что ищем кириллические шрифты и понравившийся добавляем в шаблон.

Выбираем шрифт, нажимаем на него.

В открывшимся окне копируем код и добавляем в шаблон после тега <head>
Эти данные добавляем в код стилей и устанавливаем выше тега ]]></b:skin>

Пример кода:

.post h1 {
font-family:'Shnobel';
}

И, конечно, нам нужно будет для шрифта в код прописать стили.

Семейство шрифтов

serif - шрифты с засечками
sans-serif - рубленные шрифты
cursive - курсивные шрифты
fantasy - декоративные шрифты
monospace - моноширинные шрифты, ширина каждого символа в таком семействе одинакова

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

Размер шрифта

Например: font-size: 20px;
Размер можно записать как - absolute-size xx-small, x-small, small, medium, large, x-large, xx-large, relative-size smaller, larger.
Так же размер шрифта устанавливается с помощью единиц длины - px, em.
В % - относительное значение.
initial - размер по умолчанию.
inherit - наследует значение от родительского элемента.

Жирность шрифта (насыщенность)

Например: font-weight: bolder;
normal - обычный шрифт
bold - полужирный шрифт
bolder - жирный шрифт
lighter - тонкий шрифт
В условном числовом значении от 100 до 900 с шагом 100 (100, 200, 300... 900), где значение 100 тонкий шрифт, а 900 - сверх жирный.

Ширина шрифта

Пример: font-stretch: ultra-condensed;
font-stretch: ultra-condensed - наиболее сжатый шрифт
font-stretch: extra-condensed - средне-сжатый шрифт
font-stretch: condensed - сжатый шрифт
font-stretch: semi-condensed - слегка сжатый шрифт
font-stretch: normal - по умолчанию
font-stretch: semi-expanded - немного расширенный шрифт
font-stretch: expanded - расширенный шрифт
font-stretch: extra-expanded - средне-расширенный шрифт
font-stretch: ultra-expanded - сильно расширенный шрифт
font-stretch: inherit - устанавливает значение свойства в значение по умолчанию
font-stretch: initial - наследует значение от родительского элемента

Начертание шрифта (стиль)

Пример: font-style: italic;
normal - обычное начертание
italic - курсивный текст
oblique - наклонное текст (немного меньше, чем курсив)
inherit - применяется значение родительского элемента

Цвет шрифта

Примеры:

color: blue;

color: #000000;

сolor: rgb (0, 156, 0);

color: rgba (89, 107, 108, 0.5);

Если соединить нужные нам для заголовка значения, то получится примерно такой код:
.post h1 {
font-family:'Shnobel';
font-style: italic;
font-weight: bolder;
font-size: 40px;
}
И его можно укоротить:
.post h1 { font: italic bolder 40px 'Shnobel'}
Со шрифтами разобрались. Теперь другое оформление для заголовков.

Ленты

Примеры заголовков на ленте:

h1{
text-align: center;
position: relative;
color: #fff;
margin: 0 -30px 30px -30px;
padding: 10px 0;
text-shadow: 0 1px rgba(0,0,0,.8);
background: #5c5c5c;
background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
-moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
box-shadow: 0 2px 0 rgba(0,0,0,.3);
} h1:before, h1:after
{
content: '';
position: absolute;
border-style: solid;
border-color: transparent;
bottom: -10px;
}
h1:before
{
border-width: 0 10px 10px 0;
border-right-color: #222;
left: 0;
}
h1:after
{
border-width: 0 0 10px 10px;
border-left-color: #222;
right: 0;
}

А ниже сайты с генераторами лент:
http://www.css3d.net/ - 3d ленты
https://cssportal.com/css-ribbon-generator/ - угловые ленты
https://www.skripter.info/generator/ribbon-builder.html#<

Рамки

Стиль рамки

border-style

none или hidden - отменяет границу
dotted - рамка из точек
dashed - рамка из тире
solid - простая линия
double - двойная рамка
groove - рифленая 3D граница
ridge, inset, outset - различные эффекты рамки
inherit - применяется значение родительского элемента

Цвет рамки

border-color

Ширина рамки

border-width
thin - тонкая линия
medium - средняя линия
thick - толстая линия

Другие параметры

Скругление углов у границ - border-radius
border-top - рамка сверху
border-bottom - рамка снизу
border-right - рамка справа
border-left - рамка слева

Пример 1

.post h1 {
display: table;
width: auto;
margin: 0 auto;
padding: 15px;
letter-spacing: 2px;
border: 2px solid #cbdcea;
color: #394671;
}
.post h1:after {
content: '';
position: absolute;
top: 6px;
left: 6px;
width: calc(100% - 4px);
height: calc(100% - 4px);
border: 2px solid #cbdcea;
}

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

Пример 2

.post h3{
background: #ffffff;
padding: 50px 20px;
text-align: center;
}
.post h3 {
font-family: 'Righteous', cursive;
position: relative;
color: #e5c49e;
border-top: 3px solid;
border-bottom: 3px solid;
font-size: 2em;
padding: 11px 60px;
margin: 0;
line-height: 1;
}
.post h3:before, .post h3:after {
content: "";
position: absolute;
top: 0;
width: 30px;
height: 100%;
border-left: 2px solid;
border-right: 2px solid;
background: repeating-linear-gradient(180deg, transparent, transparent 4px, #e5c49e 2px, #e5c49e 6px);
}
.post h3:before {left: 0;}
.post h3:after {right: 0;}
@media (max-width: 700px) {
.post h3 {font-size: 2em;}
}

Красным выделила цвет рамки.

Анимация и ховер эффект

Пример 1

.post h1{
border:10px solid #f1f1f1;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.post h1:hover {
border:10px solid #86ee82;
-moz-box-shadow: 10px 10px 0px #4a8b45;
-webkit-box-shadow: 10px 10px 0px #4a8b45;
box-shadow:10px 10px 0px #4a8b45;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}

Пример 2

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

.post h1 {
overflow: hidden;
text-shadow: 0 0 lime,
0 0 deeppink,
0 0 lightsteelblue;
color: transparent;
transition: all 1s;
text-align: center;
}
.post h1:hover {
text-shadow: -400px 0 lime,
400px 0 deeppink,
0 0 lightsteelblue;
}

Пример 3

.post h1 {
text-shadow: 1px 1px 0 hsl(20,100%,50%),
2px 2px 0 hsl(20,100%,50%),
3px 3px 0 hsl(35,100%,50%),
4px 4px 0 hsl(35,100%,50%),
5px 5px 0 hsl(45,100%,50%),
6px 6px 0 hsl(45,100%,55%),
7px 7px 0 hsl(55,100%,60%),
8px 8px 0 hsl(55,100%,65%);
color: hsl(0,100%,40%);
transition: all 1s;
}
.post h1:hover {
text-shadow: 1px -1px 0 hsl(290,100%,40%),
2px -2px 0 hsl(290,100%,40%),
3px -3px 0 hsl(280,100%,60%),
4px -4px 0 hsl(280,100%,60%),
5px -5px 0 hsl(270,100%,75%),
6px -6px 0 hsl(270,100%,80%),
7px -7px 0 hsl(260,100%,85%),
8px -8px 0 hsl(260,100%,90%);
color: hsl(300,100%,30%);
}

Некоторые примеры оформления взяты из сайтов:
http://css.yoksel.ru/
https://html5book.ru/

Как видите оформить красиво заголовки не трудно и способов очень много. Так же можно оформить название и описание сайта.

.Header h1 {
...ваши стили...

.Header .description {
...ваши стили...