CSS (Cascading Style Sheets)

 skriv ut »

Skugga (box-shadow)

Tillämpa skugga i boxar, tabeller, bilder etc genom att ange box-shadow.

Skuggans placering anges i X- och Y-led (h-shadow, v-shadow) och parametrar som kan anges är blur (oskärpa), spread (spridning), color (färg) och inset (inre skugga).

Exempel på parametrar:

box-shadow: 5px 5px 10px 5px rgba(0,0,0, 0.5);

I exemplet ovan anges skuggans placering horisontellt 5px och vertikalt 5px. Oskärpan på skuggan är 10px och spridningen är 5px. Färgen anges som RGBa med opacitet 50%.

Notera att skuggans färg och opacitet anges med RGBa där du anger en färg och ett Alfa-värde för opaciteten. För gråskala kan du tex ange rgba(0,0,0, 0.5) där färgen är Svart men opaciteten sänkts för att ge Gråskala.
Läs mer om RGBa här »

Observera att du fortfarande kan använda hexidecimala färgvärden för att ange gråskalor som tex #333, #666, #999, och #CCC för skuggan istället för att använda RGBa: box-shadow: 5px 5px 10px 5px #CCC;

Exemplet nedan använder box-shadow på en Box (DIV):

Klicka här för att se fler exempel  

CSS-koden:

HTML-koden:

Inre skugga

Du kan använda flera skuggor och kombinera dessa genom att ange parametrarna åtskiljda av kommatecken. Det går alltså att kombinera en skugga och en inre skugga för att få en 3D-effekt av skuggor och högdagrar:

Klicka här för att se fler exempel »

CSS-koden. Exemplet använder en Vit inre skugga (inset), en Grå inre skugga (inset) och en Grå yttre skugga. Varje skugga fungerar som ett eget Layer med ett Z-index för placering ovanför varandra. Den skugga som anges sist i koden placeras underst. Här är den yttre skuggan placerad längst ned i Layer-ordningen:

Skugga i bild (Image)

Exemplet nedan använder box-shadow på en Bild (image):

Klicka här för att se fler exempel  

CSS-koden:

HTML-koden:

Fotokant med skugga

Du kan ge dina bilder en fotokant genom att använda en kantlinje (border) och kombinera med en skugga.

CSS-koden:

HTML-koden:

Inre skugga i bild

Exemplet nedan använder en kombination av inre skugga (inset) och yttre skugga på en Bild (image):

Klicka här för att se fler exempel  

En inre skugga (inset) fungerar inte direkt på en bild. I exemplet är bilden en bakgrundsbild i en tom DIV-box. Det är viktigt att du anger samma storlek på boxen som bildens storlek.

CSS-koden. Exemplet använder en Vit inre skugga (inset), en Grå inre skugga (inset) och en Grå yttre skugga. Varje skugga fungerar som ett eget Layer med ett Z-index för placering ovanför varandra. Den skugga som anges sist i koden placeras underst. Här är den yttre skuggan placerad längst ned i Layer-ordningen:

HTML-koden. Observera att Boxen är tom:

Skugga i Tabell (Table)

Exemplet nedan använder box-shadow på en Tabell (Table):

Klicka här för att se fler exempel  

CSS-koden. Notera att två classer används, en till tabellen och en till tabellcellerna:

HTML-koden: