box-shadow в CSS3

12
Апр
2010

box-shadow в CSS3

Привет! Может Вас когда-то интересовало, как в верстке веб-сайтов делают тени для объектов без использования изображений? Если да, тогда не переключайтесь!)

В этом нам поможет, как Вы уже догадались по заголовку, CSS3, а именно - селектор "box-shadow".

Что он может?

А может он добавить тень к объекту с заданными сдвигами по ширине/высоте, радиусом размытия, растяжения и цвета тени. Это панацея для большинства верстальщиков, которые ненавидят резать и верстать разукрашенные уголки и бордеры объектов.

Demo box-shadow CSS3

Смотрим пример:

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, может смело начинать, но и не забывать, что еще не все браузеры поддерживают его и часть пользователей не увидят всех тонкостей в отображении страниц.

Download (скачать) box-shadow CSS3

Что Вы скажете по этому поводу?

Подписаться на RSSВы можете подписаться на RSS или на E-mail рассылку:

Оставить комментарий с помощью формы ВКонтакте

Комментариев (28) к “box-shadow в CSS3”

  1. gwer пишет:

    -webkit-box-shadow – параметр растяжения убери, и будет тебе счастье с сафари ;)

    “Браузеры, которые на данный момент поддерживают это свойство: Firefox 3.6.3; Opera 10.51″
    Поправочка: Firefox 3.5; Opera 10.5 :P

    • Oleg Mykhailenko пишет:

      Ну, я тестил на этих версиях, потому и написал их :)
      Хммм, риальнЭ, заработало в Сафари без растяжения)))
      Спасибо! Внес поправки :)

  2. Yaroslav.CH пишет:

    И все бы хорошо, но судя по демке, в IE не только пропадает тень – это полностью ожидаемо, но кроме того прыгает еще и размер шрифта и начертание. А вот это уже совсем мрачно и на практике почти неприменимо.

    • Oleg Mykhailenko пишет:

      Так а я ж и не включил IE в список поддерживаемых браузеров :)
      У меня шрифт нормально отображается в IE8. У тебя, наверное, версия ниже. Тем более можно покопаться, что там не так со шрифтом, я Демку быстро набросал, чтобы показать свойство “box-shadow” в действии и со шрифтом особо не заворачивался, так что мог что-то упустить)

      • Yaroslav.CH пишет:

        Нет, я ж и не говорю, что в ИЕ оно будет поддерживаться :) Я о том, что в ИЕ при этом слишком сильно меняется вывод, а это – уже станет проблемой.

        Не-а, тот же ИЕ8.

        Ну ты ж сразу не сказал, что это “по-быстрому” :)

        • Oleg Mykhailenko пишет:

          Тогда пардон!)) Я весь акцент делал на свойство. А текст-рыба, чтобы было все наглядно))
          Но все же, не могу понять, у меня в 8-й версии все нормально с текстом %)

  3. Yaroslav.CH пишет:

    Та ниче, догадаться ж можно :)

    Смотри, у меня вот так:
    FF 3.6: http://www.proofsite.com.ua/tmp/FF-3-6.png
    IE8: http://www.proofsite.com.ua/tmp/IE-8.png

    • Oleg Mykhailenko пишет:

      Хммм…
      Я вот посмотрел в код, и увидел, что не указал какое семейство шрифтов использовать на странице. Значит, современные браузеры и IE используют разные семейства.

  4. felix пишет:

    Шикарная функция, жаль, что приходится подстраиваться не только под современные браузеры, а под различного рода IE6 для проектов заказчиков. Скорее бы все эти доисторические версии просто закончили своё существование.

    Пойду что ли протестирую… :P

    • Oleg Mykhailenko пишет:

      Ну если подстраиваться под старые версии Ослика IE, нужно резать макеты и забыть за это свойство))))

      • coldman пишет:

        PIE.htc – решает проблему IE, если надо сдеть 10-20 блоков с тенью , справлется на “ура” , – когда больше есть не большие задержки при рендере страници.

  5. АлаичЪ пишет:

    Все никак не могу нарадоваться на ваши советы. Красота, я полагаю что в новом дизайне моего блога это будет применено.
    Хотя помня предыдущие ваши посты, моего блога не хватит чтобы все что я хочу воплотить в жизнь (

    • Oleg Mykhailenko пишет:

      Я рад, что Вам нравятся мои посты =)
      А почему это не хватит Вашего блога? Что мешает?)

      З.Ы. Только учтите, что CSS3 будут понимать только современные браузеры, а большинство пользователей Сети, которые используют, пока что, IE, не насладятся красотой “передовых технологий”)

      • АлаичЪ пишет:

        Про поддержку css3 я знаю. Я купил еще пару лет назад книжку про css3. Мне было очень интересно узнать какие там свойства добавили. Разумеется в действии я их так и не увидел. Тогда вообще не один браузер это не поддерживал.

        Моего блога не хватит, чтобы все ваши интересные советы применить, ну хотя бы потому что надо выдерживать определенный стиль, а не делать кашу.

        PS IE9 поддерживает css3 =) Выйдет он правда не скоро, но преальфа девелоперскую версию скачать можно…но не нужно!

        • Oleg Mykhailenko пишет:

          Я когда говорил о IE, я не учитывал 9-ю версию, так как, её фактически еще нет))))

        • АлаичЪ пишет:

          Ну все верно. Фактически его нет. Хотя теоретически можно установить.
          Но я очень жду эту версию, обещается, что там будет все еще лучше чем в 8 версии.

  6. Yaroslav.CH пишет:

    Помнишь шутку про “на презентации ИЕ9 парализованный мальчик встал и вышел?” ;) Сомнительно, что в нем что-то серьезно поменяется по отношению к 8.0 с точки зрения соблюдения стандартов и поддержки правильных технологий.

    • Oleg Mykhailenko пишет:

      Уж слишком “правильные” эти технологии)))))) Посмотрим, что поменяется. Будем надеяться, что эта версия облегчит жизнь верстальщикам))))) 8-я версия уже на половину облегчила)))))

      • Yaroslav.CH пишет:

        Боюсь, что с темпами Мелкософта, к выходу HTML6 они как раз нормально начнут поддерживать HTML4 ;)
        Но насчет ИЕ8 ты прав, хотя бы слегка полегчало и приблизилось к норме.

  7. Stargot пишет:

    Класс, хочу использовать на блоге для “Read More” и других вещей. Спасибо.

  8. Anton пишет:

    Сдвиг по X по вертикали = сдвиг по Y

    ( ! )

  9. skforussia.ru пишет:

    можно классные менюхи создать, спасибо =)

  10. vd пишет:

    Олег, правило без префикса идет последним. всегда!
    чему людей учите? :)