CSS3 Features: RGBA and Gradients

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 features in CSS3 called gradients to design elements with gradients.

rgba()

rgba() is a new feature added to CSS3 for color setting with an opacity value for a color. 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 gradient features. 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.

Linear gradient
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 linear-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

Conclusion

In this article, we studied CSS3 Features: RGBA and Gradients