When We first started designing and developing websites (back in original CSS days), it was a constant challenge to design knowing the available options of making that render correctly on screen. Photoshop was just clearly ahead of CSS, but no longer is the case. Today’s CSS3 is just as evolved as most of the industry design platforms (ie CS3 suite). There are some really cool and amazing features CSS lets us do right now!

Here are just some of the cool new features:

Blend modes

One of the agonizing things about designing in CSS is the lack of being able to properly blend layers together. Welcome the background-blend-mode property.

.blend {
background-image: url('kitten.jpg');
background-color: #307014;
background-blend-mode: multiply;
}


That is just how easy it has become to incorporate the ideas on the drawing board right into our HTML. If you want to learn more about the syntax go visit this page.

CSS clip-path

Although the clip property has existed since CSS 2.1 it was never very effective since the elements needed to be positioned absolutely and dis not have the polygon aspect of todays more evolved clip-path property.

Whats really great about the clip-path property is we are no longer limited to the rectangle . Now we can draw a region with basic shapes, polygon points, or SVG elements; anything outside that region is not rendered.

#kitten-wrap {
clip-path: polygon(304px 413px,429px 224px,266px 85px,128px 223px);
background: url('/images/kitten.jpg');
}

Which gives us this result.

I suggest the use of this polygon generator for creating the right shape.

CSS has finally introduced masking properties which we will go over in a separate article.

The one thing to keep in mind is that not all these features are supported by every browser. Its important to understand this before you begin the design so you can make the site usable the same way for each user. This browser gap will widen as browsers like Safari, IE are given less and less attention.

For the most part chrome supports most of these features, and firefox is not far behind. We suggest you use this link to determine that.