Talen

Dit is een vertaling. Hij kan fouten bevatten of verouderd zijn t.o.v. de Engelse versie. Vertaler: Saffier Verkaik

Web Style Sheets CSS tips & trucs

Zie ook de index van alle tips.

Afgeronde hoeken en schaduw kaders

CSS3 zal eigenschappen hebben om afgeronde randen te maken, randen bestaande uit afbeeldingen en kaders met schaduw, maar met een beetje inspanning kunt u enkele van hen reeds met CSS2 simuleren — en dat zonder tabellen of extra opmaak.

Deze pagina werd geïnspireerd door Arve Bersvendsen. Hij heeft veel meer interessante CSS demo's.

Uiteraard zullen afgeronde randen en schaduwen veel eenvoudiger met CSS3 te maken zijn. Om bijvoorbeeld aan een paragraaf een dikke rode grens met afgeronde hoek te geven, zou u slechts twee regels van CSS3 nodig hebben gelijkwaardig aan de volgende:

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

En om een scherpe schaduw van een halve em onder en rechts van de paragraaf te maken, zou slechts één regel voldoende zijn:

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

(Klik op probeer hier om te zien of het al werkt.) Maar als u ze nu nodig heeft en de complexheid en gebrek aan flexibiliteit niet erg vindt, kunt u de onderbeschreven techniek gebruiken. Het zal in ieder geval een mooie test zijn voor buggy browsers.

Vijf afbeeldingen op één onderdeel

De hoofdtruc is het gebruiken van gegenereerde inhoud ("::before" en "::after") om vier extra afbeeldingen op een onderdeel te zetten. Het "::before" pseudo-onderdeel kan een achtergrond en een voorgrond afbeelding hebben, het "::after" pseudo-onderdeel ook en het onderdeel zelf kan een achtergrond hebben, voor een totaal van vijf afbeeldingen.

Wij creëren vijf PNG afbeeldingen en zetten hen in de vier hoeken en tegen de rechter rand van het onderdeel. Hier zijn de afbeeldingen:

boven linkerhoek:
top left corner
boven rand en boven rechterhoek:
top right corner
midden gedeelte en rechter rand:
background and right edge
onder linkerhoek:
bottom left corner
onder rand en onder rechterhoek:
bottom and bottom left corner

En hier zijn CSS regels om hen te positioneren:

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

Omdat onze achtergrond afbeelding 620px breed is, kunnen we geen kaders toelaten breder dan 620px, zonder dat we gaten krijgen. De ‘display: block” eigenschap is nodig om er zeker van te zijn dat de gegenereerde inhoud kaders op zichzelf vormt boven en onder de hoofd inhoud, in plaats van dat de inhoud ingevoegd wordt op de eerste en de laatste regel. De ‘line-height: 0’ verzekert dat er geen ruimte overblijft voor stijgers en dalers boven en onder de afbeeldingen in de ‘content’ eigenschap.

Het resultaat

En hier is hoe het eruit ziet:

Ziet u een bleek groen kader met afgeronde hoeken en een schaduw tegen een witte achtergrond? Indien niet, dan behandelt uw browser de gegenereerde inhoud niet correct (of misschien helemaal niet).

De HTML bron is echt niet meer dan het zou moeten zijn:

<blockquote>
<p>Ziet u een bleek groen kader met
afgeronde hoeken en een schaduw tegen een
witte achtergrond? Indien niet, dan
behandelt uw browser de gegenereerde inhoud
niet correct (of misschien helemaal niet).
</blockquote>

En als u wilt testen of uw browser dit al op de CSS-3 manier kan, klik op probeer het hier.

Bert Bos, leider stijl-activiteiten
Copyright © 1994–2014 W3C®

Geschreven 6 januari 2004;
laatste update za 20 dec 2014 18:46:51 UTC

Talen

Over de vertalingen