VisionEars wordt Mulberries Agency

Wij gaan vanaf 1 september verder onder de naam Mulberries Agency. Naast de vertrouwde service die je van ons gewend bent hebben we ons ook gespecialiseerd op het gebied van Marketing Automation en Experiment Marketing.

Bekijk hier de website van Mulberries Agency Sluit popup

Download je gratis ebook: Marketing automation - 6 systemen vergeleken

Zoek je naar software om meer leads te converteren? Download onze gratis ebook waarin wij de 6 meest gebruikte softwarepakketten met elkaar vergelijken!

Download je gratis ebook: Infograpic stappenplan

Voor een geslaagde infographic heb je meer nodig dan goede data en een mooi design. Het moet een verhaal vertellen dat aansluit bij de doelgroep. Download ons heldere stappenplan en ga voor die perfecte infographic.

Download je gratis ebook: 10 tips voor een optimale webshop homepagina

De homepagina van je webshop is enorm belangrijk, want het is de first impression die telt. Een geoptimaliseerde homepagina is belangrijk voor het succes van je webshop.

Gratis consult: snelheidsoptimalisatie

Een snelle(re) website draagt bij aan de gebruikerservaring en levert meer conversies en dus omzet op. Wij helpen je graag op weg!

Wie onderstaand formulier invult, ontvangt een uitnodiging van een gratis consult. Tijdens dit gesprek bekijken we de betreffende website(s) en bespreken we samen alle mogelijkheden en valkuilen.

Gratis consult: Webshop optimalisatie

Voor een geslaagde webshop heb je meer nodig dan mooi design. Een goede gebruikerservaring, technisch in orde en zoekmachine geoptimaliseerd. Neem contact op voor een GRATIS consult. Wij nemen je webshop onder de loep zodat jij precies weet waar je kansen liggen en nog meer rendement uit je webshop kan halen.

Download jouw gratis ebook
  • Blog

CSS3 Regions deel 2: Eindelijk polygonen voor het web
28
Dec 2011
Blog

CSS3 Regions deel 2: Eindelijk polygonen voor het web

28 dec 2011 | Kevin | Blog

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.

polygone tekstkaders

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.

polygone tekstomloop

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:

Polygone tekstomloop

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.

 

Deel deze blog post:

Kevin van Beers | Inbound marketing specialist

Kevin is inbound marketing specialist bij VisionEars. Naast social media heeft hij ook een passie voor marketing automation.

Neem contact met mij op Contact
blog comments powered by Disqus
© 2008-2019 - VisionEars B.V. - Meetbaar online succes