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:
- boven rand en boven rechterhoek:
- midden gedeelte en rechter rand:
- onder linkerhoek:
- onder rand en onder rechterhoek:
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.
