Animated Opening Type

View demo Download source In this tutorial I’m going to explain how to achieve an interesting 3D opening type effect with CSS based on the one I previously created. My experiment was actually inspired by Edenspiekermann’s Open Type project for the Kröller-Müller Museum, a dynamic concept that plays with light and shadow in a simple but incredibly creative way. The aim of this tutorial is to show how we can bring some life to letters using CSS transforms and transitions on pseudo-elements with a technique that will allow to open a letter from all four sides. Please note that pseudo-element transitions don’t work in every browser. Best viewed in Chrome and Firefox. The Markup The markup needed is pretty simple, just a span that contains the character, but since we’re going to work with generated content we must add a custom data-attribute for repeating the text of each letter. We’ll also use a grid as our main wrapping structure where each letter will be inside of a list item. So, each list item will have a specific direction class for the letter: <ul class="grid"> <li class="ot-letter-left"><span data-letter="C">C</span></li> <li class="ot-letter-top"><span data-letter="J">J</span></li> <li class="ot-letter-right"><span data-letter="8">8</span></li> <li class="ot-letter-bottom"><span data-letter="A">A</span></li> </ul> The CSS Let’s add some basic styles to the letter span. There will be three elements to our letter: the dark bottom part that makes the background seem cut out, the opening piece and the shadow that appears when we open the letter. This span that we are styling now, is the bottom part. We’ll add the perspective property to the span so that we can have a nice three-dimensional effect on...