Всем привет! Сегодня я покажу простой пример о том, как сделать вдавленный текст на чистом CSS3 .
Всем привет! Сегодня я покажу простой пример о том, как сделать вдавленный текст на чистом CSS3.
HTML разметка довольно проста.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Вдавленный текст</title>
</head>
<body>
<div class="wrapper">
<p>Вдавленный текст</p>
</div>
</body>
</html>
Но и CSS код не сложнее
body {
background: #222;
color: #131313;
font-size: 200px;
}
.wrapper p {
text-align: center;
text-transform: uppercase;
text-shadow: 3px 3px 5px #2c2c2c;
}
Вся суть в том, чтобы сделать цвет текста темнее, чем фоновый, а цвет тени, наоборот, сделать светлее фонового цвета, и тогда мы получим эффект вдавленного текст на CSS3.
Итак, спасибо за внимание и удачи!
