Стили заголовков и подзаголовков Блоггер
Выделить в статье заголовки применяя различные способы — подчёркивание, тени, рамки и многое другое — не сложно, даже если вы не смыслите в кодах. Можно комбинировать несколько вариантов оформления, например, ховер-эффект и рамка, градиент и лента и так далее. Хочу заметить, выделять заголовки ярко и цветасто, добавлять движущиеся эффекты, лучше в развлекательные сайты, если сайт серьёзный, то достаточно выделить заголовки цветом, подчёркиванием и шрифтом.
Оформление заголовков
Давайте начнём со шрифтов. Если сделать у заголовков красивые шрифты, то другие украшения могут и не понадобиться. Поставив на заголовки витиеватый или декоративный шрифт, то другое украшение, будь то рамка или подчёркивание, затмят его. О том как добавлять шрифты с https://fonts.google.com/ можно прочитать здесь, но шрифты можно брать не только с этого сайта.Шрифты
Шрифты в заголовки и подзаголовки добавляются в шаблон, выше тега ]]></b:skin>
Не забываем, что коды даны для оптимизированных шаблонов. Если шаблон не оптимизировался, то нужно заменить h1 на h3
Код выглядит так:
.post h1 {Вместо h1 можно поставить нужный вам заголовок.
font-family: ' Calligraph', arial;
}
А теперь о том, где взять шрифты.
Ищем в сети сайты со шрифтами. Заходим, например, на https://allfont.ru/. Здесь русских шрифтов много. В настройках отмечаем, что ищем кириллические шрифты и понравившийся добавляем в шаблон.
- В открывшимся окне копируем код и добавляем в шаблон после тега <head>
- Эти данные добавляем в код стилей и устанавливаем выше тега ]]></b:skin>
.post h1 {И, конечно, нам нужно будет для шрифта в код прописать стили.
font-family:'Shnobel';
}
Семейство шрифтов
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-widththin - тонкая линия
medium - средняя линия
thick - толстая линия
Другие параметры
Скругление углов у границ - border-radiusborder-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%);
}
Некоторые примеры оформления взяты из сайтов: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 {
...ваши стили...
Комментарии со спамом удаляются.