В посте представлены некоторые эффекты на основе text-shadow.
Сочетая тени, градиенты и псевдо-элементы можно сделать много интересного.
Выдавленный текст
H1 {
text-shadow: 1px 1px 1px silver,
-1px 1px 1px silver;
color: white;
transition: all .5s;
}
Контуры
H1 {
font-size: 50px;
font-weight: normal;
cursor: pointer;
text-shadow: -1px -1px #eee,
-2px -2px #eee,
-1px 1px #eee,
-2px 2px #eee,
1px 1px #eee,
2px 2px #eee,
1px -1px #eee,
2px -2px #eee,
-3px -3px 2px #BBB,
-3px 3px 2px #BBB,
3px 3px 2px #BBB,
3px -3px 2px #BBB;
color: steelblue;
transition: all 1s;
}
Живое подчеркивание
H1 {
display: inline-block;
text-shadow: 1px 1px 1px white,
1px -1px 1px white,
-1px 1px 1px white,
-1px -1px 1px white;
color: steelblue;
transition: all 1s;
}
H1:after {
content: "";
display: block;
position: relative;
z-index: -1;
width: 100%;
margin: auto;
border-bottom: 3px solid steelblue;
bottom: .15em;
transition: all 1s;
}
H1:hover:after {
width: 0%;
border-bottom-width: 1px;
}
Подводка
H1 {
text-shadow: 1px 1px white,
2px 2px #777;
color: #333;
transition: all 1s;
}
H1:hover {
text-shadow: 1px 1px white,
2px 2px tomato;
color: crimson;
}