CSS3 Features: RGBA and Gradients

In this article, I am going to explain new features in CSS3.

Introduction

CSS3 Features

I have already listed CSS3 features in one of my articles. Please click the following link to view my articles on CSS3 features.

CSS3 Features: Borders

In this article, I will explain the following features:

  • New feature in CSS3 called rgba() for colour setting.
  • New feature in CSS3 called gradients to design elements with gradients.

rgba()

rgba() is a new feature added to CSS3 for colour setting with an opacity value for a colour. The “a” (in rgba) holds the opacity value for a colour.

Example

 1. HTML and CSS

<div class="smallbox opacity1">
</
div>
.smallbox
{

   width:100px;
  
height:100px;
  
margin:5px;
  
float:left;
}
.opacity1
{
  
background-color: rgba(0,255,0,1);
}

Design



2.  HTML and CSS

<div class="smallbox opacity2">

</div>

 

.smallbox

{

   width:100px;

   height:100px;

   margin:5px;

   float:left;

}

.opacity2

{

   background-color: rgba(0,255,0,.7);

}

Design


3. HTML and CSS

<div class="smallbox opacity3">

</div>

 

.smallbox

{

   width:100px;

   height:100px;

   margin:5px;

   float:left;

}

.opacity3

{

   background-color: rgba(0,255,0,.5);

}

Design



4. HTML and CSS

<div class="smallbox opacity4">
</
div>
.smallbox
{
  
width:100px;
  
height:100px;
  
margin:5px;
  
float:left;
}
.opacity4
{
  
background-color: rgba(0,255,0,.3);
}

Design



5. HTML and CSS

<div class="smallbox opacity5">
</
div>
 
.smallbox
{
  
width:100px;
  
height:100px;
  
margin:5px;
  
float:left;
}
.opacity5
{
  
background-color: rgba(0,255,0,.1);
}

Design



Gradients

CSS3 made web designer/developer's life much easier by introducing gradients feature. Earlier they need to use images for these effects. By getting the gradient effect for an element using CSS3, we can reduce the download time and bandwidth usage since there are no images used for these effects and also as the gradient is generated by the browser, elements with gradients look better when zoomed.

There are the following two types of gradients in CSS3.

  1. Linear gradient
  2. Radial gradient

Here I am taking a simple div with a border for the demo of "linear-gradient" and "radial-gradient" properties in CSS3.

Simple div with a border

HTML and CSS

<div class="simple">
</
div>
 
.simple
{

   width:200px;
  
height:100px;
  
padding:10px;
  
text-align:center;
  
display:table-cell;
  
vertical-align:middle;
  
font-size:large;
  
color:white;
  
font-family: Verdana;
  
border:2px solid #000;
}

Design



Linear gradient: left to right example

Syntax

background: linear-gradient(direction, color1, color2, …);

HTML and CSS

<div class="simple lineargradlefttoright">

CSS3 Features

</div>

 

.simple

{

   width:200px;

   height:100px;

   padding:10px;

   text-align:center;

   display:table-cell;

   vertical-align:middle;

   font-size:large;

   color:white;

   font-family: Verdana;

   border:2px solid #000;

}

.lineargradlefttoright

{

   background: -webkit-linear-gradient(left, green, black); /* For Safari and Chrome*/

   background: -o-linear-gradient(right, green, black); /* For Opera */

   background: -moz-linear-gradient(right, green, black); /* For Firefox */

   background: linear-gradient(to right, green, black); /* Standard syntax */

}

Design



Linear gradient: top to bottom example

Syntax

background: linear-gradient(color1, color2, …);

HTML and CSS

<div class="simple lineargrad">

CSS3 Features

</div>

 

.simple

{

   width:200px;

   height:100px;

   padding:10px;

   text-align:center;

   display:table-cell;

   vertical-align:middle;

   font-size:large;

   color:white;

   font-family: Verdana;

   border:2px solid #000;

}

.lineargrad

{

   background: -webkit-linear-gradient(green, black); /* For Safari and Chrome*/

   background: -o-linear-gradient(green, black); /* For Opera */

   background: -moz-linear-gradient(green, black); /* For Firefox */

   background: linear-gradient(green, black); /* Standard syntax */

}

Design



Linear gradient: using angles

Syntax

background: linear-gradient(angle, color1, color2);

HTML and CSS

<div class="simple lineargradangle180">

CSS3 Features

</div>

.simple

{

   width:200px;

   height:100px;

   padding:10px;

   text-align:center;

   display:table-cell;

   vertical-align:middle;

   font-size:large;

   color:white;

   font-family: Verdana;

   border:2px solid #000;

}

.lineargradangle180

{

   background: -webkit-linear-gradient(180deg, green, black); /* For Safari and Chrome*/

   background: -o-linear-gradient(180deg, green, black); /* For Opera */

   background: -moz-linear-gradient(180deg, green, black); /* For Firefox */

   background: linear-gradient(180deg, green, black); /* Standard syntax */

}

Design

Linear gradient: 180deg


HTML and CSS

<div class="simple lineargradangle90">

CSS3 Features

</div>

 

.simple

{

   width:200px;

   height:100px;

   padding:10px;

   text-align:center;

   display:table-cell;

   vertical-align:middle;

   font-size:large;

   color:white;

   font-family: Verdana;

   border:2px solid #000;

}

.lineargradangle90

{

   background: -webkit-linear-gradient(90deg, green, black); /* For Safari and Chrome*/

   background: -o-linear-gradient(90deg, green, black); /* For Opera */

   background: -moz-linear-gradient(90deg, green, black); /* For Firefox */

   background: linear-gradient(90deg, green, black); /* Standard syntax */

}

Design

Linear gradient: 90deg:


HTML and CSS

<div class="simple lineargradangle0">

CSS3 Features

</div>

 

.simple

{

   width:200px;

   height:100px;

   padding:10px;

   text-align:center;

   display:table-cell;

   vertical-align:middle;

   font-size:large;

   color:white;

   font-family: Verdana;

   border:2px solid #000;

}

.lineargradangle0

{

   background: -webkit-linear-gradient(0deg, green, black); /* For Safari and Chrome*/

   background: -o-linear-gradient(0deg, green, black); /* For Opera */

   background: -moz-linear-gradient(0deg, green, black); /* For Firefox */

   background: linear-gradient(0deg, green, black); /* Standard syntax */

}

Design

Linear gradient: 0deg



Linear gradient: fading effect using rgba()

Syntax

background: linear-gradient(direction, color1 (in rgba()), color2 (in rgba()));

HTML and CSS

<div class="simple lineargradfadeeffect">

CSS3 Features

</div>

 

.simple

{

   width:200px;

   height:100px;

   padding:10px;

   text-align:center;

   display:table-cell;

   vertical-align:middle;

   font-size:large;

   color:white;

   font-family: Verdana;

   border:2px solid #000;

}

.lineargradfadeeffect

{

   background: -webkit-linear-gradient(left, rgba(0,255,0,0), rgba(0,255,0,1)); /* For Safari and Chrome*/

   background: -o-linear-gradient(right, rgba(0,255,0,0), rgba(0,255,0,1)); /* For Opera */

   background: -moz-linear-gradient(right, rgba(0,255,0,0), rgba(0,255,0,1)); /* For Firefox */

   background: linear-gradient(to right, rgba(0,255,0,0), rgba(0,255,0,1)); /* Standard syntax */

}

Design



Linear gradient: Repeat example

We can repeat a liner-gradient by using a function called repeating-linear-gradient ().

HTML and CSS

<div class="simple lineargradrepeat">
CSS3 Features
</div>
.simple
{
  
width:200px;
  
height:100px;
  
padding:10px;
  
text-align:center;
  
display:table-cell;
  
vertical-align:middle;
  
font-size:large;
  
color:white;
  
font-family: Verdana;
  
border:2px solid #000;
}
.lineargradrepeat
{
  
background: -webkit-repeating-linear-gradient(yellow, green 10%); /* For Safari and Chrome*/
   background: -o-repeating-linear-gradient(yellow, green 10%); /* For Opera */
   background: -moz-repeating-linear-gradient(yellow, green 10%); /* For Firefox */
   background: repeating-linear-gradient(yellow, green 10%); /* Standard syntax */
}

design



Linear gradient: with multiple color stops

HTML and CSS

Example 1

<div class=”simple lineargradmultiplecolors”>

CSS3 Features

</div>

 

.simple

{

   width:200px;

   height:100px;

   padding:10px;

   text-align:center;

   display:table-cell;

   vertical-align:middle;

   font-size:large;

   color:white;

   font-family: Verdana;

   border:2px solid #000;

}

.lineargradmultiplecolors

{

   background: -webkit-linear-gradient(left, red, green, blue); /* For Safari and Chrome*/

   background: -o-linear-gradient(right, red, green, blue); /* For Opera */

   background: -moz-linear-gradient(right, red, green, blue); /* For Firefox */

   background: linear-gradient(to right, red, green, blue); /* Standard syntax */

}

Design



Example 2

<div class=”simple lineargradmultiplecolors2”>

CSS3 Features

</div>

 

.simple

{

   width:200px;

   height:100px;

   padding:10px;

   text-align:center;

   display:table-cell;

   vertical-align:middle;

   font-size:large;

   color:white;

   font-family: Verdana;

   border:2px solid #000;

}

.lineargradmultiplecolors2

{

   background: -webkit-linear-gradient(left, red, green, blue, yellow); /* For Safari and Chrome*/

   background: -o-linear-gradient(right, red, green, blue, yellow); /* For Opera */

   background: -moz-linear-gradient(right, red, green, blue, yellow); /* For Firefox */

   background: linear-gradient(to right, red, green, blue, yellow); /* Standard syntax */

}

Design



Radial Gradient

Syntax



Radial gradient: basic example

We can implement a radial gradient using a function called radial-gradient () and we must define at least two color stops to create a radial gradient.

HTML and CSS

<div class=" simple radialgrad">
CSS3 Features
</div>
 
.simple
{

 
 
width:200px;
  
height:100px;
  
padding:10px;
  
text-align:center;
  
display:table-cell;
  
vertical-align:middle;
  
font-size:large;
  
color:white;
  
font-family: Verdana;
  
border:2px solid #000;
}
.radialgrad
{
  
background: -webkit-radial-gradient(green, black); /* Safari */
   background: -o-radial-gradient(green, black); /* For Opera */
   background: -moz-radial-gradient(green, black); /* For Firefox */
   background: radial-gradient(green, black); /* Standard syntax */
}

Design



Radial gradient: Repeat example

We can repeat a radial gradient by using a function called repeating-radial-gradient ().

HTML and CSS

<div class="simple radialgradrepeat">

CSS3 Features

</div>

 

.simple

{

   width:200px;

   height:100px;

   padding:10px;

   text-align:center;

   display:table-cell;

   vertical-align:middle;

   font-size:large;

   color:white;

   font-family: Verdana;

   border:2px solid #000;

}

.radialgradrepeat

{     

   background: -webkit-repeating-radial-gradient(yellow, green 15%);/* For Safari */

   background: -o-repeating-radial-gradient(yellow, green 15%);/* For Opera */

   background: -moz-repeating-radial-gradient(yellow, green 15%);/* For Firefox */

   background: repeating-radial-gradient(yellow, green 15%);/* Standard syntax */

}

Design



Radial gradient with multiple colors

HTML and CSS

<div class="simple radialgradmulticolor">

CSS3 Features

</div>

 

.simple

{

   width:200px;

   height:100px;

   padding:10px;

   text-align:center;

   display:table-cell;

   vertical-align:middle;

   font-size:large;

   color:white;

   font-family: Verdana;

   border:2px solid #000;

}

 

.radialgradmulticolor

{

    background: -webkit-radial-gradient(green, black, yellow); /* Safari */

    background: -o-radial-gradient(green, black, yellow); /* For Opera */

    background: -moz-radial-gradient(green, black, yellow); /* For Firefox */

    background: radial-gradient(green, black, yellow); /* Standard syntax */

}

Design