[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Общая информация » Вопросы по uCoz » Как сделать блок с тенью при помощи CSS?
Как сделать блок с тенью при помощи CSS?
RedStarДата: Пятница, 15.08.2014, 17:20 | Сообщение # 1
Полковник
Группа: Администраторы
Сообщений: 170
Репутация: 0
Статус: Offline
Сделаем тень CSS параметрами: -webkit-box-shadow и -moz-box-shadow

Рассмотрим эффект тени в css для блочных элементов, а именно для блоков, обозначаемых HTML тегами
.

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

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

Пример 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>

В итоге блок
отбрасывает тень:


Браузер Internet Explorer ранних версий не понимает CSS атрибут box-shadow, вместо него пишем следующий код:
filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5,
offY=5, color=#bdbdbd);
и 
filter: progid:DXImageTransform.Microsoft.shadow(direction=120,
color=#bdbdbd, strength=10);

Экспериментируйте со значениями box-shadow, чтобы добиться оптимального результата.
 
Форум » Общая информация » Вопросы по uCoz » Как сделать блок с тенью при помощи CSS?
Страница 1 из 11
Поиск:


Copyright "IPC" © 2008
Хостинг от uCoz