Dit document is een Nederlandse vertaling van een Engelstalig document: |
(Deze pagina maakt gebruik van CSS style sheets)
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 gecreëerd 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.
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:
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.
En hier is hoe het eruit ziet:
Ziet u een bleek groene 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>Do you see a pale green box with rounded corners and a drop shadow against a white background? If not, your browser isn't handling the generated content correctly (or maybe not at all). </blockquote>
En als u wilt testen of uw browser dit al op de CSS-3 manier kan, klik op probeer het hier.