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 for representing 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:
  1. a[href ^= "http://"] {  
  2.     color: black;  
  3. }  
  4. a[href $= ".rar"] {  
  5.     color:green;  
  6. }  
  7. a[href *= "download"] {  
  8.     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:
  1. <div>  
  2.     <a href="http://www.c-sharpcorner.com">Click Me</a>  
  3.     <a href="download">Click Me</a>  
  4.     <a href="screen.rar">Click Me</a>  
  5. </div> 
When it is viewed in the Page Inspector
 
Use of Selectors in Page Inspector
 

Pseudo class selectors

 
This selector allows you to match the element 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, 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:
  1. #MyDivBorder {  
  2.      text-align: center;  
  3.     height:100px;  
  4.     width:100px;  
  5.     color:#ff6600;  
  6.      border:34px solid transparent;  
  7.     border-image:url('DivBorder.jpg') 230 230 round;  

Use of Border Image in CSS 3
 
As you can see that 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:
  1. #mydivwithborder  
  2. {  
  3.     text-align:center;  
  4.     height:100px;  
  5.     width:100px;  
  6.     border:30px solid transparent;  
  7.     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:
  1. #RgbaDiv {  
  2.     text-align: center;  
  3.     height:100px;  
  4.     width:100px;  
  5.     background-color:rgba(200,50,245,0.2);  
  6.     float:left;  
  7.     color:#ff6600;  
  8.     border:34px solid transparent;  
  9.     border-image:url('DivBorder.jpg') 230 230 round;  

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

Multicolumn

 
It is so uninteresting to show the text in the columns because the 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:
  1. #MyDivColumns {  
  2.     width:550px;  
  3.     margin0 auto;  
  4.     text-aligncenter;  
  5.     column-count:4;  
  6.     -moz-column-count:4;  
  7.     -webkit-column-count:4;  

The entire text is split into 4 columns. You can see the following screenshot
 
Use of Column Count in CSS3
 

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.


Similar Articles