Домой / Рецепты CSS / Эффект тени для текста в css
Эффект тени для текста в css

Эффект тени для текста в css

Простой, но в тоже время красивый и оригинальный эффект тени для текста.

Эффект тени реализован с помощью CSS свойства text-shadow.

Демо

HTML

<div class="plate">
<p class="script"><span>The Real</span></p>
<p class="shadow text1">AMERICAN</p>
<p class="shadow text2">BBQ</p>
<p class="shadow text3">SAUCE</p>
<p class="script"><span>by Remia</span></p>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Arvo:700);
@import url(http://fonts.googleapis.com/css?family=Seaweed+Script);
body {
background-color: #222;
}
.plate {
width: 410px;
margin: 10% auto;
}
.shadow {
color: #fff;
font-family: Arvo;
font-weight: bold;
text-shadow:
-3px -3px 0 #222,
3px -3px 0 #222,
-3px 3px 0 #222,
3px 3px 0 #222,
4px 4px 0 #fff,
5px 5px 0 #fff,
6px 6px 0 #fff,
7px 7px 0 #fff;
line-height: 0.8em;
letter-spacing: 0.1em;
transform: scaleY(0.7);
-webkit-transform: scaleY(0.7);
-moz-transform: scaleY(0.7);
margin:0;
text-align: center;
}
.script {
font-family: "Seaweed Script";
color: #fff;
text-align: center;
font-size: 40px;
position: relative;
margin:0;
}
.script span {
background-color: #222;
padding: 0 0.3em;
}
.script:before {
content:"";
display: block;
position: absolute;
z-index:-1;
top: 50%;
width: 100%;
border-bottom: 3px solid #fff;
}
.text1 {
font-size: 60px;
}
.text2 {
font-size: 169px;
}
.text3 {
font-size: 100px;
}

Простой, но в тоже время красивый и оригинальный эффект тени для текста. Эффект тени реализован с помощью CSS свойства text-shadow. HTML CSS @import url(http://fonts.googleapis.com/css?family=Arvo:700); @import url(http://fonts.googleapis.com/css?family=Seaweed+Script); body { background-color: #222; } .plate { width: 410px; margin: 10% auto; } .shadow { color: #fff; font-family: Arvo; font-weight: bold; text-shadow: -3px -3px 0 #222, 3px -3px 0 #222, -3px 3px 0 #222, 3px 3px 0 #222, 4px 4px 0 #fff, 5px 5px 0 #fff, 6px 6px 0 #fff, 7px 7px&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.88 ( 2 голосов )
90

Оставить комментарий

Ваш email не будет опубликован.

*