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

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

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

Стиль 1

Стиль 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

При наведении курсора у оформления меняется цвет полоски.
Стиль 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

Оформление с ховер-эффектом, при наведении курсора цвет линии меняется.
Стиль 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

Стиль 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

Заголовок будет в левой части и от него будет тянуться двойная линия, которую можно сделать одноцветной или двухцветной.
Стиль 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

Оформление в виде заплатки.
Стиль 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;
}
Красным в коде выделила размер "заплатки".
Оранжевым — цвет фона.
Синим — цвет окантовки. Можно сделать цвет одинаковым с фоном, либо разным. Выглядеть оформление будет по-другому.
Зелёным — цвет штрихов. 

Ваши комментарии:

Комментарии со спамом удаляются.