Familiarize Yourself with CSS3's Shape Properties

With CSS3's new shape properties we can do even more with floating elements and how the surrounding inline elements wraps around it.

I am sure you have already got an idea of what this is about. CSS Shapes are different from shapes we make with the elements, no matter if we give an element a border-radius of 50%, the visual look of the element will be an ellipse but still the outer or the bounding will be a box -- CSS Shapes are here to change that and you can do things out of the box! Poetic, isn't it ?

Things you need to know

Don't Rely on It, at least for now

CSS Shapes are pretty new and it isn't supported in even all the major browsers as of now (April 2015) so using them in production level is still not recommended if the overall experience relies on it, whereas you can of course use it where fallback is present or even if there's no fallback the experience of the user isn't affected.

This is a great addition. You can for example use it in a profile card where the text is wrapped around the profile image, that would make it look good and even if it isn't supported in the browser the text will gracefully wrap around the profile image box as it used to do without the CSS Shapes.

Understanding The Properties

Before you can use it with all its advantages you need to know some of its most important properties. There are 3 properties which is the most important ones for carrying out tasks related to CSS Shapes. Follow the link for detailed information about each property.

1. shape-outside - This property defines the shape the element must have. There can be four possible values a. circle() b. ellipse() c. polygon() d. inset() and the last e. url()
2. shape-margin - Simple enough, you define the margin around shape,
3. shape-image-threshold - This is an interesting one. You define the threshold of the transparent PNG/WebP image 

Shapes works only on floating elements and only inline elements can wrap around it in the corresponding shape. There's another CSS specifications for arbitrarily positioned elements to wrap its surrounding inline elements in a desired shape.

Using Them

Experimenting with new features is an interesting thing you can do as a developer/designer for the evolving web. I will show you how this can be used in its most basic forms. 

Circle Shape with circle()

Try circle() first, it will give you a fair idea of what CSS shapes are about and how to use in the best ways.

<div class='shape'></div>
<p>
  <span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non ex venenatis, egestas est vitae, lacinia libero. Sed pretium aliquet ultricies. Cras id semper nunc. Sed in leo eu nibh maximus bibendum. Cras pretium leo non lorem venenatis sollicitudin. Nulla sit amet condimentum erat.
  </span>
</p>

<style>
.shape {
 float:left; /* Works on only floating elements */
 width:160px;
 height:160px;
 margin:5px;
 background-color: #eee;
 border-radius: 50%;

 /* CSS for Shaping */
 shape-outside: circle(50%);
}
</style>

Demonstration below:
CSS3 Shapes - Circle Demo / RemPixels
The content box is still square but the circle is now the actual shape of the element outer body and the surrounding inline elements will wrap around it as expected.

The purple highlighted area is the shape. Try changing the values and see how it works.

For some really in-depth explanations of how what these values mean and how the shape works refer to HTML5Rocks Getting Started Guide on CSS Shapes - They have explained it very clearly and with much more details.

ellipse(), polygon() and inset()

These are the same as the default shapes the CSS3 Shape property allows and provides. You can create ellipse i.e oval shape, then there's polygon which of course will be used to create polygons.

inset is used to create regular rectangular shapes. Though rectangular shapes can be created with polgyon(), inset() provides a straightforward way for that.

The final but the most interesting: url()

Now this is something about CSS shapes feature I love the most. You can specify URL to a PNG/WebP image with transparent background and the magic will turn the shapes in the image to real shape for the element.

You can create a PNG image with the shape you want and specify it using this function to create a shape corresponding to the shape in the image. You can even use a real image and create transparent background around an object like isolating it.

The HTML Markup and CSS

<div class='text-container'>
   <div class='clear'></div>
   <div class='shaper'>
   </div>
    
   <div class='text'>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non ex venenatis, egestas est vitae, lacinia libero. Sed     pretium aliquet ultricies. Cras id semper nunc. Sed in leo eu nibh maximus bibendum. Cras pretium leo non lorem venenatis sollicitudin. Nulla sit amet condimentum erat. Aliquam mattis elementum mauris vel suscipit. In lacinia nec felis dictum vehicula. Aenean ut sem quis metus varius tempor nec non elit. Aliquam ac dolor nisi. Sed vitae leo ..... [more]
   </div>
    
   <div class='clear'></div>
</div>

I used a lot of containers but you can use it according to your needs.

.text-container .shaper {
  width:200px;
  height:500px;
  float:left;
  background-image:url('http://i.imgur.com/tLg97rY.png'); /* Setting the background image to the same image we will use in shape-outside */

  shape-outside:url('http://i.imgur.com/tLg97rY.png');
  shape-margin:10px;
}

Check this demo
JS Bin

In the demo I used a div element and set the same image as its background image which I used in the CSS shape. This is to visualize, other wise it isn't required to always set the background to the same image.

Additionally you can use <img> and give it the shape using the same technique and it will work.

Download The Demo Files

For your reference and experiment use I prepared this small demo. Tinker with the codes and see how it works.
Download CSS Shapes Demo

Currently CSS Shapes are still in its egg shells, as it evolves we will see more features making its way into this part of the CSS. We will later cover this topic on RemPixels so do join our mailing list for more Web Design news and tutorials.