43 besökare, 2 medlemmar och 1 Student är online nu
Loopia

CSS (Cascading Style Sheets)

Textskugga (text-shadow)

Tillämpa skugga i text genom att ange text-shadow.

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

Exempel på parametrar:

text-shadow: 4px 5px 3px rgba(0,0,0, 0.5);

I exemplet ovan anges skuggans placering horisontellt 4px och vertikalt 5px. Oskärpan på skuggan är 3px och 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: text-shadow: 4px 5px 3px #CCC;

 

TEXTSKUGGA

 

 

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

CSS-koden:

.text_skugga {
text-shadow: 4px 5px 3px rgba(0,0,0, 0.5);
font-family: Verdana, Geneva, sans-serif;
font-size: 60px;
font-weight: bold;
color: #000;
}

HTML-koden:

<p><span class="text_skugga">TEXTSKUGGA</span></p>

 

 

TEXTSKUGGA

 

 

CSS-koden:

.text_skugga {
padding: 20px;
background-color: #000;
text-shadow: 0 0 5px rgba(255,102,0, 1);

font-family: Verdana, Geneva, sans-serif;
font-size: 60px;
font-weight: bold;
color: #000;
}

HTML-koden:

<p><span class="text_skugga">TEXTSKUGGA</span></p>