23
ноя
2012
В этом уроке я расскажу, как пользоваться свойством box-shadow.
Подробнее о box-shadow можно узнать на сайте htmlbook.ru
1. Создаем HTML-файл, вставляем код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>CSS тени</title>
<meta https-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>
Должно получиться так:
Для свойства box-shadow созданы свойства с префиксами -moz- и -webkit-, они нужны для работы в Firefox, Safari, Chrome.
Теперь синтаксис свойства:
box-shadow:<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>
Как вы видете, все просто.
Добавляем тень для элемента с помощью CSS3
В этом уроке я расскажу, как пользоваться свойством box-shadow.
Подробнее о box-shadow можно узнать на сайте htmlbook.ru
1. Создаем HTML-файл, вставляем код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>CSS тени</title>
<meta https-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>
Должно получиться так:
Для свойства box-shadow созданы свойства с префиксами -moz- и -webkit-, они нужны для работы в Firefox, Safari, Chrome.
Теперь синтаксис свойства:
box-shadow:<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>
Как вы видете, все просто.
|
|
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Datalife Engine
Релизы
WordPress
Joomla
Другие CMS
Web-Мастеру
Игры/Игровые CMSПоследние комментарии
-
Написал(а): SergTSY
В новости: QR Menu Maker v3.4.0 - бесконтактное меню ресторанаСсылки не рабочие.
Перезалейте, плз? -
Написал(а): anons01
В новости: Akeeba Backup Pro v9.9.2 - компонент резервного копирования для JoomlaUpload doesn't work -
Написал(а): sania4m
В новости: Aoxio v2.1 Nulled - скрипт для бронирования бизнес-услугустановка проходит , но не создается база данных -
Написал(а): Nibiru7
В новости: JRealtime Analytics v3.9.2 - компонент аналитики для Joomlaспасибо за -
Написал(а): jackxren88
В новости: Advanced Custom Fields Pro v2.7.7 - расширенные пользовательские поля для JoomlaМожет есть у кого-то решение как убрать "запрос на ключ"? -
Написал(а): Escudocu
В новости: YOO Glowbar v March 1, 2024 - Joomla шаблон для сайтов о красоте и модеБлагодарю за шаблон!!! -
Написал(а): sendinfo
В новости: Advanced Custom Fields Pro v2.7.7 - расширенные пользовательские поля для JoomlaВиндоус ругается на вирус! Проверьте архив. -
Написал(а): pmvb
В новости: Advanced Module Manager Pro v10.0.18 - расширенный менеджер модулей JoomlaADVANCED MODULE MANAGER PRO V10.0.18 просит ключь???