10 вариантов оформления заголовков на сайте с помощью css

12152

Первое, на что обращает внимание посетитель вашего сайта, это заголовки статей.  Чем интереснее оформлен заголовок, тем больше он привлекает внимания, и тем больше шансов, что статья будет прочитана.

Многие вебмастера, следуя этому правилу, перегружают заголовки своих статей мерцающей анимацией, нечитаемыми шрифтами и задними фонами токсичных цветов. Делать этого не стоит, т. к. такое оформление вызывает зрительное напряжение и только отпугивает пользователей. Чтобы этого не происходило и при этом заголовок привлекал внимание посетителей сайта, достаточно добавить несколько простых геометрических css - фигур с помощью псевдоэлементов  :before и :after.

 

Вариант 1

HTML -разметка:

<div class=ex1><h1>Вариант 1</h1></div>

CSS - код:

.ex1,.ex2,.ex3,.ex4,.ex5,.ex6,.ex7,.ex8,.ex9,.ex10
{padding:10px;width:300px;height:100px;margin:0 auto;text-align:center;position:relative} /*задаем размеры, выравнивание и отступы блоков  для всех примеров*/
.ex1 h1:after {content: "";
position: absolute;
height: 2px;
width: 100px;
background:rgb(81, 227, 213);
top: 120%;
margin: 0 auto;
left: 0;
right: 0;}
.ex1 h1:before {content: "";
position: absolute;
height: 10px;
width: 10px;
background:rgb(81, 227, 213);
top: 105%;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
margin: 0 auto;
left: 0;
right: 0;}

Вариант 2

HTML-разметка:

<div class=ex2><h1>Вариант 2</h1></div>

CSS - код:

h1 {z-index:4}
.ex2 h1:first-letter {
color: #fff}
.ex2 h1:after {content: "";
position: absolute;
background:rgb(81, 227, 213);
height: 25px;
width: 25px;
transform:skewX(-20deg);
-webkit-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
top: 4%;
left: 24%;
z-index:-1 }

Вариант 3

HTML -разметка:

<div class=ex4><h1>Вариант 3</h1></div>

CSS - код:

.ex3 h1:after {content: "";
position: absolute;
height: 22px;
width: 5px;
background:rgb(81, 227, 213);
top: 9%;
left: 21%;}

Вариант 4

HTML -разметка:

<div class=ex4><h1>Вариант 4</h1></div>

CSS - код:

h1 {z-index:2}
.ex4 h1:after {content: "";
position: absolute;
height: 35px;
width: 35px;
border-radius: 120px;
border: 1px solid rgb(81, 227, 213);
top: -16%;
left: 22%;
z-index: -1}

 

Вариант 5

HTML -разметка:

<div class=ex5><h1>Вариант 5</h1></div>

CSS - код:

.ex5 h1:after {content: "";
position: absolute;
height: 2px;
width: 100px;
background:rgb(81, 227, 213);
top: -40%;
margin: 0 auto;
left: 0;
right: 0;}
.ex5 h1:before {content: "";
position: absolute;
height: 2px;
width: 100px;
background:rgb(81, 227, 213);
top: 140%;
margin: 0 auto;
left: 0;
right: 0;}

Вариант 6

HTML -разметка:

<div class=ex6><h1>Вариант 6</h1></div>

CSS - код:

.ex6 h1:after  {content: "";
position: absolute;
height: 2px;
width: 100px;
background:rgb(81, 227, 213);
top: 130%;
margin: 0 auto;
left: 0;
right: 0;}

Вариант 7

HTML -разметка:

<div class=ex7><h1>Вариант 7</h1></div>

CSS - код:

.ex7 h1:after  {content: "";
position: absolute;
background: rgb(81, 227, 213);
height: 2px;
width: 100px;
top: 115%;
margin: 0 auto;
left: 0;
right: 0;}

.ex7 h1 :before { content: "";
position: absolute;
background: rgb(81, 227, 213);
height: 2px;
width: 20px;
top: 135%;
margin: 0 auto;
left: 0;
right: 0}

Вариант 8

HTML -разметка:

<div class=ex8><h1><span>Вариант 8</span></h1></div>

CSS - код:

.ex8 h1 span:before
{position: absolute;
border: 1px solid rgb(81, 227, 213);
height: 11px;
transform: rotate(45deg);
width: 11px;
background: #fff;
top: 60%;
z-index: 2;
content: "";
margin: 0 auto;
right: 50%}

.ex8 h1 span:after {
position: absolute;
border: 1px solid rgb(81, 227, 213);
height: 11px;
transform: rotate(45deg);
width: 11px;
background: #fff;
top: 60%;
z-index: 2;
content: "";
margin: 0 auto;
left: 51.2%}

.ex8 h1:after {
background: rgb(81, 227, 213);
position: absolute;
height: 1px;
width: 100px;
top: 65%;
content: "";
margin: 0 auto;
left: 0;
right: 0;

Вариант 9

HTML -разметка:

<div class=ex9><h1><span>Вариант 9</span></h1></div>

CSS - код:

.ex9 h1:before {
background: rgb(81, 227, 213);
position: absolute;
height: 2px;
width: 100px;
top: 15%;
content: "";
margin: 0 auto;
left: 0;
right: 0;}.ex9 h1 span:before{
content: "";
position: absolute;
height: 10px;
width: 10px;
border: 1px solid rgb(81, 227, 213);
border-radius: 120px;
top: 16%;margin: 0 auto;
left: 0;
right: 0;}

.ex9 h1:after {
content: "";
background: rgb(81, 227, 213);
position: absolute;
height: 2px;
width: 100px;
top: 69%;
margin: 0 auto;
left: 0;
right: 0;}

.ex9 h1 span:after {
content: "";
position: absolute;
height: 10px;
width: 10px;
border: 1px solid rgb(81, 227, 213);
border-radius: 120px;
top: 59%;
margin: 0 auto;
left: 0;
right: 0;}

Вариант 10

HTML -разметка:

<div class=ex10><h1>Вариант 10</h1></div>

CSS - код:

.ex10 h1:before {
content: "";
position: absolute;
border: 10px solid transparent;
border-left: 10px solid rgb(81, 227, 213);
top: 23%;
margin: 0 auto;
left: 15%;
}

.ex10 h1:after {
content: "";
position: absolute;
border: 10px solid transparent;
border-right: 10px solid rgb(81, 227, 213);
top: 23%;
margin: 0 auto;
right: 15%;
}

На этом все. Надеюсь, что статья была вам полезной!

css

Комментарии

    P_GG

    (22.10.2020 - 11:09)

    Спасибо. Один вариант понравился и подал идею ))

Добавить комментарий

Ваш адрес email не будет опубликован.

*
code