Експериментиране с различни ефекти на CSS3 Box-Shadow

ефекти

В този урок ще създадем ефекти на сенките, използвайки само CSS. По-долу са изображения, създадени във Photoshop с различни ефекти. По-рано това беше единственият начин да ги създадем, но благодарение на box-shadow можем да направим това само с CSS.

различни

CSS Box-Shadow

Ще използваме функцията box-shadow, която улеснява създаването на множество сенки върху кутия с елементи, като задава стойности за цвят, размер, размазване и отместване.

Свойството box-shadow приема от 2 до 4 опции, необходимите опции са хоризонтално и вертикално отместване и две допълнителни опции, разстояние на пръскане и цвят.

Поддръжка на браузър

Всички основни най-нови браузъри поддържат функцията box-shadow:

  • Internet Explorer 9.0 и по-нова версия
  • Firefox 3.5 и по-нова версия
  • Chrome 1 и по-нова версия
  • Safari 3 и по-нова версия
  • Opera 10.5 и по-нови версии

С много нови свойства на CSS3 трябва да добавяте към префикс функции със специфични за браузъра тагове. За Firefox трябва да използвате -moz-, за Chrome/Safari -webkit. Свойството box-shadow не е по-различно.

Firefox 3.5 се нуждае от префикса –moz-boz-shadow, но Firefox 4.0 и по-нови, изобщо не е необходимо да използвате префикса.