Bjørn Enki professional website design offers custom website design services internationally, with a focus on Los Angeles website design.

Please note: This page is a norwegian translation of the World Wide Web Consortium's page on "CSS tips & triks: text shadows". This translation was written by Bjorn Enki, and may contain translation errors. For the original english version, please visit http://www.w3.org/Style/Examples/007/text-shadow.

Vennligst bemerk: Dette er en norsk oversettelse av "CSS tips & triks: skygge på tekst" siden av the Word Wide Web Consortium. Denne oversettelsen er skrevet av Bjorn Enki, og inneholder muligens feiloversettinger. For den originale og oppdaterte versjonen (på engelsk), vennligst se http://www.w3.org/Style/Examples/007/text-shadow.

Web Stilark
CSS tips & triks

(Denne siden bruker CSS stilark)

Skygger på tekst

Flokete skygger på tekst

Lesbar hvit tekst

Flere skygger

Omriss

Neon glød

Skygger på tekst

CSS level 3 har en egenskap 'text-shadow' som tillegger en skygge til hver bokstav av en tekst. I sin enkleste form, ser det omtrent slik ut:

h3 {text-shadow: 0.1em 0.1em #333}

Som tillegger en mørke-grå (#333) skygge litt til høyre (0.1em) og litt ned (0.1em) relativt til normale teksten. Resultatet ser slik ut:

The noak and the barcicle

(Fra og med August 2005 støtter ikke alle nettlesere 'text-shadow' enda. Eksemplet ovenfor burde iallefall fungere i Safari og Konqueror.)

Flokete skygger på tekst

Den enkleste formen av 'text-shadow' egenskapen har do deler: en farge (slik som #333 ovenfor) og en avstand (0.1em 0.1em i eksemplet ovenfor). Dette resulterer i skarpe skygger på den indikerte avstanden. Avstanden kan også gjøres flokete, som resulterer i mer eller mindre uklare skygger.

Mengden uklarhet gis som en ny avstand. Her er to linjer, en med litt uklarhet (0.05em) og en med mye (0.2em):

h3.a {text-shadow: 0.1em 0.1em 0.05em #333}
h3.b {text-shadow: 0.1em 0.1em 0.2em black}

“What do you say?” said the UK

In order to see more clearly

Lesbar hvit tekst

Skygger kan gjøre tekst mer lesbar om det er lite kontrast mellom forgrunnen og bakgrunnen. Her er et eksempel av hvit tekst mot en lyse-blå bakgrunn, først uten skygge og deretter med skygge:

h3 {color: white}
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}

Med skygge:

What is in it for me?

Uten skygge:

With a shovel and some oranges

Flere Skygger

Du kan også ha flere skygger. Som vanlig, ser dette litt rart ut:

h3 {text-shadow: 0.2em 0.5em 0.1em #600,
      -0.3em 0.1em 0.1em #060,
      0.4em -0.3em 0.1em #006}

I wish wish wish…

Men med to velplasserte mørke og lyse skygger kan denne effekten være nyttig:

h3.a {text-shadow: -1px -1px white, 1px 1px #333}
h3.b {text-shadow: 1px 1px white, -1px -1px #333}

I, Augustus (you know who)

That's extra, of course

Dette er litt risikabelt, som du kan se om nettleseren din ikke støtter 'text-shadow'. Bakgrunnsfargene og forgrunnsfargene i dette eksemplet er faktisk nesten den samme fargen (#CCCCCC og #D1D1D1). Dette betyr at hvis skyggen ikke fungerer blir det såvidt kontrast mellom teksten og bakgrunnen.

Bokstaver med omrisser

Eksemplet med flere skygger kan tas et skritt lengre. Med fire skygger kan bokstaver faktisk få en omriss:

h3 {text-shadow: -1px 0 black, 0 1px black,
      1px 0 black, 0 -1px black}

Are you feeling red?

A cat, an apple, etcetera

Omrissen er ikke perfekt, men det er foreløpig (August 2005) snakk om CSS burde ha en egenskap (eller kanskje en verdi til 'text-decoration') som lager bedre omriss.

Neon glød

Om man lager en uklar skygge bak teksten uten avstand ligner effekten en glød rundt bokstavene. Om gløden fra en skygge ikke er intens nok, kan man bare gjenta samme skyggen et par ganger:

h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F,
        0 0 0.2em #87F}

With a zest of best

There's no no like a better no

Indeed, quite right, Mr M

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 4 Aug 2005;
last updated $Date: 2009/04/04 16:23:11 $ GMT