CSS Shapes: Introduction

When designing for print, the sky is the limit. We can really push the envelope especially when it comes to layout. We can wrap content around any shape we’d like. But on the web, everything is contained within rectangles. We’ve been pretty creative while building in this boxy world but what if we could break free and build designs more similar to those found in editorial design?

What if I told you that we actually can do this today? In this series of posts, I’m going to help you break free from the shackles of the rectangular-ness of the web and bring more of the anything goes-ness from the print realm.

Who’s This Guide For?

This guide is aimed at both developers and designers familiar with HTML and CSS. The code you’ll see won’t require you to be to be a CSS wizard but you’ll need to be comfortable with the syntax and traditional layout methods on the web.

What Will We Cover?

By the time you reach end of this guide, you’ll be thinking about web content design in a whole new way. You will be among the few who build for the web with non-rectangular layouts and content flows. You’ll have many envious developers digging in, inspecting your code, and asking themselves “How did they do this?”.

We will begin first by focusing on what CSS Shape are and the role that they can play in modern web layout. Then, we’ll dig into the fundamentals of the various CSS properties and functions that form the spec and we’ll examine how they work.

Then, we’ll take them even further by looking at a somewhat complex example, something that you might see in the real world. We will then look at animating and transitioning these shapes. We will look at an amazing example developed by the folks at Adobe that brings all of this greatness together. We’ll explore what’s expected in future for CSS Shapes and Exclusions.

And then finally, we’ll discuss and explore some very handy and helpful tools and resources to help us work with shapes along the way.

So let’s get started!

Want to Watch the Full Course?

Don’t want to read? You can watch the full course instead here: CSS Shapes: The Ultimate Guide.

Originally published at https://briantree.se on August 19, 2024.