Сегодня немного поэкспериментируем с CSS стилями. Я подготовил для вас несколько примеров СSS-стилей для текста. Будет интересно. Эти стили можно применять к оформлению заголовков в тексте. Начинающему верстальщику и просто любителю CSS – на заметку.
Обычная тень
<p class="shadow1">KRASHENININ.TECH</p>
.shadow1 {
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
font-size: 50px;
font-family: Roboto;
font-weight: 700;
}
Вдавленный текст
<body> <p class="shadow1">KRASHENININ.TECH</p> </body>
body {
background: grey;
}
.shadow1 {
text-shadow: 1px 1px 3px rgba(255,255,255,0.1);
font-size: 50px;
font-family: Roboto;
font-weight: 700;
color: #646464;
}
Двойная тень (трики)
<p class="shadow3">KRASHENININ.TECH</p>
.shadow3 {
font-size: 50px;
font-family: Roboto;
font-weight: 700;
text-shadow: 3px 2px 0px #47cf73, 6px 6px 0px rgba(0,0,0,0.15);
}
3D текст
<p class="shadow3d">KRASHENININ.TECH</p>
.shadow3d {
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
font-size: 50px;
font-family: Roboto;
font-weight: 700;
color: #e1e2e4;
}
Как говорится, чистый CSS и никакого мошенничества.
Главное – фантазия. Экспериментируйте!
