Thinking Outside the Box with CSS Shapes

CSS shapes allow designers to move past the limitations of rectangular box layouts and create rich designs previously only possible in print. This course will teach you the foundations of using CSS shapes.

Course info

Rating

(40)

Level

Intermediate

Updated

Jul 19, 2016

Duration

1h 13m

Description

Web designers can use CSS shapes to create rich, complex layouts like those common in print design. This course will introduce you to the CSS Shapes specification and show you how to use its properties in-depth. You'll learn about various interesting use cases and examples, ranging from basic to complex, as well as the future of the spec, browser support, and helpful tools and resources. By the end of this course, you'll be up and running with CSS shapes, and thinking about web design and layout in a whole new way.

About the author

Brian Treese is the Chief Designer at SoCreate, a company building a fun and easy way to turn great ideas into movie & TV show scripts. Technically a Web Designer (he's always loved the aesthetic side of the web), but his expertise does not stop at Photoshop and Illustrator.

More from the author

Section Introduction Transcripts

Course OverviewHi everyone, my name is Brian Treese. And welcome to my course Thinking Outside the Box with CSS Shapes. I'm the Chief Designer at Socreate. For the longest time we've been stuck with rectangles and boxes for layout on the web. And it makes things that are common yet beautiful in the print world difficult if not impossible on the web. CSS Shapes changed this. Leveling the playing field, allowing us to create much more engaging layouts and designs on the web. In this course, we're going to explore what CSS shapes are and why we need them. We will discuss the basic concepts around how they work. We will examine the properties and functions associated with this spec and we will examine and manipulate basic shape examples. We will then take them to the next level with more complex examples and use cases. We will also cover browser support and some very handy tools and resources that make working the shapes much easier. By the end of this course you will be thinking about layout on the web in a whole new way. You'll be ready to push the envelope and break free from the rectangular world of the past. Before beginning this course, you should be familiar with HTML, CSS, and traditional layout methods on the web. From here continue your learning by diving into the future of web layout with courses on Flexbox and CSS Grid Layout. I hope you'll join me on this journey to learn CSS shapes with the thinking outside of the box with CSS Shapes course at Pluralsight.

Taking CSS Shapes FurtherSo in the previous module we learned about what shapes are, what we can do with them, and how we use them. Well, in this module, we'll dive in deeper. We'll begin by taking a look at a more realistic example where we take a more complex editorial style design with content flowing around imagery and we'll convert it into HTML and CSS for shapes. Then we'll take a look at animating CSS shapes to take our out-of-the-box designs to the next level. Then we'll look at an amazing example created by the folks at Adobe that brings all of this and more together to create an over the top and engaging storytelling experience. And finally we will take a peek in the future of CSS shapes with the shape and side property in CSS Exclusions. So let's jump on in and get started.