|
/*Сброс*/
* {margin: 0; padding: 0;}
html, body {height: 100%;}
body {
background:
#B1E3E2;
box-shadow:
inset 0 0 100px 20px #80D0CF;
text-align:
center;
}
h1 {
display:
inline-block;
font-size:
14px;
line-height:
28px;
color:
#8699A0;
text-shadow:
0 0 1px #758890;
margin:
120px 0;
font-family:
arial, verdana;
outline:
none;
padding:
14px 30px;
position:
relative;
text-transform:
uppercase;
/* Небольшие тени для 3D
эффекта */
box-shadow:
0
0 30px 0 rgba(0, 0, 0, 0.1),
0
36px 0 -18px #B1E3E2;
}
/* Концы ленты*/
h1:before {
content:
'';
position:
absolute;
top:
18px;
left:
-15%;
z-index: -1;
width: 130%;
/* Используем логику треугольника
- 2 боковые рамки и высота 0. Таким образом, получаются треугольники слева и
справа */
height: 0;
border: 28px solid rgba(0, 0,
0, 0);
border-left: 28px solid #B1E3E2;
border-right:
28px solid #B1E3E2;
}
/*
Псевдоэлемент after будет негативом для ленты, чтобы заквершить построение
эффекта*/
h1:after {
content:
'';
width:
100%;
height:
0;
position:
absolute;
top:
100%; left: 0;
z-index: -1;
/* Высота верхней рамки такая
же как и ширина левой и правой рамок для плавного эффекта. Высота верхней
рамки также одинаковая сос смещением элемента :before сверху*/
border-top: 18px solid #99acb2;
border-left:
18px solid transparent;
border-right:
18px solid transparent;
}
h1,
h1:before {
/*Многоцветный фон -
используем комбинацию 4 фонов для построения эффекта */
background-image:
/* 2 серых рамки */
linear-gradient(
transparent
8%,
rgba(0,
0, 0, 0.1) 8%,
rgba(0,
0, 0, 0.1) 14%,
transparent
14%,
transparent
86%,
rgba(0,
0, 0, 0.1) 86%,
rgba(0, 0, 0, 0.1) 92%,
transparent
92%
),
/* Белый
глянцевый градиент */
linear-gradient(
rgba(255,
255, 255, 0.75),
rgba(255,
255, 255, 0)
),
/*
Тонкие полоски */
linear-gradient(
45deg,
transparent
40%,
rgba(0,
0, 0, 0.1) 40%,
rgba(0,
0, 0, 0.1) 60%,
transparent
60%
),
/*
Белая основа */
linear-gradient(white,
white);
background-size:
cover,
/* Рамки */
cover,
/* Белый глянец */
4px 4px, /* Тонкие полоски */
cover; /* Белая
основа */
}
h1, h1:before, h1:after {
box-sizing: border-box;
/* Выводим рамки по концам
ленты */
background-origin: border-box;
}
|
