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

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

CSS3 heeft eigenschappen om afgeronde randen te maken, randen bestaande uit afbeeldingen en kaders met schaduw, maar met een beetje inspanning kunt u die deels ook met CSS2 simuleren — en dat zonder tabellen of extra opmaak.

Wel zijn afgeronde randen en schaduwen met CSS3 veel eenvoudiger te maken dan met CSS2. Om bijvoorbeeld aan een paragraaf een dikke rode grens met afgeronde hoek te geven, heeft u slechts twee regels van CSS3 nodig, 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, is slechts één regel voldoende:

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

(Probeer hier en hier om te zien of het al werkt.) Maar als het in oudere implementaties moet werken en u een zeker 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 right 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>
Bert Bos, leider stijl-activiteiten
Copyright © 1994–2015 W3C®

Geschreven 6 januari 2004;
laatste update ma 23 feb 2015 18:25:04 UTC

Talen

Over de vertalingen