Итак, мы узнали о тенях все, и теперь вы, вероятно, захотите создать тени для всех элементов в своем документе. Свойство box-shadow специально предназначено для добавления теней к полям. Если вы попробуете применить данный эффект, например, к элементу <span>, то тень появится у невидимого поля, занимаемого этим элементом, а не у его содержимого. Для добавления теней к фигурам неправильной формы, то есть текстовым символам, используется особое свойство text-shadow.
Листинг 3.9. Добавление тени к заголовку
Body {
Text-align: center;
}
#mainbox {
Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;
-moz-border-radius: 20px;
-webkit-border-radius: 20px; border-radius: 20px;
-moz-box-shadow: rgb(150,150,150) 5px 5px 10px; — webkit-box-shadow: rgb(150,150,150) 5px 5px 10px; box-shadow: rgb(150,150,150) 5px 5px 10px;
}
#title {
Font: bold 36px verdana, sans-serif; text-shadow: rgb(0,0,150) 3px 3px 5px;
}
Значения, которые принимает свойство text-shadow, аналогичны значениям box-shadow. Можно задать цвет тени, расстояние от объекта по горизонтали и вертикали, а также радиус размытия.
В листинге 3.9 синяя тень добавлена к заголовку из нашего шаблона. Она находится на расстоянии 3 пиксела от букв, а радиус ее размытия равен 5 пикселам.
Добавить комментарий