CSS3 Regions deel 2: Eindelijk polygonen voor het web
Geschreven door Sandhjé Bouw woensdag, 28 december 2011 18:23
In ons vorige artikel over css regions hebben we gekeken naar de krachtige mogelijkheden die dit css prototype biedt om tekst over meerdere kolommen te verdelen. We zullen nu twee andere nieuwe mogelijkheden bekijken die css regions biedt. Allereerst het maken van een polygoon tekst kader.
Een polygoon tekst kader met css?
Tot nu toe is het bovenstaande inderdaad volstrekt onmogelijk. Enkel met ingewikkelde javascript trucs of het verdelen van tekst over een groot aantal span’s danwel div’s kunnen we bij benadering een bovenstaand effect nabootsen. Hierdoor worden de prestaties van een site echter behoorlijk nadelig beïnvloed en de problemen stapelen zich op zodra gebruikers een aangepaste lettergrootte of een aangepast lettertype gebruiken.
Met css regions kunnen we echter het onderstaande met enkel een paar regeltjes css code voor elkaar krijgen.
De css code voor het bovenstaande ziet er als volgt uit:
.circle{
/* Deze div wordt een cirkel */
wrap-shape: polygon(0px, 150px /* ...meer punten */);
wrap-shape-mode: content;
}
.heart{
/* Maak van deze div een hartje */
wrap-shape: polygon(150px, 32px /* ...overige punten */);
wrap-shape-mode: content;
}
De code om deze vormen te maken is zo eenvoudig dat ze bijna geen uitleg behoeft. Met de wrap-shape en wrap-shape-mode property’s van het nieuwe css regions prototype kun je aangeven dat alle “content” of tekst in een div in de vorm van een polygoon moet worden getoond. Je kunt daarna met opeenvolgende x en y coordinaten exact aangeven hoe deze polygoon eruit moet komen te zien. Zo maak je dus eenvoudig tekst in de vorm van een hartje of een cirkel als hierboven.
Dit geeft natuurlijk enorme nieuwe mogelijkheden aan designers en een geweldige nieuwe tool voor developers. Maar er is meer!
Polygone tekstomloop!
Met adobe’s css regions prototype kunnen we namelijk niet alleen teksten in een polygone vorm plaatsen, maar ook om een polygone vorm heen laten lopen. Een voorbeeld hiervan zie je hieronder.
En zoals je inmiddels misschien al verwacht had is ook dit effect doodsimpel te bereiken middels enkel een kleine aanpassing in de css regels van ons polygoon kader. Het enige wat gedaan moet worden om het bovenstaande effect te bereiken is het wijzigen van de regel
wrap-shape-mode: content;
naar
wrap-shape-mode: around;
Dit betekend dat we met het css regions prototype straks dingen kunnen doen zoals hieronder afgebeeld:
We kunnen ons nog maar nauwelijks voorstellen wat een geweldige dingen we met deze krachtige css tools kunnen gaan maken. Maar nog steeds is adobe niet tevreden. De bovenstaande voorbeelden zijn allemaal gebaseerd op polygone vormen die met verschillende coordinaten worden gedefinieerd. Adobe werkt momenteel ook aan een manier om de polygonen te “generen” aan de hand van de alpha waarden in png bestanden.
Wanneer we het gaan gebruiken
Het is helaas nog niet bekend of en wanneer css regions in de css standaard zullen worden opgenomen, maar we hopen natuurlijk dat iedereen bij het w3c deze geweldige tools zo snel mogelijk goedkeuren. Daarna moeten we nog even afwachten hoe lang het duurt voordat de ontwikkelaars van Chrome, Firefox, Internet Explorer en andere browsers deze standaard opnemen in hun software. Maar wanneer het zover is hebben we dan toch eindelijk beschikking over complexe “Magazine-like” layouts, enkel en alleen met pure css.
