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 1: Eindelijk kolommen voor het web
30
Nov 2011
Web development

CSS3 Regions deel 1: Eindelijk kolommen voor het web

30 nov 2011 | Kevin | Web development

Bekijk de afbeelding hierboven eens, wanneer we op dit moment in html of css tekst op een soortgelijke manier over meerdere kolommen willen verdelen, doen we dit door deze tekst op te delen in meerdere blokken, divs, waarna we deze blokken naast elkaar plaatsen. Deze techniek brengt echter een paar problemen met zich mee. Stel bijvoorbeeld dat een gebruiker de tekst wat vergroot, of zelfs een iets ander lettertype gebruikt. Het resultaat zal zijn dat de verhoudingen in het ontwerp verloren gaan, omdat ieder vak wordt vergroot in plaats dat de tekst gewoon netjes wordt verdeeld over de drie vakken. En als we geen complexe javascript trucs toepassen zal een gedeelte van de tekst bijvoorbeeld buiten het scherm vallen wanneer een bezoeker zijn browser verkleind of tablet kantelt.

Adobe's oplossing

Om dit probleem op te lossen heeft adobe nu een nieuwe css technologie ontwikkeld en aan het w3c voorgesteld deze in de volgende css standaard op te nemen. Dit css prototype heet CSS3 regions en werkt als volgt. Met CSS3 Regions kun je apart een bron aangeven waarin de tekst staat die over de verschillende div’s verdeeld moet worden. Dit ziet er in de html code als volgt uit:

Lorem ipsum dolor [...]

 
 
 

In de css code definieer je daarna welk div de bron van de tekst is die je wilt verdelen over verschillende kolommen met de nieuwe “flow” property.

 

#bron { flow: "main-thread"; }

Om in de css code aan te geven dat de overige div’s gebruikt moet worden als een kolom en welke tekst erin moet worden weergegeven gebruik je de “content” property.

.kolom { content: from(main-thread); }

Het resultaat Het resultaat van de bovenstaande code zou zijn dat alle tekst in de div “bron” wordt verdeeld over de drie div’s met de class “kolom”. De onderstaande twee afbeeldingen demonstreren het voordeel hiervan. Afbeelding 1 zou het resultaat kunnen worden in een gemaximaliseerd venster.

Afbeelding 2, hieronder, laat zien wat het resultaat zou worden op het moment dat het venster wordt verkleind.

Op deze manier is het dus mogelijk websites te maken die zich volledig aanpassen aan de afmetingen van de browser van de gebruiker, iets wat tot nu toe vrijwel onmogelijk was.

Andere voordelen van css regions

In ons volgende artikel over css regions zullen we kijken naar de nieuwe mogelijkheden die dit prototype biedt om tekst vloeiend om afbeeldingen te laten lopen.

 

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