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: drop 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/shadows.

Vennligst bemerk: Dette er en norsk oversettelse av "CSS tips & triks: skygger" 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/shadows.

Web Stilark
CSS tips & triks

(Denne siden bruker CSS stilark)

Demo

Skygger

CSS2 har ingen egenskap til å legge skygge til en boks. Du kan prøve å tillegge en kant til høyre og nedenfor boksen, men det kommer ikke til å se riktig ut. Men hvis du har to element, et inni det andre, kan du bruke det ytre elementet som en skygge til det indre. For eksempel, hvis du har HTML kode som ser slik ut:

<div class=back>
  <div class=section>
    <h2>Die Rose duftet - doch ob sie empfindet</h2>
    <address>Heinrich Heine (1797-1856)</address>

    <p>Die Rose duftet - doch ob sie empfindet<br>
    ...
  </div>

</div>

kan du bruke det ytre DIV elementet som skygge til det indre. Resultatet kan se ut som denne siden. Først gir du BODYen en bakgrunnsfarge (grøn i dette eksemplet), så gir du det ytre DIV elementet en bakgrunnsfarge som er litt mørkere (grøn-grå) og det indre DIV elementet sin egen farge (f.eks., gul-hvit):

body {background: #9db}
div.back {background: #576}
div.section {background: #ffd}

Deretter, ved å bruke marginer og "padding", setter man det indre DIV elementet litt opp og til venstre i forhold til det ytre DIV elementet:

div.back {padding: 1.5em}
div.section {margin: -3em 0 0 -3em}

Det kan også hende at du må flytte det ytre DIV elementet litt til høyre. Og om du har flere seksjoner, vil du nok ha litt plass mellom seksjonene også:


div.back {margin: 3em 0 3em 5em}

Det er så å si alt. Du kan tillegge kant rondt det ytre DIV elementet om du vil. Du kommer nok også til å ønske noe 'padding' inni, f.eks.:

div.section {border: thin solid #999; padding: 1.5em}

Du kan, selfølgelig, også forandre på størrelsen av skyggen om du vil.

Skygger på tekst

CSS har en egenskap til å legge skygge til tekst. Den har fire argumenter: fargen som skyggen skal ha, en horisontal avstand (positivt betyr til høyre), en vertikal avstand (positivt betyr ned) og "blur" (uklarheten) (0 betyr mest skarp). For eksempel:

h3 { text-shadow: red 0.2em 0.3em 0.2em }

Er det skygge på teksten her?

CSS Valid CSS!Valid HTML 4.0!

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