CSS тень текста или как сделать текст с тенью

+ -
+4
CSS атрибуты и значения, определяющие тень для текста

Код примера:

<head>
<title>CSS текст с тенью на примере заголовка</title>
</head>
<body>
<h1 style="text-shadow:#6699ff 1px 1px 1px">CSS тень текста на примере заголовка</h1>
</body>


Рассмотрим строчку кода text-shadow:#ff9933 1px 1px 1px. Значение #ff9933 определяет цвет тени, участок кода 1px 1px 1px определяет соответственно: смещение тени вправо, смещение тени вниз и размытие тени.

Сместим тень текста по горизонтали и по вертикали на отрицательную величину:

CSS тень текста или как сделать текст с тенью


Код примера:

<head>
<title>CSS тень текста на примере заголовка</title>
</head>
<body>
<h1 style="text-shadow:#cccccc -15px -20px 2px">Как сделать текст с тенью при помощи CSS?
</h1>
</body>


Теперь вы знаете, как сделать эффект «Текст с тенью» при помощи CSS.

Тень блока в CSS посредством box-shadow

Сделаем тень CSS параметрами: -webkit-box-shadow и -moz-box-shadow

Продолжаем изучать новые свойства Каскадных таблиц стилей. Рассмотрим эффект тени в css для блочных элементов, а именно для блоков, обозначаемых HTML тегами
<div> </div>
.

Эффект красивой тени зависит скорее от вашего художественного вкуса, но также нужно учитывать такой момент, как кроссбраузерность верстки. Например, CSS параметр box-shadow определяет свойства тени блока для всех современных регулярно обновляемых браузеров, но в дополнение имеет свои расширения для браузеров Chrome, Safari, Firefox – это: -webkit-box-shadow и -moz-box-shadow.

Теперь предлагаю от слов перейти к делу и на конкретном примере посмотреть свойства CSS тени.

<title>Как сделать эффект тени в css</title>
<style type="text/css">
div.div-shadow {background:#47a; width:400px; height:80px; 
/* Firefox */
-moz-box-shadow:5px 5px 10px #bdbdbd; 
/* Chrome и Safari */
-webkit-box-shadow:5px 5px 10px #bdbdbd; 
/* Код CSS тени блока для абсолютно всех браузеров новых версий */
box-shadow:5px 5px 10px #bdbdbd}
</style>
</head>
<body>
<div class="div-shadow"> </div>


В итоге блок
<div class="div-shadow"> </div>
отбрасывает тень.

Экспериментируйте со значениями box-shadow, чтобы добиться оптимального результата.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Комментариев 0