HTML5 - Box Shadow

Dette er en af ​​de mest forventede funktioner i den nye standard for CSS3 og det i forbindelse med HTML5 formår at tiltrække mange udseende, henviser vi til Box Shadow der tillader os at placere skygger på boksene i vores dokument HTML, hvilket genererer en effekt, som om den flyder på siden.
Box Shadow -elementet skal sammensættes som følger:
box-shadow: hoffset voffset sløring spredt farveindsats
Hvor hver af dens attributter udfører en funktion, lad os se hver af disse i detaljer:

• Hoffset: Det er den vandrette forskydning, som er en længdeværdi. En positiv værdi fortrænger Box Shadow til højre, på den anden side, flytter en negativ værdi Box Shadow til venstre.

• Voffset: Det er den lodrette forskydning, som er en længdeværdi. En positiv værdi flytter Box Shadow under elementets boks, og en negativ værdi flytter Box Shadow over elementets box.

• Sløring: (Valgfrit) Angiver radius for skyggedefinitionen, som er en længdeværdi. Jo højere værdien er, jo slørere er kanten af ​​emnens kasse. For standardværdien på 0 ser grænsen for boksens skygge fuldt ud defineret ud.

• Spredning: (Valgfrit) Angiv diffusionsradius for skyggen, det er et mål for længden. En positiv værdi får skyggen til at ekspandere i alle retninger af det indeholdende elements boks, og en negativ værdi får det indeholdende elements skygge til at trække sig sammen.

• Farve: (Valgfrit) Det er farven på skyggen. Hvis den udelades, bestemmer browseren farven.

• Indsæt: (Valgfrit) Gør skyggen kastet inde i kassen af ​​elementet, som den påføres.

Når vi kender attributterne, lad os hurtigt gå videre til et kodeeksempel for at omsætte det, vi lærte, i praksis.

 Eksempel
Der er masser af forskellige slags frugt - der er over 500 sorter bananer alene. Når vi tilføjer de utallige typer æbler, appelsiner og andre velkendte frugter, står vi over for tusindvis af valgmuligheder.

Som vi kan se, kan vi anvende Box Shadow I CSS inde i stilmærket genererer denne kode følgende resultat:

Et andet interessant aspekt er, at vi i den samme erklæring om en Box Shadow kan angive flere skygger, for eksempel i den følgende kode vil vi inkludere en ekstra skygge i indsatsen, lad os se:

 Eksempel
Der er masser af forskellige slags frugt - der er over 500 sorter bananer alene. Når vi tilføjer de utallige typer æbler, appelsiner og andre velkendte frugter, står vi over for tusindvis af valgmuligheder.

Lad os nu se, hvordan begge skygger vises i vores element: