W3.CSS Effects
W3.CSS provides web developers with various effects. They can broadly be classified into three divisions. They are:
- Opacity
- Grayscale
- Sepia
Opacity Effects:
There are four opacity effect classes:
Sr. No. | Class Name | Description |
|---|---|---|
1. | w3-opacity-min | The opacity of the targeted element is set to 0.75. |
2. | w3-opacity | The opacity of the targeted element is set to 0.6. |
3. | w3-opacity-max | The opacity of the targeted element is set to 0.25. |
4. | w3-hover-opacity | The opacity of the targeted element is set to 0.6 on hover. |
Example:
HTML
<!DOCTYPE html><html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href=</head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- Images with Opacity Effects --> <div class="w3-row w3-row-padding w3-center"> <!-- Minimum Opacity --> <div class="w3-col m3 l3"> <img class="w3-image w3-opacity-min" src="gfg.png"> <p> <span class="w3-text-red"> Class </span> <br> <span class="w3-text-blue"> w3-opacity-min </span> </p> </div> <!-- Normal Opacity --> <div class="w3-col m3 l3"> <img class="w3-image w3-opacity" src="gfg.png"> <p> <span class="w3-text-red"> Class </span> <br> <span class="w3-text-blue"> w3-opacity </span> </p> </div> <!-- Maximum Opacity --> <div class="w3-col m3 l3"> <img class="w3-image w3-opacity-max" src="gfg.png"> <p> <span class="w3-text-red"> Class </span> <br> <span class="w3-text-blue"> w3-opacity-max </span> </p> </div> <!-- On Hover Opacity --> <div class="w3-col m3 l3"> <img class="w3-image w3-hover-opacity" src="gfg.png"> <p> <span class="w3-text-red"> Class </span> <br> <span class="w3-text-blue"> w3-hover-opacity </span> </p> </div> </div></body> </html> |
Output:
Grayscale Effects: There are four grayscale effects classes:
Sr. No. | Class Name | Description |
|---|---|---|
1. | w3-grayscale-min | The grayscale of the targeted element is set to 50%. |
2. | w3-grayscale | The grayscale of the targeted element is set to 75%. |
3. | w3-grayscale-max | The grayscale of the targeted element is set to 100%. |
4. | w3-hover-grayscale | The grayscale of the targeted element is set to 100% on hover. |
Example:
HTML
<!DOCTYPE html><html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- Images with Grayscale Effects --> <div class="w3-row w3-row-padding w3-center"> <!-- Minimum Grayscale --> <div class="w3-col m3 l3"> <img class="w3-image w3-grayscale-min" src="gfg.png"> <p> <span class="w3-text-red">Class</span> <br> <span class="w3-text-blue"> w3-grayscale-min </span> </p> </div> <!-- Normal Grayscale --> <div class="w3-col m3 l3"> <img class="w3-image w3-grayscale" src="gfg.png"> <p> <span class="w3-text-red">Class</span> <br> <span class="w3-text-blue"> w3-grayscale </span> </p> </div> <!-- Maximum Grayscale --> <div class="w3-col m3 l3"> <img class="w3-image w3-grayscale-max" src="gfg.png"> <p> <span class="w3-text-red">Class</span> <br> <span class="w3-text-blue"> w3-grayscale-max </span> </p> </div> <!-- On Hover Grayscale --> <div class="w3-col m3 l3"> <img class="w3-image w3-hover-grayscale" src="gfg.png"> <p> <span class="w3-text-red">Class</span> <br> <span class="w3-text-blue"> w3-hover-grayscale </span> </p> </div> </div></body> </html> |
Output:
Sepia Effects: There are four sepia classes:
Sr. No. | Class Name | Description |
|---|---|---|
1. | w3-sepia-min | The sepia effect of the targeted element is set to 50%. |
2. | w3-sepia | The sepia effect of the targeted element is set to 75%. |
3. | w3-sepia-max | The sepia effect of the targeted element is set to 100%. |
4. | w3-hover-sepia | The sepia effect of the targeted element is set to 100% on hover. |
Example:
HTML
<!DOCTYPE html><html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href=</head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- Images with Sepia Effects --> <div class="w3-row w3-row-padding w3-center"> <!-- Minimum Sepia --> <div class="w3-col m3 l3"> <img class="w3-image w3-sepia-min" src="gfg.png"> <p> <span class="w3-text-red">Class</span> <br> <span class="w3-text-blue"> w3-sepia-min </span> </p> </div> <!-- Normal Sepia --> <div class="w3-col m3 l3"> <img class="w3-image w3-sepia" src="gfg.png"> <p> <span class="w3-text-red">Class</span> <br> <span class="w3-text-blue"> w3-sepia </span> </p> </div> <!-- Maximum Sepia --> <div class="w3-col m3 l3"> <img class="w3-image w3-sepia-max" src="gfg.png"> <p> <span class="w3-text-red">Class</span> <br> <span class="w3-text-blue"> w3-sepia-max </span> </p> </div> <!-- On Hover Sepia --> <div class="w3-col m3 l3"> <img class="w3-image w3-hover-sepia" src="gfg.png"> <p> <span class="w3-text-red">Class</span> <br> <span class="w3-text-blue"> w3-hover-sepia </span> </p> </div> </div></body> </html> |
Output:
Please Login to comment...