23 ноя 2012
Добавляем тень для элемента с помощью CSS3
vllzl Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Добавляем тень для элемента с помощью CSS3 .

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Добавляем тень для элемента с помощью CSS3
В этом уроке я расскажу, как пользоваться свойством box-shadow.

Подробнее о box-shadow можно узнать на сайте htmlbook.ru

1. Создаем HTML-файл, вставляем код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>CSS тени</title>
    <meta http-equiv="content-type"
        content="text/html;charset=windows-1251" />
<style type="text/css">
body{background:pink}
#content{width:600px;margin:0 auto;background:white;box-shadow:0 0 10px rgba(0,0,0,0.5);-moz-box-shadow:0 0 10px rgba(0,0,0,0.5);padding:20px;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.5)}
</style>
</head>

<body>

     <div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus semper adipiscing. Aliquam posuere, sapien sit amet lacinia lobortis, dui dolor facilisis tellus, eu consectetur nisl felis in leo. Donec vehicula commodo dolor eget dignissim. Maecenas tempus, felis nec fringilla volutpat, tellus magna dictum eros, sit amet adipiscing mauris nibh vitae lectus. Fusce pharetra convallis pulvinar. Phasellus suscipit, felis sed tincidunt pharetra, risus dolor vehicula ligula, eget egestas lacus sapien vel urna. Sed sit amet enim eu leo mollis lobortis nec et neque. Pellentesque non libero sit amet tortor tincidunt porta vitae et libero. Pellentesque ac dui mi. Duis egestas ligula vel lacus elementum porttitor at ac leo. Etiam pellentesque nisi aliquet ligula vulputate lacinia. Nullam sit amet ante ac turpis ultrices rhoncus. Donec aliquam, turpis vel euismod semper, elit urna gravida velit, at sollicitudin lorem nulla eget sem. Nulla facilisi. Etiam nec rutrum nibh.
</div>

</body>
</html>

Должно получиться так:
Добавляем тень для элемента с помощью CSS3

Для свойства box-shadow созданы свойства с префиксами -moz- и -webkit-, они нужны для работы в Firefox, Safari, Chrome.

Теперь синтаксис свойства:

box-shadow:<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>


Как вы видете, все просто.










Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.