Introducing New Features of CSS3

Introduction

Today we'll work with the new CSS3 features that provide style for web pages. Most professional web developers use CSS for styling web pages. In the current scenario, CSS 3 is the latest version of CSS and you can determine the use of some new features released with CSS 3.

Overview

I am using here some features to represent the styling of the web pages more efficiently. Please be sure to use the appropriate browser version for the features described here. So, let's discuss the following new features as are listed below.

Selectors
Border Images
Gradient
Opacity
Multicolumn

Selectors

Now using the selectors in CSS, you can match the elements and apply the styles for them. The CSS 3 adds new selectors to the existing selectors. There are two types of selectors present here.

Attribute substring selectors You can apply the attribute substring selector where the element attribute starts with, ends with, or contains a specified string.

For example

Step 1. We've applied the following CSS3 selectors.

a[href^="http://"] {
    color: black;
}

a[href$=".rar"] {
    color: green;
}

a[href*="download"] {
    color: magenta;
}

The ^= is known as the "starts with" selector. It looks for an attribute value beginning with an "http://" and the $= is known as the "ends with" selector that looks for the anchor elements whose href attribute ends with .rar and the *= selects the elements whose href attribute contains a string download anywhere in the attribute value.

Step 2. The markup is as shown below.

<div>
    <a href="http://www.c-sharpcorner.com">Click Me</a>
    <a href="download">Click Me</a>
    <a href="screen.rar">Click Me</a>
</div>

When it is viewed in the Page Inspector.

Page Inspector

Pseudo class selectors

This selector allows you to match the elements that is based on their structural position.

As an example: What if we want to apply the color for the last child of a div? Then we can style it using the following selector.

div:last-child {
    color: yellow;
}

You can determine various pseudo-classes such as first-child, and nth-child and have a look at the following screenshot.

Pseudo class in CSS 3

Border Images

You generally use the solid or dashed line as a border of the DOM element. Now CSS3 allows you to use the image as a border of the element. Using an image as a border will make the element border quite fancy and attractive.

Create the CSS code as in the following.

#MyDivBorder {
    text-align: center;
    height: 100px;
    width: 100px;
    color: #ff6600;
    border: 34px solid transparent;
    border-image: url('DivBorder.jpg') 230 230 round;
}

Border Image in CSS 3

As you can see the border-image property is used and contains the URL of the border-image. The round indicates that the middle part of the border image is repeated. The border-image width is 30px.

Gradient

Generally, a solid color is used as a background of an element. Now CSS3 provides the Gradient with which we can fill the color without needing any images. We can apply an easy transition of colors.

For example

#mydivwithborder {
    text-align: center;
    height: 100px;
    width: 100px;
    border: 30px solid transparent;
    background: linear-gradient(to bottom, #bfdb5e, #6d8928);
}

Gradient Color in CSS3

As you can see, the gradient color is specified from top to bottom, and starting and ending colors are defined also. You can also use various gradient types.

Opacity

We use rbg() to set the color of the element in the CSS2 and now in the CSS3, we use rgba() that allows specifying an alpha value in addition to red, green, and blue values. The alpha value controls the opacity of the element. The value should be less than 1. It can be any value from 0 to 1. 0 is fully transparent and 1 is fully vague.

So consider the following CSS code.

#RgbaDiv {
    text-align: center;
    height: 100px;
    width: 100px;
    background-color: rgba(200, 50, 245, 0.2);
    float: left;
    color: #ff6600;
    border: 34px solid transparent;
    border-image: url('DivBorder.jpg') 230 230 round;
}

As you can see I've applied the background color (RGBA) with the border image also. When you see the result, it is as shown below

Border using rgba

Multicolumn

It is so uninteresting to show the text in the columns because CSS2 does not provide a smooth way to split the text into columns. Previously developers had to work hard to calculate the text for the respective column. CSS3 now has the column-count property.

Consider the following CSS

#MyDivColumns {
    width: 550px;
    margin: 0 auto;
    text-align: center;
    column-count: 4;
    -moz-column-count: 4;
    -webkit-column-count: 4;
}

The entire text is split into 4 columns. You can see the following screenshot.

Column Count

Summary

This article described the various new features of CSS3 that are used to enhance the webpage to make the style smoother for developers and designers. Thanks for reading.