Post
Ask Question

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
  1. <div class="smallbox opacity1">  
  2. </div>  
  3. .smallbox  
  4. {  
  5. width:100px;  
  6. height:100px;  
  7. margin:5px;  
  8. float:left;  
  9. }  
  10. .opacity1  
  11. {  
  12. background-color: rgba(0,255,0,1);  
  13. } 
Design
 
 
2.  HTML and CSS
  1. <div class="smallbox opacity2"></div>.smallbox {  
  2.     width: 100px;  
  3.     height: 100px;  
  4.     margin: 5px;  
  5.     float: left;  
  6. }  
  7.   
  8. .opacity2 {  
  9.     background-color: rgba(0, 255, 0, .7);  
  10. } 
Design
 
 
3. HTML and CSS
  1. <div class="smallbox opacity3">  
  2. </div>  
  3.    
  4. .smallbox  
  5. {  
  6.    width:100px;  
  7.    height:100px;  
  8.    margin:5px;  
  9.    float:left;  
  10. }  
  11. .opacity3  
  12. {  
  13.    background-color: rgba(0,255,0,.5);  
  14. } 
Design
 
 
4. HTML and CSS
  1. <div class="smallbox opacity4"></div>.smallbox {  
  2.     width: 100px;  
  3.     height: 100px;  
  4.     margin: 5px;  
  5.     float: left;  
  6. }  
  7.   
  8. .opacity4 {  
  9.     background-color: rgba(0, 255, 0, .3);  
  10. } 
Design
 
 
5. HTML and CSS
  1. <div class="smallbox opacity5"></div>.smallbox {  
  2.     width: 100px;  
  3.     height: 100px;  
  4.     margin: 5px;  
  5.     float: left;  
  6. }  
  7.   
  8. .opacity5 {  
  9.     background-color: rgba(0, 255, 0, .1);  
  10. } 
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.
  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
  1. <div class="simple"></div>.simple {  
  2.     width: 200px;  
  3.     height: 100px;  
  4.     padding: 10px;  
  5.     text-align: center;  
  6.     display: table-cell;  
  7.     vertical-align: middle;  
  8.     font-size: large;  
  9.     color: white;  
  10.     font-family: Verdana;  
  11.     border: 2px solid #000;  
  12. } 
Design
 
 
Linear gradient left to right example
 
Syntax
 
background: linear-gradient(direction, color1, color2, …);
 
HTML and CSS
  1. <div class="simple lineargradlefttoright">  
  2. CSS3 Features  
  3. </div>  
  4.    
  5. .simple  
  6. {  
  7.    width:200px;  
  8.    height:100px;  
  9.    padding:10px;  
  10.    text-align:center;  
  11.    display:table-cell;  
  12.    vertical-align:middle;  
  13.    font-size:large;  
  14.    color:white;  
  15.    font-family: Verdana;  
  16.    border:2px solid #000;  
  17. }  
  18. .lineargradlefttoright  
  19. {  
  20.    background: -webkit-linear-gradient(left, green, black); /* For Safari and Chrome*/  
  21.    background: -o-linear-gradient(right, green, black); /* For Opera */  
  22.    background: -moz-linear-gradient(right, green, black); /* For Firefox */  
  23.    background: linear-gradient(to right, green, black); /* Standard syntax */  
  24. } 
Design
 
 
Linear gradient top to bottom example
 
Syntax
 
background: linear-gradient(color1, color2, …);
 
HTML and CSS
  1.  <div class="simple lineargrad">  
  2. CSS3 Features  
  3. </div>  
  4.    
  5. .simple  
  6. {  
  7.    width:200px;  
  8.    height:100px;  
  9.    padding:10px;  
  10.    text-align:center;  
  11.    display:table-cell;  
  12.    vertical-align:middle;  
  13.    font-size:large;  
  14.    color:white;  
  15.    font-family: Verdana;  
  16.    border:2px solid #000;  
  17. }  
  18. .lineargrad  
  19. {  
  20.    background: -webkit-linear-gradient(green, black); /* For Safari and Chrome*/  
  21.    background: -o-linear-gradient(green, black); /* For Opera */  
  22.    background: -moz-linear-gradient(green, black); /* For Firefox */  
  23.    background: linear-gradient(green, black); /* Standard syntax */  
  24. } 
Design
 
 
Linear gradient: using angles
 
Syntax
 
background: linear-gradient(angle, color1, color2);
 
HTML and CSS
  1. <div class="simple lineargradangle180">  
  2. CSS3 Features  
  3. </div>  
  4. .simple  
  5. {  
  6.    width:200px;  
  7.    height:100px;  
  8.    padding:10px;  
  9.    text-align:center;  
  10.    display:table-cell;  
  11.    vertical-align:middle;  
  12.    font-size:large;  
  13.    color:white;  
  14.    font-family: Verdana;  
  15.    border:2px solid #000;  
  16. }  
  17. .lineargradangle180  
  18. {  
  19.    background: -webkit-linear-gradient(180deg, green, black); /* For Safari and Chrome*/  
  20.    background: -o-linear-gradient(180deg, green, black); /* For Opera */  
  21.    background: -moz-linear-gradient(180deg, green, black); /* For Firefox */  
  22.    background: linear-gradient(180deg, green, black); /* Standard syntax */  
  23. } 
Design
 
Linear gradient: 180deg
 
 
HTML and CSS
  1. <div class="simple lineargradangle90">  
  2. CSS3 Features  
  3. </div>  
  4.    
  5. .simple  
  6. {  
  7.    width:200px;  
  8.    height:100px;  
  9.    padding:10px;  
  10.    text-align:center;  
  11.    display:table-cell;  
  12.    vertical-align:middle;  
  13.    font-size:large;  
  14.    color:white;  
  15.    font-family: Verdana;  
  16.    border:2px solid #000;  
  17. }  
  18. .lineargradangle90  
  19. {  
  20.    background: -webkit-linear-gradient(90deg, green, black); /* For Safari and Chrome*/  
  21.    background: -o-linear-gradient(90deg, green, black); /* For Opera */  
  22.    background: -moz-linear-gradient(90deg, green, black); /* For Firefox */  
  23.    background: linear-gradient(90deg, green, black); /* Standard syntax */  
  24. } 
Design
 
Linear gradient: 90deg:
 
 
HTML and CSS
  1. <div class="simple lineargradangle0">  
  2. CSS3 Features  
  3. </div>  
  4.    
  5. .simple  
  6. {  
  7.    width:200px;  
  8.    height:100px;  
  9.    padding:10px;  
  10.    text-align:center;  
  11.    display:table-cell;  
  12.    vertical-align:middle;  
  13.    font-size:large;  
  14.    color:white;  
  15.    font-family: Verdana;  
  16.    border:2px solid #000;  
  17. }  
  18. .lineargradangle0  
  19. {  
  20.    background: -webkit-linear-gradient(0deg, green, black); /* For Safari and Chrome*/  
  21.    background: -o-linear-gradient(0deg, green, black); /* For Opera */  
  22.    background: -moz-linear-gradient(0deg, green, black); /* For Firefox */  
  23.    background: linear-gradient(0deg, green, black); /* Standard syntax */  
  24. } 
Design
 
Linear gradient: 0deg
 
 
Linear gradient: fading effect using rgba()
 
Syntax
 
background: linear-gradient(direction, color1 (in rgba()), color2 (in rgba()));
 
HTML and CSS
  1. <div class="simple lineargradfadeeffect">  
  2. CSS3 Features  
  3. </div>  
  4.    
  5. .simple  
  6. {  
  7.    width:200px;  
  8.    height:100px;  
  9.    padding:10px;  
  10.    text-align:center;  
  11.    display:table-cell;  
  12.    vertical-align:middle;  
  13.    font-size:large;  
  14.    color:white;  
  15.    font-family: Verdana;  
  16.    border:2px solid #000;  
  17. }  
  18. .lineargradfadeeffect  
  19. {  
  20.    background: -webkit-linear-gradient(left, rgba(0,255,0,0), rgba(0,255,0,1)); /* For Safari and Chrome*/  
  21.    background: -o-linear-gradient(right, rgba(0,255,0,0), rgba(0,255,0,1)); /* For Opera */  
  22.    background: -moz-linear-gradient(right, rgba(0,255,0,0), rgba(0,255,0,1)); /* For Firefox */  
  23.    background: linear-gradient(to right, rgba(0,255,0,0), rgba(0,255,0,1)); /* Standard syntax */  
  24. } 
Design
 
 
Linear gradient: Repeat example
 
We can repeat a linear-gradient by using a function called repeating-linear-gradient ().
 
HTML and CSS
  1. <div class="simple lineargradrepeat">CSS3 Features </div>.simple {  
  2.     width: 200px;  
  3.     height: 100px;  
  4.     padding: 10px;  
  5.     text-align: center;  
  6.     display: table-cell;  
  7.     vertical-align: middle;  
  8.     font-size: large;  
  9.     color: white;  
  10.     font-family: Verdana;  
  11.     border: 2px solid #000;  
  12. }  
  13.   
  14. .lineargradrepeat {  
  15.     background: -webkit-repeating-linear-gradient(yellow, green 10%);  
  16.     /* For Safari and Chrome*/  
  17.     background: -o-repeating-linear-gradient(yellow, green 10%);  
  18.     /* For Opera */  
  19.     background: -moz-repeating-linear-gradient(yellow, green 10%);  
  20.     /* For Firefox */  
  21.     background: repeating-linear-gradient(yellow, green 10%);  
  22.     /* Standard syntax */  
  23. } 
design
 
 
Linear gradient: with multiple color stops
 
HTML and CSS
 
Example 1
  1. <div class=”simple lineargradmultiplecolors”>  
  2. CSS3 Features  
  3. </div>  
  4.    
  5. .simple  
  6. {  
  7.    width:200px;  
  8.    height:100px;  
  9.    padding:10px;  
  10.    text-align:center;  
  11.    display:table-cell;  
  12.    vertical-align:middle;  
  13.    font-size:large;  
  14.    color:white;  
  15.    font-family: Verdana;  
  16.    border:2px solid #000;  
  17. }  
  18. .lineargradmultiplecolors  
  19. {  
  20.    background: -webkit-linear-gradient(left, red, green, blue); /* For Safari and Chrome*/  
  21.    background: -o-linear-gradient(right, red, green, blue); /* For Opera */  
  22.    background: -moz-linear-gradient(right, red, green, blue); /* For Firefox */  
  23.    background: linear-gradient(to right, red, green, blue); /* Standard syntax */  
  24. } 
Design
 
 
Example 2
  1. <div class=”simple lineargradmultiplecolors2”>  
  2. CSS3 Features  
  3. </div>  
  4.    
  5. .simple  
  6. {  
  7.    width:200px;  
  8.    height:100px;  
  9.    padding:10px;  
  10.    text-align:center;  
  11.    display:table-cell;  
  12.    vertical-align:middle;  
  13.    font-size:large;  
  14.    color:white;  
  15.    font-family: Verdana;  
  16.    border:2px solid #000;  
  17. }  
  18. .lineargradmultiplecolors2  
  19. {  
  20.    background: -webkit-linear-gradient(left, red, green, blue, yellow); /* For Safari and Chrome*/  
  21.    background: -o-linear-gradient(right, red, green, blue, yellow); /* For Opera */  
  22.    background: -moz-linear-gradient(right, red, green, blue, yellow); /* For Firefox */  
  23.    background: linear-gradient(to right, red, green, blue, yellow); /* Standard syntax */  
  24. } 
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
  1. <div class=" simple radialgrad">CSS3 Features </div>.simple {  
  2.     width: 200px;  
  3.     height: 100px;  
  4.     padding: 10px;  
  5.     text-align: center;  
  6.     display: table-cell;  
  7.     vertical-align: middle;  
  8.     font-size: large;  
  9.     color: white;  
  10.     font-family: Verdana;  
  11.     border: 2px solid #000;  
  12. }  
  13.   
  14. .radialgrad {  
  15.     background: -webkit-radial-gradient(green, black);  
  16.     /* Safari */  
  17.     background: -o-radial-gradient(green, black);  
  18.     /* For Opera */  
  19.     background: -moz-radial-gradient(green, black);  
  20.     /* For Firefox */  
  21.     background: radial-gradient(green, black);  
  22.     /* Standard syntax */  
  23. } 
Design
 
 
Radial gradient: Repeat example
 
We can repeat a radial gradient by using a function called repeating-radial-gradient ().
 
HTML and CSS
  1. <div class="simple radialgradrepeat">  
  2. CSS3 Features  
  3. </div>  
  4.    
  5. .simple  
  6. {  
  7.    width:200px;  
  8.    height:100px;  
  9.    padding:10px;  
  10.    text-align:center;  
  11.    display:table-cell;  
  12.    vertical-align:middle;  
  13.    font-size:large;  
  14.    color:white;  
  15.    font-family: Verdana;  
  16.    border:2px solid #000;  
  17. }  
  18. .radialgradrepeat  
  19. {       
  20.    background: -webkit-repeating-radial-gradient(yellow, green 15%);/* For Safari */  
  21.    background: -o-repeating-radial-gradient(yellow, green 15%);/* For Opera */  
  22.    background: -moz-repeating-radial-gradient(yellow, green 15%);/* For Firefox */  
  23.    background: repeating-radial-gradient(yellow, green 15%);/* Standard syntax */  
  24. } 
Design
 
 
Radial gradient with multiple colors
 
HTML and CSS
  1. <div class="simple radialgradmulticolor">  
  2. CSS3 Features  
  3. </div>  
  4.    
  5. .simple  
  6. {  
  7.    width:200px;  
  8.    height:100px;  
  9.    padding:10px;  
  10.    text-align:center;  
  11.    display:table-cell;  
  12.    vertical-align:middle;  
  13.    font-size:large;  
  14.    color:white;  
  15.    font-family: Verdana;  
  16.    border:2px solid #000;  
  17. }  
  18.    
  19. .radialgradmulticolor  
  20. {  
  21.     background: -webkit-radial-gradient(green, black, yellow); /* Safari */  
  22.     background: -o-radial-gradient(green, black, yellow); /* For Opera */  
  23.     background: -moz-radial-gradient(green, black, yellow); /* For Firefox */  
  24.     background: radial-gradient(green, black, yellow); /* Standard syntax */  
  25. } 
Design 
 
 

Conclusion

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


Similar Articles