diff options
| author | MDN <actions@users.noreply.github.com> | 2022-03-19 00:13:08 +0000 |
|---|---|---|
| committer | MDN <actions@users.noreply.github.com> | 2022-03-19 00:13:08 +0000 |
| commit | 9bf6693b2edd5281c1577856895c55653a41dc01 (patch) | |
| tree | 0143e1d1d5c95776e42d8d9afdddedb13a0827c1 /files/pt-br/web/css/element() | |
| parent | 376471eb81e0a3dc263128f834e3c8c22bb9b4d6 (diff) | |
| download | translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.gz translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.bz2 translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.zip | |
[CRON] sync translated content
Diffstat (limited to 'files/pt-br/web/css/element()')
| -rw-r--r-- | files/pt-br/web/css/element()/index.html | 101 |
1 files changed, 0 insertions, 101 deletions
diff --git a/files/pt-br/web/css/element()/index.html b/files/pt-br/web/css/element()/index.html deleted file mode 100644 index f52f5eb6e7..0000000000 --- a/files/pt-br/web/css/element()/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: element -slug: Web/CSS/element() -tags: - - Background - - CSS - - CSS4-images - - Função CSS - - Layout - - Web -translation_of: Web/CSS/element() ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p>A função <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>element()</code></strong> define uma {{cssxref("<image>")}} gerada de um elemento HTML qualquer. Essa imagem é <strong><em>dinamica</em></strong>, significando que se o elemento HTML for mudado, a propriedade CSS usando este valor será atualizada automaticamente.</p> - -<p>Um cenario particularmente util para usar esta função seria colocar uma imagem em um elemento {{HTMLElement("canvas")}}, e então usar-lo como um <em>background</em>.</p> - -<p>Em navegadores Gecko, você pode usar o metodo não padronizado {{domxref("document.mozSetImageElement()")}} para mudar o elemento sendo usado como <em>background</em> por um elemento de <em>background </em>selecionado por CSS.</p> - -<h2 id="Syntax" name="Syntax">Sintaxe</h2> - -<pre class="syntaxbox notranslate">element( <em>id</em> )</pre> - -<p>Onde:</p> - -<dl> - <dt><code>id</code></dt> - <dd>É o ID de um elemento para usar como background, especificado usando o atributo HTML #<em>id</em> no elemento.</dd> -</dl> - -<h2 id="Examples" name="Examples">Exemplos</h2> - -<p>Esses exemplos podem ser <a href="/samples/cssref/moz-element.html" title="https://developer.mozilla.org/samples/cssref/moz-element.html">vistos em tempo real</a> em versões do Firefox que suportam <code>-moz-element()</code>.</p> - -<h3 id="Um_exemplo_de_alguma_maneira_real">Um exemplo de alguma maneira real</h3> - -<p>Esse exemplo usa uma {{HTMLElement("div")}} escondida como <em>background</em>. O elemento de <em>background</em> tem um gradiente, mas tambem um texto que é usado como parte do <em>background</em>.</p> - -<pre class="notranslate"><code><div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;"> - <p>This box uses the element with the #myBackground1 ID as its background!</p> -</div> - -<div style="overflow:hidden; height:0;"> - <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);"> - <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p> - </div> -</div></code></pre> - -<p>A {{HTMLElement("div")}} com ID "myBackground1" é usada como <em>background</em>, mantendo o paragrafo "This box uses the element with the #myBackground1 ID as its background!".</p> - -<p><img alt="example1.png" class="default internal" src="/@api/deki/files/4624/=example1.png"></p> - -<h3 id="Um_exemplo_ainda_mais_bizarro">Um exemplo ainda mais bizarro</h3> - -<p>Esse exemplo usa um elemento {{HTMLElement("button")}} se repetindo como <em>background</em>. Isso mostra que você pode usar qualquer elemento como background, mas não mostra necessariamente boas praticas de design.</p> - -<pre class="brush: html notranslate"><div style="width:400px; height:100px; background:-moz-element(#myBackground2);"> -</div> - -<div style="overflow:hidden; height:0;"> - <button id="myBackground2" type="button">Evil button!</button> -</div> -</pre> - -<p><img alt="example2.png" class="default internal" src="/@api/deki/files/4625/=example2.png"></p> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>Especificação</th> - <th>Estatus</th> - <th>Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td>Actualmente adiado para o CSS4.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade dos navegadores</h2> - -<p> </p> - - - -<p>{{Compat("css.types.image.element")}}</p> - -<p> </p> - -<h2 id="See_also" name="See_also">Veja tambem</h2> - -<ul> - <li>{{domxref("document.mozSetImageElement()")}}</li> -</ul> |
