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:
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. }
  8. .opacity2 {
  9. background-color: rgba(0, 255, 0, .7);
  10. }
Design
3. HTML and CSS
  1. <div class="smallbox opacity3">
  2. </div>
  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. }
  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. }
  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>
  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>
  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>
  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>
  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>
  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. }
  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>
  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>
  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. }
  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>
  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>
  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. }
  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