Сегодня немного поэкспериментируем с 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 и никакого мошенничества.
Главное – фантазия. Экспериментируйте!