Я бы сказал, что CSS 3.0 принес свой новый стиль. Самые распространенные черты этого стиля это тени и скругленные уголки. В этом посте я расскажу о тенях. В CSS 3.0 для создания теней используется свойство box-shadow. Оно имеет много параметров и выглядит так:
box-shadow: inset <смещение по x> <смещение по y> <радиус размытия> <растяжение> <цвет>;
inset и <растяжение> необязательные параметры и могут не указываться.
Расмотрим пример:
.class1 {
box-shadow: 0 0 20px #000000;
-moz-box-shadow: 0 0 20px #000000;
-webkit-box-shadow: 0 0 20px #000000;
margin: 50px;
width: 100px;
height: 100px;
background: #eee000;
border: 1px solid;
}Здесь я использую расширения CSS для браузеров: -moz- и -webkit-. Зачем они нужны можно прочитать здесь. Параметр inset направляет тень во внутрь элементный
.class2 {
box-shadow: inset 0 0 20px #000000;
-moz-box-shadow: inset 0 0 20px #000000;
-webkit-box-shadow: inset 0 0 20px #000000;
margin: 50px;
width: 100px;
height: 100px;
background: #eee000;
border: 1px solid;
}Также мы можем сместить нашу тень задавая параметры смещения по оси X и оси Y
.class3 {
box-shadow: 5px 5px 20px #000000;
-moz-box-shadow: 5px 5px 20px #000000;
-webkit-box-shadow: 5px 5px 20px #000000;
margin: 50px;
width: 100px;
height: 100px;
background: #eee000;
border: 1px solid;
}А вот растяжение, на мой взгляд, не совсем понятное свойство тени. На самом деле это изменение размера тени. Положительное значение увеличивает тень, отрицательное уменьшает. По умолчанию значение 0 и тень равна размеру элемента. Рассмотрим на примере: по середине блок с обычной тенью, справа с растянутой на 5px тенью, а слева с сжатой на 5px
.class4 {
box-shadow: 0 0 30px 5px #000000;
-moz-box-shadow: 0 0 30px 5px #000000;
-webkit-box-shadow: 0 0 30px 5px #000000;
margin: 50px;
width: 100px;
height: 100px;
background: #eee000;
border: 1px solid;
}.class5 {
box-shadow: 0 0 30px #000000;
-moz-box-shadow: 0 0 30px #000000;
-webkit-box-shadow: 0 0 30px #000000;
margin: 50px;
width: 100px;
height: 100px;
background: #eee000;
border: 1px solid;
}.class6 {
box-shadow: 0 0 30px -5px #000000;
-moz-box-shadow: 0 0 30px -5px #000000;
-webkit-box-shadow: 0 0 30px -5px #000000;
margin: 50px;
width: 100px;
height: 100px;
background: #eee000;
border: 1px solid;
}Отмена тени box-shadow: none; Можно использовать несколько теней, для этого нужно параметры для каждой тени перечислить через запятую. Internet Exploer 8 и ниже не поддерживает тени. В остальных распространенных браузерах последних версий все работает.
Использовать CSS 3.0 пока не рекомендовано, кроссбраузерность будет мего хромать, хотя и фишек интересных у него много:)
Тени я делал раньше по-другому, правда объект и держался на трех дивах, а вместо тени на задний план изображение грузилось – размытый черный квадрат. Единственный минус – объект не мог быть больше, чем паттерн тени, хотя меньше мог:) Зато надежно работает на любых браузерах!
Распространенные версии Firefox, Opera, Chrome и Safari понимают тени, правда часто приходится использовать расширения. Проб леммы как всегда с IE. Даже IE8 c CSS 3.0 не работает. Но я считаю нужно двигаться впереть и пользоваться новыми технологиями. Для проблематичных браузеров можно добиваться только корректного отображения страниц. Пользователи должны сами заботится, чтобы у них стоял современный софт. А то многие до сих пор мучаются с поддержкой IE6, ему же 10 лет стукнуло! И чем дольше под него будут делать сайты, тем дольше он будет жить.
А вообще вопрос философский. И объяснить эту философию заказчикам не так просто 😐
Вот-вот, как раз речь про заказчиков и идет. Есть в интернете немало сервисов для проверки кроссбраузерности, и когда в одном из сотни браузеров, который был разработан индийскими школьниками (ничего против них не имею), вылезет криво, то отвечать все равно прийдется к тебе, хотя ты гарантируешь кроссбраузерность и валидность. Да и с ослом бывают нестыковки, у меня так было с ротатором на jquery, там тени делал с помощью css 3.0, а в осле зараза теней нет 😥 Так что кто как воспринимает это! 😉
Еще говорят, что клиент всегда прав 👿
Вообще нужно объяснять заказчику, что можно сделать чтоб работало в Netscape Navigator 1.0 и Internet Explorer 1.0, а можно сделать классно, красиво и правильно. А пользователей со старым софтом редиректить например на Яндекс Браузеры. Там ему раскроют глаза. 8)
Ага, заказчик прав полюбому, согласен! Так что мне с этим повезло, я не касаюсь темы верстки в последнее время, а разрабатываю веб-приложения – это намного веселее ❗ Сайты «от и до» – только в свободное время.
Но все же, я пока временю с CSS3, штудирую когда добираюсь, потом то все равно нужно будет включать его по полной. Ну а вариант с редиректом на яндекс.браузеры, как мне кажется не даст хорошего эффекта:
— во-первых человек уйдет с ресурса и врятли вернется туда, потому что будет занят установкой нового браузера (если конечно будет ставить)
— во-вторых установка нового часто связана с проблемой переноса данных из старого, проще говоря – у меня пару сотен закладок, все пароли и тому подобное, и мне сейчас так лень все это переносить.
Но вариант развития событий, который думаю покроет все предыдущие, это просто делать альтернативные поправки в стилях для разных браузеров – так везде реализуют кроссбраузерность, и как мне кажется, это самый лучший вариант на данный момент 😉