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.
- 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 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