Articles
Introducción a CSS
Propiedades de CSS Relacionadas con los Efectos de Filtro

Propiedades de CSS Relacionadas con los Efectos de Filtro

Este artículo explica las propiedades de CSS relacionadas con los efectos de filtro.

Puedes aprender sobre los usos y cómo escribir propiedades como filter y transform.

YouTube Video

HTML para vista previa

css-effect.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-effect.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Filter/Effect Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>filter</h3>
 23            <section>
 24                <header><h4>Original Image</h4></header>
 25                <section class="sample-view">
 26                    <img src="example.jpg" alt="Example Image" width="100">
 27                </section>
 28                <header><h4>filter: sepia(1)</h4></header>
 29                <section class="sample-view">
 30                    <img src="example.jpg" alt="Example Sepia Image" class="filtered-image-sepia" width="100">
 31                </section>
 32                <header><h4>filter: opacity(0.5)</h4></header>
 33                <section class="sample-view">
 34                    <img src="example.jpg" alt="Example Opacity Image" class="filtered-image-opacity" width="100">
 35                </section>
 36                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 37                <section class="sample-view">
 38                    <img src="example.jpg" alt="Example Filtered Image" class="filtered-image-multiple" width="100">
 39                </section>
 40            </section>
 41        </article>
 42        <article>
 43            <h3>filter-function</h3>
 44            <section>
 45                <header><h4>filter: blur(5px)</h4></header>
 46                <section class="sample-view">
 47                    <img src="example.jpg" alt="Example Blur Image" style="filter: blur(5px);" width="100">
 48                </section>
 49                <header><h4>filter: brightness(1.5)</h4></header>
 50                <section class="sample-view">
 51                    <img src="example.jpg" alt="Example Brightness Image" style="filter: brightness(1.5);" width="100">
 52                </section>
 53                <header><h4>filter: contrast(2)</h4></header>
 54                <section class="sample-view">
 55                    <img src="example.jpg" alt="Example Contrast Image" style="filter: contrast(2);" width="100">
 56                </section>
 57                <header><h4>filter: grayscale(1)</h4></header>
 58                <section class="sample-view">
 59                    <img src="example.jpg" alt="Example Grayscale Image" style="filter: grayscale(1);" width="100">
 60                </section>
 61                <header><h4>filter: hue-rotate(90deg)</h4></header>
 62                <section class="sample-view">
 63                    <img src="example.jpg" alt="Example Hue Rotate Image" style="filter: hue-rotate(90deg);" width="100">
 64                </section>
 65                <header><h4>filter: invert(1)</h4></header>
 66                <section class="sample-view">
 67                    <img src="example.jpg" alt="Example Invert Image" style="filter: invert(1);" width="100">
 68                </section>
 69                <header><h4>filter: opacity(0.5)</h4></header>
 70                <section class="sample-view">
 71                    <img src="example.jpg" alt="Example Opacity Image" style="filter: opacity(0.5);" width="100">
 72                </section>
 73                <header><h4>filter: saturate(2)</h4></header>
 74                <section class="sample-view">
 75                    <img src="example.jpg" alt="Example Saturate Image" style="filter: saturate(2);" width="100">
 76                </section>
 77                <header><h4>filter: sepia(1)</h4></header>
 78                <section class="sample-view">
 79                    <img src="example.jpg" alt="Example Sepia Image" style="filter: sepia(1);" width="100">
 80                </section>
 81                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 82                <section class="sample-view">
 83                    <img src="example.jpg" alt="Example Filtered Image" style="filter: brightness(1.2) contrast(1.5) sepia(0.5);" width="100">
 84                </section>
 85            </section>
 86        </article>
 87        <article>
 88            <h3>transform</h3>
 89            <section>
 90                <header><h4>Transform: scale(1.5, 2)</h4></header>
 91                <section class="sample-view">
 92                    <div class="transform-box transform-scale">Scale</div>
 93                </section>
 94                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
 95                <section class="sample-view">
 96                    <div class="transform-box transform-skew">Skew</div>
 97                </section>
 98                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
 99                <section class="sample-view">
100                    <div class="transform-box transform-rotate">Rotate Scale</div>
101                </section>
102            </section>
103        </article>
104        <article>
105            <h3>transform functions</h3>
106            <section>
107                <header><h4>Transform: translate(100px, 50px)</h4></header>
108                <section class="sample-view">
109                    <div class="transform-box transform-translate">Translate</div>
110                </section>
111                <header><h4>Transform: rotate(45deg)</h4></header>
112                <section class="sample-view">
113                    <div class="transform-box transform-rotate">Rotate</div>
114                </section>
115                <header><h4>Transform: scale(1.5, 2)</h4></header>
116                <section class="sample-view">
117                    <div class="transform-box transform-scale">Scale</div>
118                </section>
119                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
120                <section class="sample-view">
121                    <div class="transform-box transform-skew">Skew</div>
122                </section>
123                <header><h4>Transform: matrix(1, 0.5, -0.5, 1, 100, 0)</h4></header>
124                <section class="sample-view">
125                    <div class="transform-box transform-matrix">Matrix</div>
126                </section>
127                <header><h4>Transform: translate3d(100px, 50px, 30px)</h4></header>
128                <section class="sample-view perspective">
129                    <div class="transform-box transform-translate3d">Translate3D</div>
130                </section>
131                <header><h4>Transform: rotate3d(1, 1, 0, 45deg)</h4></header>
132                <section class="sample-view perspective">
133                    <div class="transform-box transform-rotate3d">Rotate3D</div>
134                </section>
135                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
136                <section class="sample-view">
137                    <div class="transform-box transform-rotate-scale">Rotate Scale</div>
138                </section>
139            </section>
140        </article>
141        <article>
142            <h3>transform-origin</h3>
143            <section>
144                <header><h4>transform-origin: left top</h4></header>
145                <section class="sample-view">
146                    <div class="transform-box transform-origin-left-top">Transform<br>(left-top)</div>
147                </section>
148                <header><h4>transform-origin: right bottom</h4></header>
149                <section class="sample-view">
150                    <div class="transform-box transform-origin-right-bottom">Transform<br>(right-bottom)</div>
151                </section>
152                <header><h4>transform-origin: 0% 100%</h4></header>
153                <section class="sample-view">
154                    <div class="transform-box transform-origin-percent">Transform<br>(percent)</div>
155                </section>
156                <header><h4>transform-origin: 50% 50% 50px</h4></header>
157                <section class="sample-view">
158                    <div class="transform-box transform-origin-3d">Transform<br>3D</div>
159                </section>
160            </section>
161        </article>
162    </main>
163</body>
164</html>

Efectos de filtro

Propiedad filter 

 1.filtered-image-sepia {
 2    filter: sepia(1);
 3}
 4
 5.filtered-image-opacity {
 6    filter: opacity(0.5);
 7}
 8
 9.filtered-image-multiple {
10    filter: brightness(1.2) contrast(1.5) sepia(0.5);
11}

La propiedad filter se utiliza para aplicar efectos visuales a los elementos. Puedes agregar fácilmente una variedad de efectos como difuminar imágenes o elementos, ajustar el brillo y cambiar el contraste.

  • La clase filtered-image-sepia tiene un efecto sepia aplicado.
  • La clase filtered-image-opacity tiene un efecto de opacidad aplicado.
  • La clase filtered-image-multiple tiene efectos de brillo, contraste y sepia aplicados a la imagen.

Sintaxis Básica 

1filter: none | <filter-function> [<filter-function>]*;

Para la propiedad filter, especifica none o una filter-function.

  • Especificar none no aplica efectos de filtro.
  • Especifica la función de filtro a aplicar en <filter-function>. Se pueden especificar múltiples filtros separándolos con espacios.

Tipos de funciones de filtro

blur() 
1filter: blur(5px);

La función blur() aplica un efecto de desenfoque.

  • El valor se especifica en píxeles (px) y cuanto mayor sea el valor, mayor será el grado de desenfoque.
brightness() 
1filter: brightness(1.5);

La función brightness() ajusta el brillo.

  • El valor se especifica entre 0 (completamente oscuro) y 1 (brillo original). Especificar un valor mayor que 1 hace que el elemento sea más brillante.
contrast() 
1filter: contrast(2);

La función contrast() ajusta el contraste.

  • El valor se especifica entre 0 (escala de grises) y 1 (contraste original), y valores mayores a 1 aumentan el contraste.
grayscale() 
1filter: grayscale(1);

La función grayscale() convierte el elemento en monocromo.

  • El valor se especifica entre 0 (color original) y 1 (completamente monocromo).
hue-rotate() 
1filter: hue-rotate(90deg);

La función hue-rotate() rota el tono.

  • Los valores se especifican en grados (deg), aplicando cambios de color al rotar el matiz. El matiz gira en el rango de 0deg a 360deg.
invert() 
1filter: invert(1);

La función invert() invierte los colores.

  • Los valores se especifican de 0 (color original) a 1 (completamente invertido).
opacity() 
1filter: opacity(0.5);

La función opacity() cambia la transparencia de un elemento.

  • Los valores se especifican en el rango de 0 (completamente transparente) a 1 (opaco).
saturate() 
1filter: saturate(2);

La función saturate() ajusta la saturación.

  • Los valores van de 0 (monocromático) a 1 (saturación original), y especificar valores mayores que 1 aumenta la saturación.
sepia() 
1filter: sepia(1);

La función sepia() convierte al tono sepia.

  • Los valores se especifican de 0 (color original) a 1 (tono sepia completo).

Aplicando Múltiples Filtros 

1filter: brightness(1.2) contrast(1.5) sepia(0.5);

Se pueden aplicar múltiples filtros, separados por espacios.

Ventajas de Usar la Propiedad filter

La propiedad filter es una herramienta poderosa para crear elementos visualmente atractivos de manera sencilla. Tiene las siguientes ventajas:.

  • Se pueden añadir efectos visuales fácilmente.
  • Las imágenes se pueden ajustar utilizando solo CSS, sin programas de edición de imágenes.
  • Se pueden crear efectos dinámicos combinándolo con animaciones.

Propiedad transform 

 1.transform-box {
 2    width: 100px;
 3    height: 100px;
 4    background-color: skyblue;
 5    transition: transform 0.3s ease;
 6}
 7
 8.transform-scale:hover {
 9    /* Width 1.5 times and height 2 times */
10    transform: scale(1.5, 2);
11}
12
13.transform-skew:hover {
14    /* Skew 30 degrees on the X-axis and 20 degrees on the Y-axis */
15    transform: skew(30deg, 20deg);
16}
17
18.transform-rotate:hover {
19    transform: rotate(45deg) scale(1.5);
20}

La propiedad transform se utiliza para aplicar transformaciones 2D o 3D a los elementos. Con CSS se pueden especificar varias transformaciones visuales, como posición, rotación, escalado (ampliar/reducir) y sesgado. La propiedad transform se utiliza a menudo en combinación con animaciones y ayuda a crear elementos dinámicos de interfaz de usuario.

  • En la clase transform-scale, al pasar el cursor sobre el elemento, se amplía su ancho en 1.5 veces y su altura en 2 veces.

  • En la clase transform-skew, al pasar el cursor sobre el elemento, se rota 30 grados en el eje X y 20 grados en el eje Y.

  • En la clase transform-rotate, al pasar el cursor sobre el elemento, se rota 45 grados y se amplía 1.5 veces.

Sintaxis Básica 

1transform: none | <transform-function> [<transform-function>]*;

La propiedad transform especifica none o una transform-function.

  • Si se especifica none, no se aplicará ninguna transformación.
  • Especifique el tipo de transformación con <transform-function>. Se pueden aplicar múltiples transformaciones separándolas con espacios.

Funciones Principales de Transformación

translate() 
1/* Move 50px to the right and 100px down */
2transform: translate(50px, 100px);
3
4transform: translateX(50px); /* Move 50px to the right */
5transform: translateY(100px); /* Move 100px down */
  • La función translate(x, y) mueve un elemento por las distancias especificadas a lo largo de los ejes X e Y. Especifique x e y usando unidades como px o %. También puede especificar individualmente con translateX() o translateY().
rotate() 
1transform: rotate(45deg); /* Rotate 45 degrees */
  • La función rotate(angle) rota un elemento por el ángulo especificado en grados (deg).
scale() 
1/* Width 1.5 times and height 2 times */
2transform: scale(1.5, 2);
3
4transform: scaleX(1.5); /* Width 1.5 times */
5transform: scaleY(2); /* Height 2 times */
  • La función scale(x, y) escala un elemento a lo largo de los ejes X e Y. x e y son factores de escala relativos al tamaño original. Por ejemplo, scale(2, 2) duplicará el tamaño. Puede especificar individualmente con scaleX() o scaleY().
skew() 
1/* Skew 30 degrees on the X-axis and
2   20 degrees on the Y-axis */
3transform: skew(30deg, 20deg);
4
5/* Skew 30 degrees on the X-axis */
6transform: skewX(30deg);
7
8/* Skew 20 degrees on the Y-axis */
9transform: skewY(20deg);
  • La función skew(x-angle, y-angle) sesga un elemento por los ángulos especificados a lo largo de los ejes X e Y. Puede especificar individualmente con skewX() o skewY().
matrix() 
1/* Apply a special transformation */
2transform: matrix(1, 0.5, -0.5, 1, 0, 0);
  • La función matrix() especifica una matriz para combinar múltiples transformaciones a la vez. Generalmente se utiliza en combinación con otras funciones de transformación.

Funciones de transformación 3D

translate3d() 
1/* Move 100px right(X-axis), 50px down(Y-axis),
2   30px forward(Z-zxis) */
3transform: translate3d(100px, 50px, 30px);
4
5/* Preserve 3D positioning of children */
6transform-style: preserve-3d;
7
8/* Add 3D depth with 600px perspective */
9perspective: 600px;
  • La función translate3d() realiza una traducción en el espacio 3D.
    • Se puede especificar en tres dimensiones: los ejes X, Y y Z.
  • Al establecer la propiedad transform-style en preserve-3d y la propiedad perspective en 600px, se aplica un efecto de movimiento tridimensional con profundidad a los elementos hijos.
rotate3d() 
1/* Rotate 45 degrees around the X and Y axes */
2transform: rotate3d(1, 1, 0, 45deg);
3
4transform-style: preserve-3d;
5perspective: 600px;
  • La función rotate3d() realiza una rotación en el espacio 3D.
    • Rota un elemento con respecto a los ejes X, Y y Z.

Combinación de múltiples transformaciones 

1transform: rotate(45deg) scale(1.5);

La propiedad transform puede aplicar múltiples transformaciones simultáneamente. Por ejemplo, puede combinar rotación y escala.

Puntos clave para el uso

La propiedad transform es una herramienta poderosa en CSS para transformar visualmente los elementos. Al combinar varias funciones, puede crear interfaces interactivas y dinámicas.

  • La propiedad transform permite la transformación directa de elementos, permitiendo la manipulación visual sin alterar la estructura del DOM.
  • Es muy útil para crear animaciones y elementos interactivos, permitiendo diseños dinámicos cuando se combina con transition o animation.

Propiedad transform-origin 

 1.transform-box {
 2    background-color: skyblue;
 3}
 4
 5.transform-origin-left-top:hover {
 6    /* Based on the top left corner */
 7    transform-origin: left top;
 8    transform: rotate(45deg) scale(1.2);
 9}
10
11.transform-origin-right-bottom:hover {
12    /* Based on the right bottom corner */
13    transform-origin: right bottom;
14    transform: rotate(45deg) scale(1.2);
15}
16
17.transform-origin-percent:hover {
18    /* Transform based on the bottom left corner */
19    transform-origin: 0% 100%;
20    transform: rotate(45deg) scale(1.2);
21}
22
23.transform-origin-3d:hover {
24    /* Specify the Z-axis as well */
25    transform-origin: 50% 50% 50px;
26    transform: rotate(45deg) scale(1.2);
27}

La propiedad transform-origin se usa para establecer el punto de origen de las transformaciones aplicadas por la propiedad transform. Puedes especificar el punto de referencia para las transformaciones de un elemento, permitiéndote controlar alrededor de qué posición se aplican efectos como la rotación o el escalado.

En este ejemplo, cuando pasas el cursor sobre el elemento, este rota y se escala simultáneamente según el punto especificado por la propiedad transform-origin.

Sintaxis Básica 

1transform-origin: x y z;

Para la propiedad transform-origin, debes especificar x, y y z de esta manera.

  • Para x, especifica el punto de referencia en el eje X (dirección horizontal). Los valores se pueden especificar utilizando palabras clave (left, center, right) o longitudes (px, %, etc.).
  • Para y, especifica el punto de referencia en el eje Y (dirección vertical). Los valores se pueden especificar utilizando palabras clave (top, center, bottom) o longitudes.
  • Para z, especifica el punto de referencia en el eje Z (dirección de profundidad). Solo puede usarse con transformaciones 3D. Es opcional, y el valor predeterminado es 0.

Valor Predeterminado 

1transform-origin: 50% 50%; /* Center of the element */

El valor predeterminado de la propiedad transform-origin es el centro del elemento para los ejes X e Y. Esto significa que, por defecto, las transformaciones se realizan con el centro del elemento como punto de referencia.

Cómo Especificar Valores

Los valores para la propiedad transform-origin pueden especificarse utilizando palabras clave, porcentajes, longitudes como px, em, etc.

  1. Especificación de Palabras Clave

    • left: Establece la referencia del eje X en el borde izquierdo del elemento.
    • right: Establece la referencia del eje X en el borde derecho del elemento.
    • top: Establece la referencia del eje Y en el borde superior del elemento.
    • bottom: Establece la referencia del eje Y en el borde inferior del elemento.
    • center: Establece la referencia de los ejes X o Y en el centro del elemento.

  2. Especificación de Porcentaje

    • 0%: Lo establece en el borde izquierdo o superior.
    • 50%: Lo establece en el centro.
    • 100%: Lo establece en el borde derecho o inferior.

  3. Especificación de Longitud

    • Puedes ajustar finamente el punto de referencia utilizando longitudes específicas como px, em, etc.

transform-origin en Transformaciones 3D 

1.box {
2    width: 100px;
3    height: 100px;
4    background-color: lightblue;
5    transform-origin: 50% 50% 50px; /* Specify the Z-axis as well */
6    transform: rotateY(45deg);
7}

transform-origin también puede usarse para transformaciones 3D. En las transformaciones 3D, también puedes especificar el punto de referencia en el eje Z. Por ejemplo, al especificar el centro de rotación en la dirección de profundidad, son posibles las transformaciones con un sentido de profundidad.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Propiedades de CSS relacionadas con la transparenciaPropiedades CSS relacionadas con animaciones