29 besökare, 0 medlemmar och 1 Student är online nu
Loopia

CSS (Cascading Style Sheets)

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):

Skugga i en box (div)

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

 

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

#box1 {
width: 400px;
height: 100px;
background-color: #BAD1BA;
border-radius: 20px;
box-shadow: 5px 5px 10px rgba(0,0,0, 0.5);
}

HTML-koden:

<div id="box1">
Text och innehåll här.
</div>

 

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:

Inre skugga i en box (div)

box-shadow:
inset 4px 4px 4px rgba(255,255,255, 0.8),
inset -4px -4px 4px rgba(0,0,0,0.6),
5px 5px 10px 5px rgba(0,0,0,0.4);

 

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:

#box1 {
width: 400px;
height: 100px;
background-color: #BAD1BA;
border-radius: 20px;
box-shadow:
inset 4px 4px 4px rgba(255,255,255, 0.8),
inset -4px -4px 4px rgba(0,0,0,0.6),
5px 5px 10px 5px rgba(0,0,0,0.4);

}

 

Skugga i bild (Image)

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

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

CSS-koden:

.image_shadow {
border-radius: 30px;
box-shadow: 5px 5px 15px rgba(0,0,0, 0.5);
}

HTML-koden:

<img class="image_shadow" src="bilder/esko_fyr.jpg" width="400" height="302" />

 

Fotokant med skugga

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

CSS-koden:

.photo_border {
border: 10px solid #F4F4F4;
box-shadow: 1px 1px 6px rgba(0,0,0, 0.5);

}

HTML-koden:

<img class="photo_border" src="bilder/rodhallan_iggohallan.jpg" width="400" height="225" />

 

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 Öppnas i nytt fönster (Open in new window) 

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:

#image_shadow {
background-image:
url(bilder/esko_fyr.jpg);
width: 400px;
height: 302px;
clear: both;
border-radius: 30px;
box-shadow: inset 5px 5px 5px rgba(255,255,255,0.7),
inset -5px -5px 5px rgba(0,0,0, 0.5),
5px 5px 5px rgba(0,0,0, 0.5);

}

HTML-koden. Observera att Boxen är tom:

<div id="image_shadow"></div>

 

Skugga i Tabell (Table)

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

Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
Cell 7 Cell 8 Cell 9

 

Klicka här för att se fler exempel Öppnas i nytt fönster (Open in new window) 

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

.box_shadow_table1 {
width: 400px;
margin: 10px;
padding: 10px;
border: 1px solid #95B995;
border-radius: 15px;
box-shadow: 5px 5px 10px rgba(0,0,0, 0.3);
}

.box_shadow_table_cell1 {
border: 1px solid #95B995;
border-radius: 5px;
box-shadow: inset 3px 3px 3px rgba(0,0,0, 0.3);
}

HTML-koden:

<table class="box_shadow_table1" border="0" cellpadding="8" cellspacing="10">
<tr>
<td class="box_shadow_table_cell1">Cell 1</td>
<td class="box_shadow_table_cell1">Cell 2</td>
<td class="box_shadow_table_cell1">Cell 3</td>
</tr>
<tr>
<td class="box_shadow_table_cell1">Cell 4</td>
<td class="box_shadow_table_cell1">Cell 5</td>
<td class="box_shadow_table_cell1">Cell 6</td>
</tr>
<tr>
<td class="box_shadow_table_cell1">Cell 7</td>
<td class="box_shadow_table_cell1">Cell 8</td>
<td class="box_shadow_table_cell1">Cell 9</td>
</tr>
</table>