Propiedades de CSS relacionadas con la transparencia

Articles

Este artículo explica las propiedades de CSS relacionadas con la transparencia.

Puedes aprender sobre el uso y la sintaxis de las propiedades opacity, z-index y clip-path.

YouTube Video

HTML para vista previa

css-opacity.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-opacity.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties Related to Transparency</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>CSS Properties Related to Transparency</h2>
20        </header>
21        <article>
22            <h3>opacity</h3>
23            <section>
24                <header><h4>opacity: 1</h4></header>
25                <section class="sample-view">
26                    <div class="opaque-box">Opaque</div>
27                </section>
28                <header><h4>opacity: 0.5</h4></header>
29                <section class="sample-view">
30                    <div class="semi-transparent-box">Semi-transparent</div>
31                </section>
32                <header><h4>opacity: 0</h4></header>
33                <section class="sample-view">
34                    <div class="transparent-box">Transparent</div>
35                </section>
36                <header><h4>transition: opacity 2s ease-in-out</h4></header>
37                <section class="sample-view">
38                    <div class="opacity-transition-box">Opacity with Transition (Fade out on hover)</div>
39                </section>
40                <header><h4>Parent & Child Element</h4></header>
41                <section class="sample-view">
42                    <div class="opacity-parent">
43                        Parent Element & <span class="opacity-child">Child Element</span>
44                    </div>
45                </section>
46            </section>
47        </article>
48        <article>
49            <h3>z-index</h3>
50            <section>
51                <div class="z-index-box1">1</div>
52                <div class="z-index-box2">
53                    <div class="z-index-box2-1">2-1</div>
54                    2
55                </div>
56                <div class="z-index-box3">3</div>
57            </section>
58        </article>
59        <article>
60            <h3>clip-path</h3>
61            <section>
62                <h4>Clip-path Property Examples</h4>
63                <header><h4>clip-path: circle(50% at 50% 50%)</h4></header>
64                <section class="sample-view">
65                    <div class="clip-path-circle">Circle</div>
66                </section>
67                <header><h4>clip-path: ellipse(50% 30% at 50% 50%)</h4></header>
68                <section class="sample-view">
69                    <div class="clip-path-ellipse">Ellipse</div>
70                </section>
71                <header><h4>clip-path: polygon(50% 0%, 100% 100%, 0% 100%)</h4></header>
72                <section class="sample-view">
73                    <div class="clip-path-polygon">Polygon</div>
74                </section>
75                <header><h4>clip-path: inset(10% 20% 30% 40%)</h4></header>
76                <section class="sample-view">
77                    <div class="clip-path-inset">Inset</div>
78                </section>
79                <header><h4>clip-path: url(#myClip)</h4></header>
80                <section class="sample-view">
81                    <div class="clip-path-url">Url</div>
82                </section>
83            </section>
84            <svg width="0" height="0">
85                <clipPath id="myClip">
86                    <circle cx="50" cy="50" r="40" />
87                </clipPath>
88            </svg>
89        </article>
90    </main>
91</body>
92</html>

Efectos de filtro

Propiedad `opacity`

 1.opaque-box {
 2    background-color: skyblue;
 3    opacity: 1; /* completely opaque */
 4    border: 1px solid black;
 5}
 6
 7.semi-transparent-box {
 8    background-color: skyblue;
 9    opacity: 0.5; /* semi-transparent */
10    border: 1px solid black;
11}
12
13.transparent-box {
14    background-color: skyblue;
15    opacity: 0; /* completely transparent */
16    border: 1px solid black;
17}
18
19.opacity-transition-box {
20    background-color: orange;
21    transition: opacity 2s ease-in-out;
22    border: 1px solid black;
23}
24
25.opacity-transition-box:hover {
26    opacity: 0; /* Fade out on hover */
27}
28
29.opacity-parent {
30    background-color: blue;
31    opacity: 0.5;
32}
33
34.opacity-child {
35    background-color: red;
36}

La propiedad opacity se utiliza para establecer la transparencia de un elemento. Esta propiedad especifica la opacidad de todo el elemento, donde los valores más cercanos a 0 son más transparentes y los valores más cercanos a 1 son más opacos. La propiedad opacity puede combinarse con animaciones para crear efectos de aparición y desvanecimiento.

La propiedad opacity afecta no solo al elemento en el que está configurada, sino también a sus elementos secundarios. Esto significa que si un elemento padre se configura como semitransparente, sus elementos secundarios heredarán esa transparencia.

En este ejemplo, la configuración se establece de la siguiente manera.

Cuando la propiedad opacity está establecida en 1, el elemento es completamente opaco, igual que un elemento normal.
Cuando la propiedad opacity está establecida en 0.5, el elemento se vuelve semitransparente.
Cuando la propiedad opacity está establecida en 0, el elemento se vuelve completamente transparente y no es visible en absoluto.
La propiedad transition está establecida en opacity, así que cuando el cursor del ratón pasa sobre el elemento, este se desvanece y se vuelve completamente transparente después de 2 segundos.
Si el elemento padre tiene la propiedad opacity en 0.5, los elementos hijos también se vuelven semitransparentes.

Propiedad `z-index`

 1.z-index-box1 {
 2    position: relative;
 3    width: 100px;
 4    height: 100px;
 5    background-color: red;
 6    top: 10px;
 7    left: 10px;
 8    z-index: 1; /* Displayed in the foreground */
 9}
10
11.z-index-box2 {
12    position: relative;
13    width: 100px;
14    height: 100px;
15    background-color: blue;
16    top: -100px;
17    left: 90px;
18    z-index: 0; /* Displayed in the background */
19}
20
21.z-index-box3 {
22    position: relative;
23    width: 100px;
24    height: 100px;
25    background-color: green;
26    top: -160px;
27    left: 80px;
28    z-index: 2; /* Displayed in the frontmost layer */
29}
30
31.z-index-box2-1 {
32    position: relative;
33    width: 50px;
34    height: 50px;
35    background-color: skyblue;
36    top: 0px;
37    left: 0px;
38    z-index: 4;
39}

El z-index es una propiedad utilizada en CSS para controlar el orden de apilamiento de los elementos. Esta propiedad especifica si un elemento debe aparecer delante o detrás de otros elementos.

En la caja roja, el z-index está establecido en 1, por lo que el elemento aparece delante de otros elementos.
En la caja azul, el z-index está establecido en 0, por lo que el elemento aparece detrás de la caja roja.
En la caja verde, el z-index está establecido en 2, y aparece en la posición más adelantada.
En la caja celeste, se especifica un z-index de 4, el más alto, pero como el elemento padre tiene un z-index de 0, no aparece en la posición más adelantada.

Mecanismo Básico

La propiedad z-index toma un valor numérico, donde los elementos con números más altos se muestran delante de aquellos con números más bajos. Por defecto, los elementos sin un z-index especificado se apilan según el orden en que aparecen en el HTML.

Sin embargo, para que z-index tenga efecto, el elemento debe tener su propiedad position configurada como relative, absolute, fixed o sticky. Si position es static, entonces z-index no tiene efecto.

Valores

Si se asigna un número entero positivo a z-index, el elemento se muestra más hacia el frente. Cuanto mayor sea el número, más se mostrará delante de otros elementos.
- Si z-index se establece en 0, mantiene el orden de apilamiento predeterminado.
- Si z-index se establece en 1, el elemento se muestra una capa delante de otros elementos.
Si se asigna un número entero negativo a z-index, el elemento se muestra más hacia el fondo. Cuanto menor sea el número, más se mostrará detrás de otros elementos.
- Si z-index se establece en -1, el elemento se muestra una capa detrás de otros elementos.

Notas

z-index depende del z-index del elemento padre. Cuando un elemento padre tiene un z-index especificado, se aplica el orden de apilamiento relativo dentro de ese elemento padre. Esto se llama un contexto de apilamiento. Por lo tanto, incluso si un elemento hijo tiene un z-index alto, si el z-index del elemento padre es bajo, no aparecerá delante de otros elementos.

La propiedad `clip-path`

En CSS, clip-path es una propiedad utilizada para recortar elementos en formas específicas. Normalmente, los elementos se muestran como cajas rectangulares, pero con clip-path se pueden mostrar en formas complejas como círculos o polígonos. Es una herramienta muy útil para crear diseños visuales o efectos interactivos.

La propiedad clip-path restringe el área de visualización de un elemento y oculta las partes que están fuera de la forma especificada. A continuación, explicaremos cómo especificar formas comúnmente utilizadas.

Formas de Recorte Principales

`circle()`

1.clip-path-circle {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: circle(50% at 50% 50%);
6}

circle() recorta un elemento en una forma circular. Puedes controlar la forma especificando el centro y el radio del círculo.

El primer 50% es el radio del círculo (como un porcentaje del ancho o alto del elemento).
El siguiente at 50% 50% es la posición central del círculo (como un porcentaje del ancho y alto del elemento).

Aquí, especifica un círculo con un radio igual a la mitad de las dimensiones del elemento, y centrado en el elemento.

`ellipse()`

1.clip-path-ellipse {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: ellipse(50% 30% at 50% 50%);
6}

ellipse() recorta un elemento en una forma elíptica. Especificas los radios del ancho y la altura, así como la posición del centro.

El primer 50% 30% son los radios del ancho y la altura.
El siguiente at 50% 50% es la posición central de la elipse.

En este ejemplo, se especifica una elipse centrada en el elemento, con un ancho del 50% y una altura del 30%.

`polygon()`

1.clip-path-polygon {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
6}

polygon() forma un polígono al conectar un conjunto especificado de vértices. Cada vértice se especifica con coordenadas relativas dentro del elemento.

En este ejemplo, se especifican tres vértices (centro superior, esquina inferior derecha, esquina inferior izquierda) y se recorta en un triángulo. polygon() es muy flexible y puede crear cualquier forma.

`inset()`

1.clip-path-inset {
2    width: 100px;
3    height: 100px;
4    background-color: green;
5    clip-path: inset(10% 20% 30% 40%);
6}

inset() recorta hacia adentro desde los bordes externos de un elemento. Define un rectángulo especificando la distancia desde cada uno de los cuatro lados.

El 10% es la distancia desde el borde superior.
El 20% es la distancia desde el borde derecho.
El 30% es la distancia desde el borde inferior.
El 40% es la distancia desde el borde izquierdo.

Esta especificación crea un rectángulo que se reduce dentro del elemento.

`clip-path` usando SVG

 1/*
 2<svg width="0" height="0">
 3  <clipPath id="myClip">
 4    <circle cx="50" cy="50" r="40" />
 5  </clipPath>
 6</svg>
 7*/
 8.clip-path-url {
 9    width: 100px;
10    height: 100px;
11    background-color: green;
12    clip-path: url(#myClip);
13}

CSS clip-path puede usar no solo formas primitivas sino también recortar formas complejas utilizando un elemento <clipPath> de SVG.

En este ejemplo, se aplica a un elemento HTML una ruta de recorte circular definida en SVG con el id de myClip.

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 `object-fit` y `object-position`Propiedades de CSS Relacionadas con los Efectos de Filtro

Propiedades de CSS relacionadas con la transparencia

YouTube Video

HTML para vista previa

Efectos de filtro

Propiedad opacity

Propiedad z-index

Mecanismo Básico

Valores

Notas

La propiedad clip-path

Formas de Recorte Principales

circle()

ellipse()

polygon()

inset()

clip-path usando SVG

YouTube Video

Propiedad `opacity`

Propiedad `z-index`

La propiedad `clip-path`

`circle()`

`ellipse()`

`polygon()`

`inset()`

`clip-path` usando SVG