Efectos W3.CSS

Posted on by Rudeus Greyrat

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *