Terwijl Marianne Vos net goud heeft gewonnen wil ik je een technische hoogstandje tonen met css3. Met de nieuwste css3 is het mogelijk de olympische ringen te maken.
De gebruikte css3-code is radial-gradient. Door het plaatsen van pre-fixen in de css werkt het in de meeste (moderne) browsers.
Alles werkt nu voor Google Chrome en Safari (-webkit), Firefox (-moz). Voor iedere browser moet een unieke css code geschreven worden.
Dus voor de firefox -moz-radial-gradient.
De Internet Explorer gaat dit pas later ondersteunen vanaf versie 10. Met deze browser zie je nu dus niets. Je hebt dan wel Windows 8 nodig 🙂
De overlapping van de ringen heb je dan nog niet. Dit gebeurt door de selector :after toe te passen op de class van de div.
Deze techniek is sterk in ontwikkeling. Edugram volgt dit op de voet. Voor webdesign wordt css steeds belangrijker in combinatie met HTML5 en javascript.
Hopelijk wint Nederland nog meer gouden plakken.
Bron: codepen.io (externe link)
Ondersteuning css3 gradient in IE10 (Windows 8) (externe link)