From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/element()/index.html | 101 +++++++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 files/pt-br/web/css/element()/index.html (limited to 'files/pt-br/web/css/element()') diff --git a/files/pt-br/web/css/element()/index.html b/files/pt-br/web/css/element()/index.html new file mode 100644 index 0000000000..f52f5eb6e7 --- /dev/null +++ b/files/pt-br/web/css/element()/index.html @@ -0,0 +1,101 @@ +--- +title: element +slug: Web/CSS/element() +tags: + - Background + - CSS + - CSS4-images + - Função CSS + - Layout + - Web +translation_of: Web/CSS/element() +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

A função CSS element() define uma {{cssxref("<image>")}} gerada de um elemento HTML qualquer. Essa imagem é dinamica, significando que se o elemento HTML for mudado, a propriedade CSS usando este valor será atualizada automaticamente.

+ +

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 background.

+ +

Em navegadores Gecko, você pode usar o metodo não padronizado {{domxref("document.mozSetImageElement()")}} para mudar o elemento sendo usado como background por um elemento de background selecionado por CSS.

+ +

Sintaxe

+ +
element( id )
+ +

Onde:

+ +
+
id
+
É o ID de um elemento para usar como background, especificado usando o atributo HTML #id no elemento.
+
+ +

Exemplos

+ +

Esses exemplos podem ser vistos em tempo real em versões do Firefox que suportam -moz-element().

+ +

Um exemplo de alguma maneira real

+ +

Esse exemplo usa uma {{HTMLElement("div")}} escondida como background. O elemento de background tem um gradiente, mas tambem um texto que é usado como parte do background.

+ +
<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>
+ +

A {{HTMLElement("div")}} com ID "myBackground1" é usada como background, mantendo o paragrafo "This box uses the element with the #myBackground1 ID as its background!".

+ +

example1.png

+ +

Um exemplo ainda mais bizarro

+ +

Esse exemplo usa um elemento {{HTMLElement("button")}} se repetindo como background. Isso mostra que você pode usar qualquer elemento como background, mas não mostra necessariamente boas praticas de design.

+ +
<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>
+
+ +

example2.png

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoEstatusComentário
{{SpecName('CSS4 Images', '#element-notation', 'Using Elements as Images: the element() notation')}}{{Spec2('CSS4 Images')}}Actualmente adiado para o CSS4.
+ +

Compatibilidade dos navegadores

+ +

 

+ + + +

{{Compat("css.types.image.element")}}

+ +

 

+ +

Veja tambem

+ + -- cgit v1.2.3-54-g00ecf