CSS Scroll Snap Points

Great to see this proposed (many people are using it nowadays, boosted by the iPhone 5s page). .gallery { scroll-snap-type: mandatory; scroll-snap-points-x: snapList(786px, 1643px, 2483px, 3264px, 4054px, 4402px); } Don’t like the fact that one needs to specify explicit values (be it in pixels, ems, or percentages), as not all children can be of the […]

Creating Non-Rectangular Layouts with CSS Shapes

With the introduction of CSS Shapes into the web, wrapping content in custom non-rectangular shapes, and recreating print designs and layouts on the web becomes a piece of cake! In this article we’re going to go over the basics of declaring shapes, and creating some simple layouts using these new CSS technologies. Creating Non-Rectangular Layouts […]

High Performance Animations

Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps. True story. A recent animation-heavy prototype I once made was, at first, quickly thrown together by animating top/left, scrollTop […]

CSS Animations: Using animation-fill-mode

Animation-fill-mode defines how styles are applied to the target of your CSS animations outside of the animation itself. By default your CSS animations won’t affect the element you’re animating until the first keyframe is “played”, then stops affecting it once the last keyframe has completed. This can leave you with some awkward jumps and cuts. […]