Привет! Может Вас когда-то интересовало, как в верстке веб-сайтов делают тени для объектов без использования изображений? Если да, тогда не переключайтесь!)
В этом нам поможет, как Вы уже догадались по заголовку, CSS3, а именно - селектор "box-shadow".
Что он может?
А может он добавить тень к объекту с заданными сдвигами по ширине/высоте, радиусом размытия, растяжения и цвета тени. Это панацея для большинства верстальщиков, которые ненавидят резать и верстать разукрашенные уголки и бордеры объектов.
Смотрим пример:
box-shadow:0 0 10px 0 #555555; -webkit-box-shadow:0 0 10px 0 #555555; -moz-box-shadow:0 0 10px 0 #555555;
Как Вы видете указаны 4 значения и цвет:
0 0 10px 0 #555555;
Первое значение (у меня выставлено "0") - сдвиг на X px по горизонтали;
Второе значение - сдвиг на X px по вертикали;
Третье значение (10px) - радиус размытия (X px);
Четвертое значение - радиус растяжения тени (X px);
Ну, и пятое значение - это цвет.
Еще можно направить тень внутрь объекта, для этого нужно указать "inset":
box-shadow:inset 0 0 10px 0 #555555;
Браузеры, которые на данный момент поддерживают это свойство: Firefox 3.6.3 (начиная с 3.5); Opera 10.51 (10.50); Chrome 4.1.249.1045; Safari 4.0.4.
Конечно же, кто ориентирован уже верстать веб-сайты на CSS3, может смело начинать, но и не забывать, что еще не все браузеры поддерживают его и часть пользователей не увидят всех тонкостей в отображении страниц.
Что Вы скажете по этому поводу?
ФИ: Михайленко Олег.
-webkit-box-shadow – параметр растяжения убери, и будет тебе счастье с сафари
“Браузеры, которые на данный момент поддерживают это свойство: Firefox 3.6.3; Opera 10.51″
Поправочка: Firefox 3.5; Opera 10.5
Ну, я тестил на этих версиях, потому и написал их
Хммм, риальнЭ, заработало в Сафари без растяжения)))
Спасибо! Внес поправки
И все бы хорошо, но судя по демке, в IE не только пропадает тень – это полностью ожидаемо, но кроме того прыгает еще и размер шрифта и начертание. А вот это уже совсем мрачно и на практике почти неприменимо.
Так а я ж и не включил IE в список поддерживаемых браузеров
У меня шрифт нормально отображается в IE8. У тебя, наверное, версия ниже. Тем более можно покопаться, что там не так со шрифтом, я Демку быстро набросал, чтобы показать свойство “box-shadow” в действии и со шрифтом особо не заворачивался, так что мог что-то упустить)
Нет, я ж и не говорю, что в ИЕ оно будет поддерживаться
Я о том, что в ИЕ при этом слишком сильно меняется вывод, а это – уже станет проблемой.
Не-а, тот же ИЕ8.
Ну ты ж сразу не сказал, что это “по-быстрому”
Тогда пардон!)) Я весь акцент делал на свойство. А текст-рыба, чтобы было все наглядно))
Но все же, не могу понять, у меня в 8-й версии все нормально с текстом
Та ниче, догадаться ж можно
Смотри, у меня вот так:
FF 3.6: http://www.proofsite.com.ua/tmp/FF-3-6.png
IE8: http://www.proofsite.com.ua/tmp/IE-8.png
Хммм…
Я вот посмотрел в код, и увидел, что не указал какое семейство шрифтов использовать на странице. Значит, современные браузеры и IE используют разные семейства.
А так и есть
Шикарная функция, жаль, что приходится подстраиваться не только под современные браузеры, а под различного рода IE6 для проектов заказчиков. Скорее бы все эти доисторические версии просто закончили своё существование.
Пойду что ли протестирую…
Ну если подстраиваться под старые версии Ослика IE, нужно резать макеты и забыть за это свойство))))
PIE.htc – решает проблему IE, если надо сдеть 10-20 блоков с тенью , справлется на “ура” , – когда больше есть не большие задержки при рендере страници.
Спасибо! Когда-то слышал об этом, но с головы совсем вылетело.
Все никак не могу нарадоваться на ваши советы. Красота, я полагаю что в новом дизайне моего блога это будет применено.
Хотя помня предыдущие ваши посты, моего блога не хватит чтобы все что я хочу воплотить в жизнь (
Я рад, что Вам нравятся мои посты
А почему это не хватит Вашего блога? Что мешает?)
З.Ы. Только учтите, что CSS3 будут понимать только современные браузеры, а большинство пользователей Сети, которые используют, пока что, IE, не насладятся красотой “передовых технологий”)
Про поддержку css3 я знаю. Я купил еще пару лет назад книжку про css3. Мне было очень интересно узнать какие там свойства добавили. Разумеется в действии я их так и не увидел. Тогда вообще не один браузер это не поддерживал.
Моего блога не хватит, чтобы все ваши интересные советы применить, ну хотя бы потому что надо выдерживать определенный стиль, а не делать кашу.
PS IE9 поддерживает css3
Выйдет он правда не скоро, но преальфа девелоперскую версию скачать можно…но не нужно!
Я когда говорил о IE, я не учитывал 9-ю версию, так как, её фактически еще нет))))
Ну все верно. Фактически его нет. Хотя теоретически можно установить.
Но я очень жду эту версию, обещается, что там будет все еще лучше чем в 8 версии.
Помнишь шутку про “на презентации ИЕ9 парализованный мальчик встал и вышел?”
Сомнительно, что в нем что-то серьезно поменяется по отношению к 8.0 с точки зрения соблюдения стандартов и поддержки правильных технологий.
Уж слишком “правильные” эти технологии)))))) Посмотрим, что поменяется. Будем надеяться, что эта версия облегчит жизнь верстальщикам))))) 8-я версия уже на половину облегчила)))))
Боюсь, что с темпами Мелкософта, к выходу HTML6 они как раз нормально начнут поддерживать HTML4
Но насчет ИЕ8 ты прав, хотя бы слегка полегчало и приблизилось к норме.
Ага, сайты стали быть похожими на сайты
Класс, хочу использовать на блоге для “Read More” и других вещей. Спасибо.
Не за что
Надеюсь получится красиво 
Сдвиг по X по вертикали = сдвиг по Y
( ! )
можно классные менюхи создать, спасибо
Олег, правило без префикса идет последним. всегда!
чему людей учите?
Спасибо, не знал