Propriedades CSS Relacionadas a Efeitos de Filtro

Articles

Este artigo explica as propriedades CSS relacionadas a efeitos de filtro.

Você pode aprender sobre os usos e como escrever propriedades como filter e transform.

YouTube Video

HTML para Visualização

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(50px, 50px, 50px)</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">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            </section>
157        </article>
158    </main>
159</body>
160</html>

Efeitos de Filtro

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

A propriedade filter é usada para aplicar efeitos visuais aos elementos. Você pode adicionar facilmente uma variedade de efeitos, como desfocar imagens ou elementos, ajustar o brilho e alterar o contraste.

A classe filtered-image-sepia tem um efeito sépia aplicado.
A classe filtered-image-opacity tem um efeito de opacidade aplicado.
A classe filtered-image-multiple tem efeitos de brilho, contraste e sépia aplicados à imagem.

Sintaxe Básica

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

Para a propriedade filter, especifique none ou uma filter-function.

Especificar none não aplica nenhum efeito de filtro.
Especifique a função de filtro a ser aplicada em <filter-function>. Múltiplos filtros podem ser especificados separando-os com espaços.

Tipos de funções de filtro

`blur()`

1filter: blur(5px);

A função blur() aplica um efeito de desfoque.

O valor é especificado em pixels (px) e quanto maior o valor, maior o grau de desfoque.

`brightness()`

1filter: brightness(1.5);

A função brightness() ajusta o brilho.

O valor é especificado com base em 0 (completamente escuro) a 1 (brilho original). Especificar um valor maior que 1 torna o elemento mais brilhante.

`contrast()`

1filter: contrast(2);

A função contrast() ajusta o contraste.

O valor é especificado com base em 0 (escala de cinza) a 1 (contraste original), e valores maiores que 1 aumentam o contraste.

`grayscale()`

1filter: grayscale(1);

A função grayscale() converte o elemento em monocromático.

O valor é especificado de 0 (cor original) a 1 (completamente monocromático).

`hue-rotate()`

1filter: hue-rotate(90deg);

A função hue-rotate() rotaciona o matiz.

Os valores são especificados em graus (deg), aplicando alterações de cor ao rotacionar o matiz. O matiz rotaciona no intervalo de 0deg a 360deg.

`invert()`

1filter: invert(1);

A função invert() inverte as cores.

Os valores são especificados de 0 (cor original) a 1 (completamente invertido).

`opacity()`

1filter: opacity(0.5);

A função opacity() altera a transparência de um elemento.

Os valores são especificados no intervalo de 0 (completamente transparente) a 1 (opaco).

`saturate()`

1filter: saturate(2);

A função saturate() ajusta a saturação.

Os valores variam de 0 (monocromático) a 1 (saturação original), e valores maiores que 1 aumentam a saturação.

`sepia()`

1filter: sepia(1);

A função sepia() converte para o tom sépia.

Os valores são especificados de 0 (cor original) a 1 (tom sépia completo).

Aplicando Múltiplos Filtros

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

Múltiplos filtros podem ser aplicados, separados por espaços.

Vantagens de Usar a Propriedade `filter`

A propriedade filter é uma ferramenta poderosa para criar elementos visualmente atraentes com facilidade. Ela possui as seguintes vantagens:.

Efeitos visuais podem ser adicionados facilmente.
As imagens podem ser ajustadas apenas com CSS, sem necessidade de software de edição de imagens.
Efeitos dinâmicos podem ser criados ao combinar com animações.

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

A propriedade transform é usada para aplicar transformações 2D ou 3D a elementos. Diferentes transformações visuais como posição, rotação, escala (aumentar/reduzir) e inclinação podem ser especificadas com CSS. A propriedade transform é frequentemente usada em combinação com animações e ajuda na criação de elementos de interface dinâmicos.

Na classe transform-scale, ao passar o mouse sobre o elemento, sua largura é ampliada em 1,5 vezes e sua altura em 2 vezes.
Na classe transform-skew, ao passar o mouse sobre o elemento, ele gira 30 graus no eixo X e 20 graus no eixo Y.
Na classe transform-rotate, ao passar o mouse sobre o elemento, ele gira 45 graus e é ampliado em 1,5 vezes.

Sintaxe Básica

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

A propriedade transform especifica none ou uma transform-function.

Se none for especificado, nenhuma transformação será aplicada.
Especifique o tipo de transformação usando <transform-function>. Várias transformações podem ser aplicadas separando-as com espaços.

Principais Funções de Transformação

`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 */

A função translate(x, y) move um elemento pelas distâncias especificadas ao longo dos eixos X e Y. Especifique x e y usando unidades como px ou %. Você também pode especificar individualmente com translateX() ou translateY().

`rotate()`

1transform: rotate(45deg); /* Rotate 45 degrees */

A função rotate(angle) gira um elemento pelo ângulo especificado em graus (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 */

A função scale(x, y) redimensiona um elemento ao longo dos eixos X e Y. x e y são fatores de escala relativos ao tamanho original. Por exemplo, scale(2, 2) dobrará o tamanho. Você pode especificar individualmente com scaleX() ou 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);

A função skew(x-angle, y-angle) inclina um elemento pelos ângulos especificados ao longo dos eixos X e Y. Você pode especificar individualmente com skewX() ou skewY().

`matrix()`

1/* Apply a special transformation */
2transform: matrix(1, 0.5, -0.5, 1, 0, 0);

A função matrix() especifica uma matriz para combinar várias transformações ao mesmo tempo. Ela é normalmente usada em combinação com outras funções de transformação.

Funções de transformação 3D

`translate3d()`

1/* Moves the element 100px to the right (X-axis),
250px down (Y-axis), and 30px towards the viewer (Z-axis) */
3transform: translate3d(100px, 50px, 30px);
4
5/* Allows child elements to preserve their 3D position relative to the parent */
6transform-style: preserve-3d;
7
8/* Applies a perspective from a distance of 600px to give a sense of depth */
9perspective: 600px;

A função translate3d() realiza uma translação no espaço 3D.
- Ela pode ser especificada em três dimensões: eixos X, Y e Z.
Ao definir a propriedade transform-style como preserve-3d e a propriedade perspective como 600px, um efeito de movimento tridimensional com profundidade é aplicado aos elementos filhos.

`rotate3d()`

1/* Rotate 45 degrees around the X and Y axes */
2transform: rotate3d(1, 1, 0, 45deg);
3
4transform-style: preserve-3d;
5perspective: 600px;

A função rotate3d() realiza uma rotação no espaço 3D.
- Ela gira um elemento com relação aos eixos X, Y e Z.

Combinando várias transformações

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

A propriedade transform pode aplicar várias transformações simultaneamente. Por exemplo, você pode combinar rotação e escala.

Pontos-chave para Uso

A propriedade transform é uma ferramenta poderosa no CSS para transformar visualmente os elementos. Ao combinar várias funções, você pode criar interfaces interativas e dinâmicas.

A propriedade transform permite a transformação direta dos elementos, possibilitando manipulação visual sem alterar o layout do DOM.
É muito útil para criar animações e elementos interativos, permitindo designs dinâmicos quando combinado com transition ou animation.

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

A propriedade transform-origin é usada para definir o ponto de origem para as transformações aplicadas pela propriedade transform. Você pode especificar o ponto de referência para as transformações dos elementos, permitindo controlar em torno de qual posição efeitos como rotação ou escala são aplicados.

Neste exemplo, ao passar o mouse sobre o elemento, ele gira e escala simultaneamente com base no ponto especificado pela propriedade transform-origin.

Sintaxe Básica

1transform-origin: x y z;

Para a propriedade transform-origin, você especifica x, y e z desta forma.

Para x, especifique o ponto de referência no eixo X (direção horizontal). Os valores podem ser especificados usando palavras-chave (left, center, right) ou medidas (px, %, etc.).
Para y, especifique o ponto de referência no eixo Y (direção vertical). Os valores podem ser especificados usando palavras-chave (top, center, bottom) ou medidas.
Para z, especifique o ponto de referência no eixo Z (direção de profundidade). Só pode ser usado com transformações 3D. É opcional, e o valor padrão é 0.

Valor Padrão

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

O valor padrão para a propriedade transform-origin é o centro do elemento, tanto para os eixos X quanto Y. Isso significa que, por padrão, as transformações são realizadas com o centro do elemento como ponto de referência.

Como Especificar Valores

Os valores para a propriedade transform-origin podem ser especificados usando palavras-chave, percentagens, medidas como px, em, etc.

Especificação de Palavras-chave
- left: Define o ponto de referência do eixo X na borda esquerda do elemento.
- right: Define o ponto de referência do eixo X na borda direita do elemento.
- top: Define o ponto de referência do eixo Y na borda superior do elemento.
- bottom: Define o ponto de referência do eixo Y na borda inferior do elemento.
- center: Define o ponto de referência para o eixo X ou Y no centro do elemento.
Especificação de Porcentagem
- 0%: Define-o na borda esquerda ou superior.
- 50%: Define-o no centro.
- 100%: Define-o na borda direita ou inferior.
Especificação de Comprimento
- Você pode ajustar o ponto de referência com precisão usando comprimentos específicos como px, em, etc.

`transform-origin` em Transformações 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 também pode ser usado para transformações 3D. Nas transformações 3D, você também pode especificar o ponto de referência no eixo Z. Por exemplo, ao especificar o centro de rotação na direção da profundidade, é possível realizar transformações com sensação de profundidade.

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

Propriedades CSS relacionadas à transparência

Propriedades CSS Relacionadas a Efeitos de Filtro

YouTube Video

HTML para Visualização

Efeitos de Filtro

Propriedade filter

Sintaxe Básica

Tipos de funções de filtro

blur()

brightness()

contrast()

grayscale()

hue-rotate()

invert()

opacity()

saturate()

sepia()

Aplicando Múltiplos Filtros

Vantagens de Usar a Propriedade filter

Propriedade transform

Sintaxe Básica

Principais Funções de Transformação

translate()

rotate()

scale()

skew()

matrix()

Funções de transformação 3D

translate3d()

rotate3d()

Combinando várias transformações

Pontos-chave para Uso

Propriedade transform-origin

Sintaxe Básica

Valor Padrão

Como Especificar Valores

transform-origin em Transformações 3D

YouTube Video

Propriedade `filter`

`blur()`

`brightness()`

`contrast()`

`grayscale()`

`hue-rotate()`

`invert()`

`opacity()`

`saturate()`

`sepia()`

Vantagens de Usar a Propriedade `filter`

Propriedade `transform`

`translate()`

`rotate()`

`scale()`

`skew()`

`matrix()`

`translate3d()`

`rotate3d()`

Propriedade `transform-origin`

`transform-origin` em Transformações 3D