Constructs

One of the new features of CSS3 is the Flexbox Layout, officially called CSS Flexible Box Layout Module which was designed for laying out more complex applications and webpages. Flex layout is superficially similar to block layout. It lacks many of the more complex text- or document-centric properties that can be used in block layout, such as floats and columns. In return it gains simple and powerful tools for distributing space and aligning content in ways that webapps and complex web pages often need. The contents of a flex container:

• can be laid out in any flow direction (leftwards, rightwards, downwards, or even upwards!)
• can have their display order reversed or rearranged at the style layer (i.e., visual order can be independent of source and speech order)
• can be laid out linearly along a single (main) axis or wrapped into multiple lines along a secondary (cross) axis
• can “flex” their sizes to respond to the available space
• can be aligned with respect to their container or each other
• can be dynamically collapsed or uncollapsed along the main axis while preserving the container’s cross size

For a more visual guide to the CSS3 Flexbox properties, check out this Scotch.io article by Dimitar Stojanov with the accompanying demo.

View More View Demo

Are you a Star Wars fan? Then you should check this out. Nicholas Cerminara of scotch.io has created a pure CSS3 Star Wars lightsaber built around the HTML checkbox element that you can toggle on and off. He utilizes the checkbox hack :checked ~ div to construct the lightsaber. Nicholas admitted that he created this just for fun and less for UI/UX but boy it sure looks very cool. His demo features four different lightsabers: Yoda’s, Darth Vader’s, Obi-Wan’s, and Mace Windu’s. Hit the buttons below to view more.

View More View Demo

Hamburger menus have become the staple menu style in responsive websites and web apps. The presence of a hamburger menu is usually indicated using a recognizable UI button with a three-bar icon on the top corner of the screen. With the coming of age of CSS animation, front-end developers can get creative by applying cool animations on the button as it transition between open and close states. The key requirement for doing this is to avoid using a static image as the button icon, instead the three-bars are added using CSS pseudo-elements so that they can be manipulated using CSS. Web developer Nick Salloum has written an easy to follow tutorial on animating hamburger menu icons using only CSS along with four cool animation ideas in his demo. Hit the buttons below to learn more or view the demo.

View More
View Demo

Today many front-end developers are leveraging CSS3 transitions, transforms, and animations to add a new layer of application interactivity that was previously left up to JavaScript libraries or Flash. If you have been doing this long enough, you’ll be aware that the smoothest and most beautiful animations are hardware-accelerated. A fairly new CSS property called will-change will allow you to optimize your animation executions ahead of time by letting the browser and hardware perform potentially-expensive work preparing for an animation before the animation actually begins. As simple as it may sounds, implementing will-change into your code is not straightforward though. This Sitepoint article by Nick Salloum attempts to explain what it is, when and how to use it, and how not to use it. Click the button to read more.

View More