HTML5 - Box Shadow

Това е една от най -очакваните характеристики на новия стандарт на CSS3 и това във връзка с HTML5 успява да привлече много погледи, ние се позоваваме на Box Shadow който ни позволява да поставяме сенки върху кутиите в нашия документ HTML, като по този начин генерира ефект, сякаш той се носи на страницата.
Елементът Shadow Shadow трябва да бъде съставен, както следва:
box-shadow: hoffset voffset blur spread color inset
Когато всеки от неговите атрибути изпълнява функция, нека разгледаме всеки от тях подробно:

• Хофсет: Това е хоризонталното отместване, което е стойност на дължината. Положителната стойност измества Box Shadow отдясно, от друга страна, отрицателна стойност измества сенката на кутията наляво.

• Voffset: Това е вертикалното отместване, което е стойност на дължината. Положителната стойност измества сенката на кутията под полето на елемента, а отрицателната стойност премества сянката на кутията над полето на елемента.

• Размазване: (Незадължително) Указва радиуса на дефиницията на сянка, която е стойност на дължината. Колкото по -висока е стойността, толкова по -неясен остава ръбът на кутията на елемента. За стойността по подразбиране 0 границата на сянката на кутията изглежда напълно дефинирана.

• Разпространение: (По избор) Посочете радиуса на дифузия на сянката, това е мярка за дължина. Положителната стойност кара сянката да се разширява във всички посоки на полето на съдържащия елемент, а отрицателната стойност води до свиване на сянката на съдържащия елемент.

• Цвят: (По избор) Това е цветът на сянката. Ако е пропуснат, браузърът ще реши цвета.

• Вмъкване: (По избор) Прави сянката хвърлена вътре в кутията на елемента, към който е приложена.

След като знаем атрибутите, нека бързо преминем към пример с код, за да приложим наученото на практика.

 Пример
Има много различни видове плодове - има само над 500 сорта банани. Докато добавим безбройните видове ябълки, портокали и други добре познати плодове, ние сме изправени пред хиляди възможности за избор.

Както виждаме, можем да приложим Box Shadow В CSS вътре в етикета на стила този код генерира следния резултат:

Друг интересен аспект е, че в една и съща декларация на Box Shadow можем да посочим няколко сенки, например в следния код ще включим допълнителна сянка във вмъкването, нека видим:

 Пример
Има много различни видове плодове - има само над 500 сорта банани. Докато добавим безбройните видове ябълки, портокали и други добре познати плодове, ние сме изправени пред хиляди възможности за избор.

Сега нека видим как и двете сенки се показват в нашия елемент: