Стили оформления заголовков Blogger

Сегодня тема сообщения — оформление заголовков статьи. На сайте можно посмотреть ранние посты на эту же тему:

В родных шаблонах Блоггер установлено название статьи под тегом h3. Если вы ничего не меняли в шаблоне, то и в коде ничего менять не нужно. А если поменяли, то прописываете тот, который прописан у вас, например, .post h2.

Стиль 1

.post h3 {
font-size: 24px;
padding: 5px;
color: #fff;
text-shadow: 1px 1px 1px #333;
background: #E3BC50;
border-left: 20px solid #B9942D;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 1px 1px 2px #333;
-moz-box-shadow: 1px 1px 2px #333;
box-shadow: 1px 1px 2px #333;
margin: 10px 0;
text-transform: capitalize;
width: 94%;
line-height: 1;
}

Меняем в коде — выделила красным.

Скругление углов — оранжевым.

Размер шрифта — синим.

Стиль 2

При наведении курсора у оформления меняется цвет полоски.

.post h3{
margin-top:10px;
max-width:95%;
padding:6px 2px;
color: #000000;
padding-left:10px;
margin-bottom:10px;
font-size:20px;
font-family:'Oswald',sans-serif;
background-color:#F8FAFD;
text-decoration:none;
border-left:10px solid #05A8FC;
box-shadow:1px 1px 2px gainsboro;
transition: border-left .777s;
-webkit-transition: border-left .777s;
-moz-transition: border-left .777s;
-o-transition: border-left .777s;
-ms-transition: border-left .777s;
}
.post h3:hover {
border-left:10px solid #FC2B2C;
}

Меняем в коде цвет оформления полосы — выделила красным. Первый цвет в обычном состоянии, второй при наведении курсора.

Размер шрифта — синим цветом.

Шрифт — зелёным.

Фон оформления — оранжевым.

Стиль 3

Оформление с ховер-эффектом, при наведении курсора цвет линии меняется.

.post h3{
background: #F9F9F9;
font-family:'Oswald',sans-serif;
font-size: 120%;
padding: 6px 12px;
color: #333;
text-shadow: 1px 1px 1px #AAA;
border-bottom: 4px solid #03DA03;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 1px 1px 2px #AAA;
-moz-box-shadow: 1px 1px 2px #AAA;
box-shadow: 1px 1px 2px #AAA;
margin: 6px 3px;
text-transform: capitalize;
width: 95%;
line-height:1.0em;
}
.post h3:hover {
border-bottom: 4px solid #003F80;
}

Меняем в коде:

Цвет фона — красный.

Шрифт — выделила оранжевым.

Размер шрифта — голубым.

Синим цветом в коде оформила цвет полосы. Первый цвет в обычном состоянии, второй при наведении курсора.

Стиль 4

Оформление с картинкой. Стиль хорош тем, что изображение вы можете добавить любое, в том числе движущуюся гиф картинку.

.post h3 {
margin: 1em 0 0.5em 0;
font-weight: 600;
font-family: 'Arial';
position: relative;
font-size: 30px;
line-height: 20px;
padding: 15px 15px 15px 15%;
color: #2c75ff;
box-shadow:
inset 0 0 0 1px rgba(53,86,129, 0.4),
inset 0 0 5px rgba(53,86,129, 0.5),
inset -285px 0 35px white;
border-radius: 0 10px 0 10px;
background: #fff url(ваша картинка) no-repeat center left;
}

Размер шрифта в коде выделила красным

Шрифт — розовым цветом

Цвет текста выделила синим

Окантовка и тень — оранжевым цветом

Фон — зелёным цветом

Чтобы сделать углы округлыми, нужно в коде в строке border-radius: 0 10px 0 10px; - прописать одно число. Например, если поставить 5px; то углы будут слегка скруглённые, а если 50px, то совсем круглые.

Если нужны прямые углы — то выставляем нулевые значения border-radius: 0 0px 0 0px;

Стиль 5

Заголовок будет в левой части и от него будет тянуться двойная линия, которую можно сделать одноцветной или двухцветной.

.post h3 :after {
content: "";
border-bottom: 2px solid #85b;
border-top: 1px solid #a59;
width: 80%;
height: 0.1em;
position: absolute;
top: calc(0.45em - 1px);
margin-left: 10px;
}

Красным выделила ширину линий — они могут быть одинаковыми по толщине и разными.

Синим в коде выделила цвет линий.

Оранжевым — длину линии.

Стиль 6

Оформление в виде заплатки.

.post h3 {
display: table;
width: 700px;
margin: 0 auto;
padding: 15px;
letter-spacing: 2px;
background: #9e4996;
border: 2px dashed white;
color: white;
box-shadow: 0 0 0 4px #9e4996;
}

Красным в коде выделила размер "заплатки".

Оранжевым — цвет фона.

Синим — цвет окантовки. Можно сделать цвет одинаковым с фоном, либо разным. Выглядеть оформление будет по-другому.

Зелёным — цвет штрихов.