Propriedades CSS relacionadas à transparência

Articles

Este artigo explica as propriedades CSS relacionadas à transparência.

Você pode aprender sobre o uso e a sintaxe das propriedades opacity, z-index e clip-path.

YouTube Video

HTML para Visualização

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>

Efeitos de Filtro

Propriedade `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}

A propriedade opacity é usada para definir a transparência de um elemento. Essa propriedade especifica a opacidade de todo o elemento, com valores próximos de 0 sendo mais transparentes e valores próximos de 1 sendo mais opacos. A propriedade opacity pode ser combinada com animações para criar efeitos de fade-in e fade-out.

A propriedade opacity afeta não apenas o elemento em que foi aplicada, mas também seus elementos filhos. Isso significa que, se um elemento pai for definido como semi-transparente, seus elementos filhos herdarão essa transparência.

Neste exemplo, as configurações são definidas da seguinte maneira.

Quando a propriedade opacity é definida como 1, o elemento fica totalmente opaco, como um elemento normal.
Quando a propriedade opacity é definida como 0.5, o elemento se torna semitransparente.
Quando a propriedade opacity é definida como 0, o elemento torna-se completamente transparente e não é visível.
A propriedade transition está definida como opacity, então quando o cursor do mouse passa sobre o elemento, ele se desvanece e fica totalmente transparente após 2 segundos.
Se o elemento pai tiver a propriedade opacity com valor 0.5, os elementos filhos também se tornam semitransparentes.

Propriedade `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}

A propriedade z-index é usada no CSS para controlar a ordem de empilhamento dos elementos. Essa propriedade especifica se um elemento deve aparecer na frente ou atrás de outros elementos.

Na caixa vermelha, o z-index está definido como 1, então o elemento aparece na frente dos outros elementos.
Na caixa azul, o z-index está definido como 0, então o elemento aparece atrás da caixa vermelha.
Na caixa verde, o z-index está definido como 2, e ela aparece na posição mais à frente.
Na caixa azul clara, o z-index mais alto de 4 está especificado, mas como o elemento pai possui um z-index de 0, ela não aparece na posição mais à frente.

Mecanismo Básico

A propriedade z-index recebe um valor numérico, onde elementos com números maiores são exibidos à frente dos com números menores. Por padrão, elementos sem um z-index especificado são empilhados de acordo com a ordem em que aparecem no HTML.

No entanto, para que o z-index tenha efeito, o elemento deve ter sua propriedade position definida como relative, absolute, fixed ou sticky. Se o position for static, o z-index não terá efeito.

Valores

Se um número inteiro positivo for atribuído ao z-index, o elemento será exibido mais à frente. Quanto maior o número, mais à frente o elemento será exibido em relação a outros elementos.
- Se o z-index for definido como 0, ele mantém a ordem de empilhamento padrão.
- Se o z-index for definido como 1, o elemento será exibido uma camada à frente de outros elementos.
Se um número inteiro negativo for atribuído ao z-index, o elemento será exibido mais para trás. Quanto menor for o número, mais para trás o elemento será exibido.
- Se o z-index for definido como -1, o elemento será exibido uma camada atrás de outros elementos.

Notas

O z-index depende do z-index do elemento pai. Quando um elemento pai tem um z-index especificado, a ordem de empilhamento relativa dentro desse elemento pai é aplicada. Isso é chamado de contexto de empilhamento. Portanto, mesmo que um elemento filho tenha um z-index alto, se o z-index do elemento pai for baixo, ele não aparecerá à frente de outros elementos.

Propriedade `clip-path`

A propriedade CSS clip-path é usada para recortar elementos em formas específicas. Normalmente, os elementos são exibidos como caixas retangulares, mas com clip-path, os elementos podem ser exibidos em formas complexas, como círculos ou polígonos. É uma ferramenta muito útil para criar designs visuais ou efeitos interativos.

A propriedade clip-path restringe a área de exibição de um elemento e oculta as partes fora da forma especificada. Em seguida, explicaremos como especificar formas comumente usadas.

Formas de Recorte Principais

`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 um elemento em uma forma circular. Você pode controlar a forma especificando o centro e o raio do círculo.

O primeiro 50% é o raio do círculo (como uma porcentagem da largura ou altura do elemento).
O subsequente at 50% 50% é a posição central do círculo (como uma porcentagem da largura e altura do elemento).

Aqui, ele especifica um círculo com raio igual à metade das dimensões do elemento, centralizado no 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}

A função ellipse() recorta um elemento em uma forma elíptica. Você especifica os raios da largura e altura, assim como a posição central.

Os primeiros 50% 30% são os raios da largura e altura.
O subsequente at 50% 50% é a posição central da elipse.

Neste exemplo, ele especifica uma elipse centralizada no elemento, com uma largura de 50% e uma altura de 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}

A função polygon() forma um polígono conectando um conjunto especificado de vértices. Cada vértice é especificado com coordenadas relativas dentro do elemento.

Neste exemplo, ele especifica três vértices (centro superior, inferior direito, inferior esquerdo) e recorta para formar um triângulo. A função polygon() é muito flexível e pode criar qualquer 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}

A função inset() recorta a partir das bordas externas de um elemento. Define-se um retângulo especificando a distância de cada um dos quatro lados.

Os 10% correspondem à distância da borda superior.
Os 20% correspondem à distância da borda direita.
Os 30% correspondem à distância da borda inferior.
Os 40% correspondem à distância da borda esquerda.

Essa especificação cria um retângulo que encolhe para dentro do 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}

O clip-path do CSS pode usar não apenas formas primitivas, mas também formas complexas usando um elemento <clipPath> do SVG.

Neste exemplo, um caminho de recorte circular definido em SVG com o id de myClip é aplicado a um elemento HTML.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

`object-fit` e `object-position` Propriedades Propriedades CSS Relacionadas a Efeitos de Filtro

Propriedades CSS relacionadas à transparência

YouTube Video

HTML para Visualização

Efeitos de Filtro

Propriedade opacity

Propriedade z-index

Mecanismo Básico

Valores

Notas

Propriedade clip-path

Formas de Recorte Principais

circle()

ellipse()

polygon()

inset()

clip-path usando SVG

YouTube Video

Propriedade `opacity`

Propriedade `z-index`

Propriedade `clip-path`

`circle()`

`ellipse()`

`polygon()`

`inset()`

`clip-path` usando SVG