... of komt zij juist op? Wie het weet mag het zeggen, mits omkleed met goede argumenten. Feit is wel dat deze foto niet op de achtergrond staat, maar de achtergrond is van een <div>tag met de classes angle en full. angle zorgt voor de schuine afsnijdingen, full regelt het uitrekken van de foto over de volle breedte van het document.
De class angle is helemaal geschreven in CSS. In dit voorbeeld is dat de file html-453.css. De
oorspronkelijke CSS is gewijzigd om de letters aan te passen, om schuin gedrukte tekst mogelijk te maken en om
de achtergrond aan te passen. Zo zijn voor deze website de foto's vervangen. De oorspronkelijke foto's zijn namelijk
voor niets veel te groot (qua afmetingen en dus qua bestandsgrootte).
De oorspronkelijke CSS is gemaakt door Mark Shufflebottom.
De class full is niet in CSS geprogrammeerd, maar die wordt ingezet door Anystretch, een jQuery-plug-in die is gemaakt door de Engelsman Dan Millar. Zijn programmeerwerk vind je op GitHub.com. Deze plug-in wordt niet meer onderhouden.
Deze bladzijde is responsive gemaakt door geschikte @media screen-queries in de CSS. Die corrigeren de lettergrootte en de witruimte links en recht van de tekst, als dat nodig is.
Voor de letters in dit voorbeeld is het font "Armata" gebruikt, zoals in het oorspronkelijke verhaal.
Dit is een Google-font.
Let ook op de gedistingeerde bijna zwart-donkerblauwe lijn aan de bovenkant. De eerste, derde, vijfde, enz. schuin
afgesneden foto heeft dat, de andere blokken hebben dat niet. Die hebben gewoon de standaard achtergrondkleur van
deze website.
... of komt zij juist op? Ook hier weten we het niet. Dus wie het weet...
Dit is slechts een beperkte demo wat je kunt bereiken met CSS in combinatie met Anystretch.js. Kijk op de
GitHub site van Dan Millar voor een uitgebreide handleiding.
Deze pagina-opmaak is minder geschikt voor gebruik in een frameset,
maar het kàn wel.
Inspiratie en bron: Webdesigner magazine, nr. 61, pag. 60 e.v. Dit blad wordt sinds eind november 2017 niet meer gemaakt.