Содержание
Первое, на что обращает внимание посетитель вашего сайта, это заголовки статей. Чем интереснее оформлен заголовок, тем больше он привлекает внимания, и тем больше шансов, что статья будет прочитана.
Многие вебмастера, следуя этому правилу, перегружают заголовки своих статей мерцающей анимацией, нечитаемыми шрифтами и задними фонами токсичных цветов. Делать этого не стоит, т. к. такое оформление вызывает зрительное напряжение и только отпугивает пользователей. Чтобы этого не происходило и при этом заголовок привлекал внимание посетителей сайта, достаточно добавить несколько простых геометрических css - фигур с помощью псевдоэлементов :before и :after.
Вариант 1
HTML -разметка:
CSS - код:
{padding:10px;width:300px;height:100px;margin:0 auto;text-align:center;position:relative} /*задаем размеры, выравнивание и отступы блоков для всех примеров*/
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-разметка:
CSS - код:
.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 -разметка:
CSS - код:
position: absolute;
height: 22px;
width: 5px;
background:rgb(81, 227, 213);
top: 9%;
left: 21%;}
Вариант 4
HTML -разметка:
CSS - код:
.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 -разметка:
CSS - код:
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 -разметка:
CSS - код:
position: absolute;
height: 2px;
width: 100px;
background:rgb(81, 227, 213);
top: 130%;
margin: 0 auto;
left: 0;
right: 0;}
Вариант 7
HTML -разметка:
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 -разметка:
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 -разметка:
CSS - код:
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 -разметка:
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%;
}
На этом все. Надеюсь, что статья была вам полезной!
Комментарии
P_GG
(22.10.2020 - 11:09)Спасибо. Один вариант понравился и подал идею ))