HTML5 - Box Shadow

Detta är en av de mest efterlängtade funktionerna i den nya standarden för CSS3 och det i samband med HTML5 lyckas locka många blickar, hänvisar vi till Box Shadow som tillåter oss att placera skuggor på rutorna i vårt dokument HTML, vilket genererar en effekt som om den flyter på sidan.
Box Shadow -elementet måste bestå av följande:
box-shadow: hoffset voffset oskärpa sprid färginsats
Där var och en av dess attribut utför en funktion, låt oss se var och en av dessa i detalj:

• Hoffset: Det är den horisontella förskjutningen, som är ett längdvärde. Ett positivt värde förskjuter Box Shadow till höger, å andra sidan, flyttar ett negativt värde Box Shadow till vänster.

• Voffset: Det är den vertikala förskjutningen, som är ett längdvärde. Ett positivt värde flyttar Box Shadow under objektets box och ett negativt värde flyttar Box Shadow ovanför objektets box.

• Fläck: (Valfritt) Anger radien för skuggdefinitionen, vilket är ett längdvärde. Ju högre värde, desto suddigare blir kanten på objektets låda. För standardvärdet 0 ser gränsen för boxskuggan helt definierad ut.

• Spridning: (Valfritt) Ange diffusionsradie för skuggan, det är ett mått på längden. Ett positivt värde får skuggan att expandera i alla riktningar av det innehållande elementets låda, och ett negativt värde får det innehållande elementets skugga att dra ihop sig.

• Färg: (Valfritt) Det är skuggans färg. Om den utelämnas bestämmer webbläsaren färgen.

• Insats: (Valfritt) Gör skuggan gjuten inuti lådan på elementet som den appliceras på.

När vi väl känner till attributen, låt oss snabbt gå vidare till ett kodexempel för att omsätta det vi lärt oss.

 Exempel
Det finns massor av olika sorters frukt - det finns över 500 banansorter ensamma. När vi lägger till de otaliga typerna av äpplen, apelsiner och annan välkänd frukt står vi inför tusentals val.

Som vi kan se kan vi tillämpa Box Shadow I CSS inuti stiltaggen genererar den här koden följande resultat:

En annan intressant aspekt är att i samma deklaration av en Box Shadow kan vi ange flera skuggor, till exempel, i följande kod kommer vi att inkludera en ytterligare skugga i insatsen, låt oss se:

 Exempel
Det finns massor av olika sorters frukt - det finns över 500 banansorter ensamma. När vi lägger till de otaliga typerna av äpplen, apelsiner och annan välkänd frukt står vi inför tusentals val.

Låt oss nu se hur båda skuggorna visas i vårt element: