Тени для текста и блоков.
В сегодняшней статье мы поговорим о том, как сделать тень у текста или блока с помощью CSS3.
Давайте для начала сделаем небольшую html разметку.
<html>
<head>
<meta charset="utf-8">
<title>Text-Shadow</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>
А теперь давайте зададим для неё стили:
body {
background: #ccc;
}
p {
font-size: 18px;
text-shadow: 0 1px 0 #eee;
}
Тень для текста задаётся с помощью свойства text-shadow, где первое значение - это отступ по горизонтали, второй - по вертикали, третий - размытие, а четвёртый параметр - это цвет тени. Если вы запустите данный пример, то увидите довольно-таки интересный эффект однопиксельной белой тени, который сейчас часто применяется.
Можно также задавать сразу несколько теней через запятую:
p {
text-shadow: 0 1px 0 #eee, 3px 3px 3px #000;
}
Теперь давайте поговорим о том, как задать тень для блока.
Для начала изменим нашу разметку
<html>
<head>
<meta charset="utf-8">
<title>Box-Shadow</title>
</head>
<body>
<div class="block"></div>
</body>
</html>
И зададим какие-нибудь первоначальные стили
.block {
background: #333;
width: 200px;
height: 200px;
margin: 20px;
}
Теперь зададим нашему блоку тень с помощью box-shadow
.block {
background: #333;
width: 200px;
height: 200px;
margin: 20px;
box-shadow: 7px 1px 7px 5px #555, -7px 1px 7px 5px #c1ff05;
}
Абсолютно всё, что я говорил о тенях для текста, справедливо и для теней блоков. В данном примере мы задали первую тень со смещением по оси x на 7px, по оси y на 1px, размытием 7px, и светло-черным цветом. Со второй тенью всё то же самое, только смещение по оси x будет не вправо, а влево, т.к. мы задали отрицательное число. Как вы могли заметить, есть ещё четвёртый параметр, который обозначает радиус распрастранения тени, но он используется нечасто.
Это были внешние тени, но есть ещё и внутренние
.block {
box-shadow: inset 9px 9px 3px #112233;
}
Как видите, чтобы тень стала внутренней, нужно всего лишь добавить в начале слово inset.
На этом всё для сегодняшней статьи. Удачи!
-
Создано 03.04.2014 08:00:00
-
Михаил Русаков
Комментарии (4):
Нужно заметить, что место простого #цвета можно и использовать rgba цвета, в которых можно указать и прозрачность данного цвета.
Ответить
О задании цветов будет рассказываться в одной из следующих статей
Ответить
Ура)... жаль примеров не приводится...
Ответить
Михаил можно ли с примерами
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.