RedStar | Дата: Пятница, 15.08.2014, 17:20 | Сообщение # 1 |
Полковник
Группа: Администраторы
Сообщений: 170
Статус: 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, чтобы добиться оптимального результата.
|
|
| |