The Cutting-Edge CSS3 Features That Are Essential to Modern Web Design

Over the last couple of years, CSS has evolved into more than web designers and developers could have ever expected. CSS3 introduced features such as border-radius, box-shadow, text-shadow, text-overflow, multiple-background, transition, flexbox and media queries which can be targeted specifically using vendor prefixes.

However, CSS continues to improve – even though there are still some attributes which are not so well-known. CSS has become more efficient and closer to the features we’d normally implement using JavaScript and other web programming languages.

In this article, we cover some of those cutting-edge CSS3 features that are essential to modern web design.

Multiple Backgrounds

CSS3 allows you to apply multiple backgrounds to elements using a simple comma-separated list. The list is layered to one another with the first background you set up on top and the last background listed on the bottom. Take note that only the last background on the list can display a background color.

Here’s a basic example:

As you can see from the example above, three backgrounds are stacked. A list was also used for the other background properties such as background-repeat and background-position to manage the display of the images.

Background-Clip

Do you remember the days when you needed Photoshop to create image-based text? Photoshop isn’t needed near as much, as CSS3 introduced a property called background-clip that does exactly the same thing.

You can now clip an image with text using the background-clip property. First, you need the div element for the image to be placed above the h1 or the text element you want to clip. Now by using background-clip property, you can clip the image with the text. Make sure that the text-fill-color is transparent.

Below is a demo of how background-clip works:

CSS 3D Transform

With CSS3 you can create an imaginary 3D space. To activate 3D space, an element needs perspective. This can be done in two ways: using the transform property, with the perspective attribute value.

transform: perspective(600px);

Or using the perspective property itself:

perspective: 600px;

The strength of the effect is determined by value you give to it. As the value becomes smaller, the closer you get to the Z plane. The effect yields an impressive result. Below is a demo on how you can manipulate a 3D effect using the transform property:

Calculate Values

One of the features of CSS3 that I love is that you can calculate values of elements using the calc() function. Just like a calculator, it can perform simple mathematical calculations such as the size, angle or frequency.

Check out the code below to see how it works.

The HTML:

This is the text inside the container!

The CSS:

.container {
 width: 80%; /* fallback for browsers without support for calc() */
 width: calc(100% - 80px);
 text-align: center;
 margin-top: 20px;
 position: absolute;
 left: 40px;
 border: 1px solid #3b3b3b;
 background-color: #1dd046;
 padding: 10px;
}

In this example, the CSS creates a container box that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window.

Blend Mode

Using the background-blend-mode property, you can blend images with colors. Just like in Photoshop, you can use different color effect variation properties (blend modes) such as screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. Of course, using the normal property will just retain the original.

Below is a simple demo:

Notice that I used the blend mode property value screen. This would create an image-color blended effect.

Text Overflow

Another great feature of CSS3 is the ability to deal with clipped text which does not fit into its container using the text-overflow property.

text-overflow has three optional values:

1. clip – this is the default value. This will clip the text.
2. ellipsis – this will display an ellipsis ("…") to represent clipped text.
3. initial – this will set the property to its default value.

Note: text-oveflow comes with an overflow property that can be set to hidden, scroll or auto. You can also use white-space:nowrap; to determine the way text is laid out. Check out the examples below:

CSS3 Animation

Before, you could only create animations using JavaScript. But thanks to CSS3, you can add create cool animations without needing to know JavaScript.

There are two ways you can create a cool animation:

1. transition – which adds a smooth transition on mouse over state.
2. @keyframes – this one might be a little bit complicated, but it lets you create an advanced animation.

Let see how these two work. Check out my demo below:

If you want to learn more about CSS3 animation, check this post out.

Flexbox

flexbox is a layout mode in CSS3 which was built to enhance an items’ alignment, direction and order within a container. The advantage is that they work on different screen sizes and devices.

The flexible box model provides an enhancement over the block model without the use of floats. This means that the container’s margins don’t collapse with the margins of its contents.

Let’s see a basic example of a flexbox layout:

To enable a flexbox layout, you need to set the display property to flex or inline-flex on the parent element (flex-container). This will automatically set all of its children to flex items.

Flex Direction

You can also set the direction of each flex item inside the flex-container using the flex-direction property.

There are 4 available values for flex-direction property:

1. row – This is the default value. This will set the direction of flex-items from left-to-right and top-to-bottom.
2. row-reverse – sets the direction of flex-items from right to left.
3. column – sets the flex items vertically.
4. column-reverse – sets the flex items vertically but in a reverse manner.

Let’s see this in action.

On the example above, we set the flex-direction of the flex-container to row-reverse which means setting up the flex-items order from right to left.

There are lots of properties to tackle with flexbox, but this will get you started. If you want to learn more about flexbox, you can visit this article.

Wrapping Up

CSS3 features offer amazing effects and output that let an element gradually change from one style to another and may load faster depending on the hosting you use. They are very helpful if you’re not a programmer and want to create a simple, smooth effect.