CSS Weekly 193

Caring about Opentype Features

Tim Brown explains what OpenType features are, when to use them, and why they matter. Read more

Animation in Responsive Design

Val Head demonstrates strategies for getting the most out of animation at any screen size. Read more

From Our Sponsor

Buddy

Buddy, a simple Git hosting with easy CI tools, lets you host, build and deploy apps and websites with little to no effort. Start my free Buddy trial

Articles & Tutorials

Intuitive Scrolling Interfaces with CSS Scroll Snap Points

Simon Codrington gives a nice introduction into the CSS Scroll Snap Points spec. Read more

Using Multi-Step Animations and Transitions

Geoff Graham on multi-step animations and transitions, fun little tricks we have at our disposal to create rich, dynamic movement in CSS. Read more

Blending Modes in CSS: Color Theory and Practical Application

Jonathan Cutrell explains how blending modes work, uncovers the math behind them, and looks at the different ways you can implement blending modes using CSS. Read more

Battling BEM – 5 Common Problems and How to Avoid Them

Whilst BEM is an awesome tool for writing modular CSS, you’ll inevitably hit some roadblocks. David Berner shares some advice on how to resolve them. Read more

Star Wars

Donovan Hutchinson shows how to recreate the Star Wars movie title from “The Force Awakens” trailer using CSS. Read more

Tools

Gridly

Gridly is a minimal (~157 bytes) grid system for modern browsers. Check it out

debugCSS

debugCSS is a debugging tool meant to be loaded on an existing page to highlight potentially broken, malformed or legacy (X)HTML. Check it out

Inspiration

Single Element Pure CSS MacBook Pro

Joshua Hibbert shows that you don’t need a lot of HTML elements to create something cool with CSS. Get inspired