CSS Clipping and Masking — Show and Hide Parts of Images and Elements with Code

If you’ve done any work with a graphics editor, you likely know what clipping and masking are. Both hide parts of elements visually. Clipping defines which part of an element to show and which to hide, while masking combines two elements to determine how much of each pixel should be transparent.

Continue reading

CSS Grids: Examples and Code for Common Layouts

Earlier in the week I walked through the css grid layout module. There was a lot to cover and as the post grew long I saved some real examples for today.

Continue reading

The CSS Grid Layout Module — Flexible Structures for Content

I often suggest that designing with a grid is a good idea. Developing them in html and css sometimes feels like a hack, though. Developers certainly build grids for use online and there are a variety of frameworks you can use that do the work for you. Still, wouldn’t it be nice to have some native css for creating grids?

Continue reading

The CSS Regions Module — Control Where Content Flows

Would you like more control of your content and how it flows through your layout? Would you like an easy way to create more complex layouts? How about an easy way to independently style sections of a document, without complicated css rules that overwrite each other? If you answered yes to any of these questions, then css regions might be what you’re looking for.

Continue reading

When Can You Use New HTML and CSS in Production?

The last week or two, I’ve been looking at some not quite ready for production css in the css shapes module and the css exclusions module. While neither is ready just yet, you might want to use them as soon as possible. Other things like flexbox are much closer to being ready. It begs the question how do we know when it’s ok to adopt new html or css techniques?

Continue reading