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: rounded corners and shadowed boxes". 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/roundshadow.

Vennligst bemerk: Dette er en norsk oversettelse av "CSS tips & triks: avrundet hjørner og bokser med 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/roundshadow.

Web Stilark
CSS tips & triks

(Denne siden bruker CSS stilark)

Avrundede hjørner & skygger

Fem bilder

Resultat

Avrundede hjørner og bokser med skygge

CSS3 kommer til å ha egenskaper til å lage runde omrisser og omrisser som består av bilder og bokser med skygger, men med litt arbeid kan man simulere den samme effekten allerede med CSS2 — og uten en eneste tabell eller ekstra kode.

Denne siden var inspirert av en laget av Arve Bersvendsen. Han har mange flere intresante CSS demoer.

Bokser med runde omrisser og skygger blir selvsagt mye enklere med CSS3. For å gi et avsnitt en tykk rød omriss med runde hjørner, for eksempel, kommer man bare til å trenge to linjer med CSS3 slik som dette:

P { border: solid thick red;
    border-radius: 1em }

Og for å tilføye en flokete skygge en halv em nedenfor og til høyre av avsnittet, blir bare en linje nok:

P { box-shadow: black 0.5em 0.5em 0.3em }

(Du kan prøve her om det fungerer allerede.) Men om du trenger dem nå og ikke har noe imot kompleksiteten og mangelen på fleksibilitet, kan du bruke teknikken nedenfor. I det aller minste blir det en bra test for nettlesere med problemer…

Fem bilder på samme element

Det viktigste er å bruke generert innhold ('::before' og '::after') for å sette fire ekstra bilder på ett element. Pseudo-elementet '::before' kan ha ett bakgrunnsbilde og forgrunnsbilde, og det kan '::after' pseudo-elementet også. Selve elementet kan også ha bakgrunnsbilde, som gjør fem bilder tilsammen.

Vi lager fem PNG bilder og setter dem i de fire hjørnene og mot høyre kanten av elementet. Her er bildene:

oppe i venstre hjørne:
top left corner
overkanten og oppe i høyre hjørne:
top right corner
midten og høyre kant:
background and right edge
nedre venstre hjørne:
bottom left corner
nedre kant og nederst i høyre hjørne:
bottom and bottom left corner

Og her er CSS reglene for å plassere dem:

blockquote {
    max-width: 620px;
    background: url(rs-right.png) right repeat-y }
blockquote::before {
    display: block;
    line-height: 0;
    background: url(rs-topright.png) top right no-repeat;
    content: url(rs-topleft.png) }
blockquote::after {
    display: block;
    line-height: 0;
    background: url(rs-bottomright.png) bottom right no-repeat;
    content: url(rs-bottomleft.png) }

Siden bakgrunnsbilde er 620px bredt, kan vi ikke tillate at boksene blir bredere enn 620px, ellers for vi hull i bakgrunnen. Derfor finnes 'max-width' (maksimum bredde) egenskapen. Egenskapen 'display: block' trengs for å sikre at det genererte innholdet får egne bokser over og nedenfor hovedinnholdet, istedenfor å falle på den første og siste linje. 'line-height: 0' sikrer at det ikke er plass til noe oppforbi eller nedenfor bildene i 'content' egenskapen.

Resultatet

Og slik ser det ut:

Ser du en lyse-grønn boks med runde hjørner og skygge over en hvit bakgrunn? Hvis ikke, takler ikke nettleseren din innholdet som ble generert korrekt (eller kanskje ikke i det hele).

HTML koden er så enkel som den burde være:

<blockquote>
<p>
Ser du en lyse-grønn boks med runde hjørner og skygge over en hvit bakgrunn? 
Hvis ikke, takler ikke nettleseren din innholdet som ble generert korrekt (eller kanskje ikke i det hele).
</blockquote>

Og om du vil teste om nettleseren din kan allerede gjøre dette på CSS3-metoden, kan du teste dette her.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 6 Jan 2004;
last updated $Date: 2009/04/04 16:23:11 $ GMT