Независимо от того, какой сайт или веб приложение разрабатывается, всегда возникает необходимость создавать стили для заголовков, подобных h1 или h2. В данном уроке мы рассмотрим несколько эффектов, которые применяются для заголовков, с использованием псевдо-элементов.

Почему применяются псевдо-элементы? Ответ прост: не нужна дополнительная разметка.

HTML

<h1 class="headline1">Прими урок со смирением</h1>

Никакой специальной разметки. Обычный заголовок с указанием класса.

CSS
Далее мы будем использовать элемент body в качестве основного контейнера:

body{
    width: 60%;
    margin: 50px auto;
    padding: 15px;
    position: relative; /*необходимо для заголовка 4*/
    z-index: 0; /* необходимо для заголовка 4*/    
    border: 7px solid #cecece;
    border: 7px solid rgba(0,0,0,.05);
    background: #fff;
    background-clip: padding-box;
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .5);
    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 определяет, будет ли фон элемента (цвет или изображение) взаимодействовать с ниже лежащими слоями.

Заголовок 1

Вот такой простой и приятный эффект получается с использованием свойства 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

.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

.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

.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);
}

Добавлено: 27 Апреля 2018 17:20:15 Добавил: Андрей Ковальчук Нравится 0

Добавить