In my previous post about CSS regions, I showed off some of the basic capabilities that regions provide, described which browsers you can expect to try them out in, and what the future potentially holds.
Regions have such great support in some cutting-edge browsers, that even though they’re so new, they’re loads of fun to play around with. For this post I wanted to focus on some of the fun things we can do with regions when we combine them with other CSS specs like transforms and animations.
Mapping distorted planes over/into images
In this first demo we distort two divs with transforms, and make into them regions using the flow-from property. Once they’re declared as regions, the text starts in the bright yellow sign and seamlessly flows into the pavement below, taking complete account of the transforms that have been applied elsewhere in the CSS.
You can edit the code on-the-fly and change the font-size to see how the text still flows between the two regions, never leaving the constraints of its layout and still rendering beautifully. The code for this example is remarkably simple: a div with a background-image and then two transformed divs to mimic the perspective distortions of the road sign and the concrete. The flow-from/flow-into pair of CSS region properties takes care of everything else! Feel free to fork the code, change the text, map it onto other less obvious parts of the image, and have a blast with transforms and regions!
Integrating regions and animation
Now we’re comfortable with transforms and regions, let’s take it further and see what we can do to get these regions moving with some animation. The CSS cube is a classic demo showing off transformations and CSS transitions/animations. I have to thank Cliff Pyles and David Walsh for publishing a beautiful animated cube that we’re able to fork and make use of here.
By declaring each cube face as a region, we can get our content flowing around the faces of a cube regardless of the user’s default font size, and regardless of the dimensions that we make the cube:
This screenshot above shows the initial flow. Please check my previous post to make sure you have a supported browser and then navigate through to the codepen demo to see the animated flows for yourself. Change the $cube-size and the font-size and observe that the text still reflows perfectly.
Now that iOS7 has been released, you can even browse to either example from your iPhone or iPad without having to enable any special developer-only flags.
Have you tried out the region support with your own projects yet? Share your hacks and opinions in the comments below!
Follow @LeeMallabone for more CSS tips, tricks and hacks.
fonicmonkey 