CSS 3.0 вдавленный текст и текст с тенью (text-shadow)
Благодаря свойству CSS 3.0 text-shadow можно сделать так:
Хотя последний блок сделан с добавочным кодом border-radius и box-shadow, но обо всем по порядку.
Свойство text-shadow имеет следующие параметры:
text-shadow: x y radius color;
X и Y это координаты, radius это радиус тени, ну и color - собственно цвет.
Как добиться эффекта как на картинке? Очень просто, смотрите код. Сложного ничего нет.
<html><body>
<style type="text/css">
body {
font: bold 18px/20px Arial;
}
.shadow, .embossed, .embossed-bonus {
width: 300px;
margin: 15px;
padding: 10px;
}
.shadow {
background: #eee;
text-shadow: 0 0 5px #333;
color: #fff;
}
.embossed, .embossed-bonus {
background: #6a6a6a;
color: #fff;
text-shadow:0 -1px 0px #000;
}
.embossed-bonus {
-moz-box-shadow: 0 0 7px #000000 inset;
-webkit-box-shadow: 0 0 7px #000000 inset;
box-shadow: 0 0 7px #000000 inset;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
</style>
<div class="shadow">
Текст с тенью
</div>
<div class="embossed">
Вдавленный текст
</div>
<div class="embossed-bonus">
Вдавленный текст
</div>
</body></html>
(8 votes, average: 4,50 из 5)
Loading ...Игорь Моисеев о 12 Сентябрь, 2010
1 Комментарий
Loading ...
1 Комментарий на «CSS 3.0 вдавленный текст и текст с тенью (text-shadow)»
Вот спасибо.. конечно для новичка еще сложновато, так как много классов левых на первый взгляд, но в принципе разобраться можно..
Ответить