W3.CSS proporciona a los desarrolladores web varios efectos. En términos generales, se pueden clasificar en tres divisiones. Están:
- Opacidad
- escala de grises
- Sepia
Efectos de opacidad:
Hay cuatro clases de efectos de opacidad:
No Señor. |
Nombre de la clase |
Descripción |
---|---|---|
1. |
w3-opacidad-min |
La opacidad del elemento de destino se establece en 0,75 . |
2. |
w3-opacidad |
La opacidad del elemento de destino se establece en 0,6 . |
3. |
w3-opacidad-máx |
La opacidad del elemento de destino se establece en 0,25 . |
4. |
w3-hover-opacidad |
La opacidad del elemento de destino se establece en 0,6 al pasar el mouse por encima. |
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </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>
Producción:
Efectos de escala de grises: hay cuatro clases de efectos de escala de grises:
No Señor. |
Nombre de la clase |
Descripción |
---|---|---|
1. |
w3-escala de grises-min |
La escala de grises del elemento de destino se establece en 50% . |
2. |
w3-escala de grises |
La escala de grises del elemento de destino se establece en 75% . |
3. |
w3-escala de grises-max |
La escala de grises del elemento de destino se establece en 100% . |
4. |
w3-hover-escala de grises |
La escala de grises del elemento de destino se establece en 100 % al pasar el mouse por encima. |
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </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>
Producción:
Efectos sepia: hay cuatro clases de sepia:
No Señor. |
Nombre de la clase |
Descripción |
---|---|---|
1. |
w3-sepia-min |
El efecto sepia del elemento objetivo se establece en 50% . |
2. |
w3-sepia |
El efecto sepia del elemento objetivo se establece en 75% . |
3. |
w3-sepia-max |
El efecto sepia del elemento de destino se establece en 100% . |
4. |
w3-hover-sepia |
El efecto sepia del elemento objetivo se establece en 100% al pasar el mouse. |
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </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>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA