Если вы разрабатываете веб-сайт или веб-приложение, вам понадобятся пользовательские стили для заголовков, таких как h1 или h2. В этой статье вы узнаете, как создавать интересные эффекты заголовков, используя псевдоэлементы CSS.
Вступление
Итак, почему псевдоэлементы ? Ответ очень прост: нет необходимости добавлять дополнительную разметку. Это идеально подходит для заголовка, который мы собираемся создать здесь.
HTML
<h1 class="headline1">I took lessons</h1>
Как вы можете видеть выше, здесь нет ракетостроения. Просто простой заголовок HTML с классом CSS, который будет правильно его стилизовать. Все остальные заголовки используют аналогичную структуру HTML, поэтому это не может быть проще.
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:700" rel='stylesheet' type='text/css'>
Кроме того, для этой демонстрации мы будем использовать пользовательский шрифт Google .
CSS
Далее, мы будем использовать тело в качестве нашей главной оболочки:
body{
width: 60%;
margin: 50px auto;
padding: 15px;
position: relative; /*needed for heading4 rule*/
z-index: 0; /* again, just for heading4 rule*/
border: 7px solid #cecece;
border: 7px solid rgba(0,0,0,.05);
background: #fff;
background-clip: padding-box;
box-shadow: 0 0 2px rgba(0, 0, 0, .5);
}
h1{
font-family: 'Droid Sans', sans-serif;
font-size: 22px;
}
Заметили объявление background-clip: padding-box? Это поможет вам добиться крутого эффекта: прозрачные рамки для основной оболочки. По сути, CSS-свойство background-clip указывает, распространяется ли фон элемента, цвет или изображение, под его границей.
Поддержка браузером фонового клипа: Safari 5+, Chrome 7+, Firefox 3.6+, Opera 10+, IE 9+
Заголовок 1
Ниже приведен простой и красивый эффект, созданный с помощью CSS-свойства border:
.headline1 {
border-bottom: 1px dashed #aaa;
border-left: 7px solid #aaa;
border-left: 7px solid rgba(0,0,0,.2);
margin: 0 -15px 15px -22px;
padding: 5px 15px;
}
Заголовок 2
Этот стиль сделан с использованием треугольной формы CSS, вы уже видели это здесь :
.headline2 {
border-bottom: 1px solid #aaa;
margin: 15px 0;
padding: 5px 0;
position: relative;
}
.headline2:before,
.headline2:after{
content: '';
border-right: 20px solid #fff;
border-top: 15px solid #aaa;
bottom: -15px;
position: absolute;
left: 25px;
}
.headline2:after{
border-top-color: #fff;
border-right-color: transparent;
bottom: -13px;
left: 26px;
}
Заголовок 3
Приведенный ниже стиль заголовка HTML создается с использованием эффекта ленты :
.headline3{
position: relative;
margin-left: -22px; /* 15px padding + 7px border ribbon shadow*/
margin-right: -22px;
padding: 15px;
background: #e5e5e5;
background: -moz-linear-gradient(#f5f5f5, #e5e5e5);
background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
background: -webkit-linear-gradient(#f5f5f5, #e5e5e5);
background: -o-linear-gradient(#f5f5f5, #e5e5e5);
background: -ms-linear-gradient(#f5f5f5, #e5e5e5);
background: linear-gradient(#f5f5f5, #e5e5e5);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset;
-moz-box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset;
box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset;
text-shadow: 0 1px 0 #fff;
}
.headline3:before, .headline3:after{
position: absolute;
left: 0;
bottom: -6px;
content:'';
border-top: 6px solid #555;
border-left: 6px solid transparent;
}
.headline3:before{
border-top: 6px solid #555;
border-right: 6px solid transparent;
border-left: none;
left: auto;
right: 0;
bottom: -6px;
}
Заголовок 4
Используя box-shadow, вы можете создать несколько гладких эффектов :
.headline4{
position: relative;
border-color: #eee;
border-style: solid;
border-width: 5px 5px 5px 0;
background: #fff;
margin: 0 0 15px -15px;
padding: 5px 15px;
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3);
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}
.headline4:after
{
content: "";
position: absolute;
z-index: -1;
bottom: 15px;
right: 15px;
width: 70%;
height: 10px;
background: rgba(0, 0, 0, .7);
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
box-shadow: 0 15px 10px rgba(0, 0, 0, .7);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}
Вывод
Надеюсь, вам понравились мои примеры заголовков, и если у вас есть еще какие-нибудь интересные, добавьте свои мысли нам. Спасибо, что прочитали!