files/pt-br/web/css/backdrop-filter/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

---
title: backdrop-filter
slug: Web/CSS/backdrop-filter
tags:
  - Filtros
  - efeitos
  - iOS
  - plano de fundo
translation_of: Web/CSS/backdrop-filter
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>

<p>A propriedade <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>backdrop-filter</code></strong> permite que você aplique efeitos gráficos, como desfoque ou mudança de cores, na área ao fundo de um elemento. Como ela se aplica a tudo que fica <em>atrás</em> do elemento, é preciso deixá-lo (ou o seu plando de fundo) ao menos parcialmente transparente para poder ver o efeito em ação.</p>

<pre class="brush: css no-line-numbers">/* Valor de palavra-chave */
backdrop-filter: none;

/* Filtro com URL para SVG */
backdrop-filter: url(commonfilters.svg#filter);

/* Valores &lt;filter-function&gt; */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* Vários filtros */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

/* Valores globais */
backdrop-filter: inherit;
backdrop-filter: initial;
backdrop-filter: unset;
</pre>

<p>{{cssinfo}}</p>

<h2 id="Sintaxe">Sintaxe</h2>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><code>none</code></dt>
 <dd>Nenhum filtro é aplicado ao plano de fundo.</dd>
 <dt><code>&lt;filter-function-list&gt;</code></dt>
 <dd>Uma lista de {{cssxref("&lt;filter-function&gt;")}}s separadas por espaços ou um <a href="/en-US/docs/Web/SVG/Element/filter">filtro SVG</a> que será aplicado ao plano de fundo.</dd>
</dl>

<h3 id="Sintaxe_formal">Sintaxe formal</h3>

{{csssyntax}}

<h2 id="Exemplo">Exemplo</h2>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">.box {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  line-height: 1;
 -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-image: url('https://lorempixel.com/400/200/');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div class="container"&gt;
  &lt;div class="box"&gt;
    &lt;p&gt;backdrop-filter: blur(10px)&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

<h3 id="Resultado">Resultado</h3>

<p>{{EmbedLiveSample("Example", 600, 400)}}</p>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Descrição</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}</td>
   <td>{{Spec2('Filters 2.0')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>


<p>{{Compat("css.properties.backdrop-filter")}}</p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li>{{cssxref("filter")}}</li>
 <li><a href="http://product.voxmedia.com/til/2015/2/17/8053347/css-ios-transparency-with-webkit-backdrop-filter">Criando efeitos de transparência estilo iOS em CSS com backdrop-filter</a></li>
</ul>