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/radial-gradient()/index.html | 209 +++++++++++++++++++++++ 1 file changed, 209 insertions(+) create mode 100644 files/pt-br/web/css/radial-gradient()/index.html (limited to 'files/pt-br/web/css/radial-gradient()') diff --git a/files/pt-br/web/css/radial-gradient()/index.html b/files/pt-br/web/css/radial-gradient()/index.html new file mode 100644 index 0000000000..1479f4b77b --- /dev/null +++ b/files/pt-br/web/css/radial-gradient()/index.html @@ -0,0 +1,209 @@ +--- +title: radial-gradient() +slug: Web/CSS/radial-gradient() +translation_of: Web/CSS/radial-gradient() +--- +

{{ CSSRef() }}

+ +

Resumo

+ +

A função do CSS radial-gradient() cria uma {{cssxref("<image>")}} que representa um gradiente de cores irradiando de uma origem, o centro do gradiente. O resultado dessa função é um objeto do CSS do tipo {{cssxref("<gradient>")}}.

+ +

Gradientes radiais são definidos pelo seu centro, o contorno e a posição da forma de fechamento (ending shape) e as paradas de cor (color stops). O gradiente radial consiste de formas concêntricas uniformemente escaladas partindo do centro até sua forma de fechamento, indo potencialmente além, com a mesma forma da forma de fechamento. As paradas de cor são posicionadas num raio de gradiente virtual saindo do centro horizontalmente para a direita. O posicionamento das porcentagens das paradas de cor são relativas à interseção entre a forma de fechamento e esse raio de gradiente representando 100%. Cada forma é monocromática e a cor, definida pela cor no raio de gradiente que intersecta.

+ +

Formas de fechamento podem ser apenas círculo (circle) ou elipse (ellipse).

+ +

Como qualquer outro gradiente, um gradiente radial do CSS não é uma <cor> do CSS, mas uma imagem sem dimensões intrínsecas, i. e. uma imagem sem tamanho natural ou preferencial, tampouco proporção. Seu tamanho concreto será idêntico ao tamanho do elemento ao qual for aplicado.

+ +

A função radial-gradient não permite criar gradientes repetitivos. Para esse efeito, use a função do CSS {{ Cssxref("repeating-radial-gradient") }}.

+ +

Sintaxe

+ +
Gramática formal: radial-gradient( [ circle || <length> ] [ at <position> ]? ,
+| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,
+| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,
+| at <position> ,
+<color-stop> [ , <color-stop> ]+ )
+
+ +

Valores

+ +
+
<position>
+
Uma {{cssxref("<position>")}}, interpretada da mesma forma que {{Cssxref("background-position")}} ou {{Cssxref("transform-origin")}}. Se omitida, assume o padrão center.
+
<shape>
+
A forma do gradiente. Esse valor é circle (indicando que a forma do gradiente é um círculo com raio constante) ou ellipse (indicando que a forma é uma elipse com os eixos alinhados ao elemento). O valor padrão é ellipse.
+
<size>
+
O tamanho do gradiente. Essa valor é uma das {{anch("Restrições de tamanho")}} listada abaixo.
+
<color-stop>
+
Representando uma cor fixa num determinado ponto, esse valor é composto por um valor {{cssxref("<color>")}}, seguido de uma posição de parada opcional (uma {{cssxref("<percentage>")}} ou uma {{cssxref("<length>")}} referente ao raio de gradiente virtual). Uma porcentagem de 0%, ou um tamanho de 0 representa o centro do gradiente e o valor 100% a interseção da forma de fechamento com o raio de gradiente virtual. Valores de porcentagem intermediários são posicionados linearmente no raio de gradiente.
+
<extent-keyword>
+
Palavras-chave descrevendo quão grande a forma de fechamento deve ser. Os possíveis valores são:
+
+ + + + + + + + + + + + + + + + + + + + + + + +
ConstanteDescrição
closest-sideA forma de fechamento do gradiente encontra o lado do elemento mais próximo ao seu centro (para círculos) ou encontra ambos os lados vertical e horizontal mais próximos ao centro (para elipses).
closest-cornerA forma de fechamento do gradiente tem o tamanho exato para encontrar o canto da caixa mais próximo ao seu centro.
farthest-sideSimilar ao closest-side, mas a forma de fechamento fica com o tamanho necessário para encontrar o lado do elemento mais distante do centro do gradiente (ou lados vertical e horizontal).
farthest-cornerA forma de fechamento do gradiente tem o tamanho exato para encontrar o canto da caixa mais distante de seu centro.
+ Rascunhos preliminares incluiam outras palavras-chave (cover e contain) como sinônimos dos valores do padrão farthest-corner e closest-side respectivamente. Use somente os valores do padrão, uma vez que algumas implementações podem já ter removido suporte a esses valores mais antigos.
+
+ +

Exemplos

+ +
ellipse farthest-corner
+ +
background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
+
+ +
470px 47px
+ +
background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%);
+
+ +
farthest-corner
+ +
background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);
+ +
16px radius fuzzy circle
+ +
background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
+
+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçãoStatusComentários
{{ SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()') }}{{ Spec2('CSS3 Images') }} 
+ +

Compatibilidade de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Suporte básico (suporte à função radial-gradient(), mas não necessariamente com a sintaxe final){{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [3]
+ {{ CompatGeckoDesktop("16") }}		10.0 (534.16){{ property_prefix("-webkit") }} [2][3]10.0 [1]11.60{{ property_prefix("-o") }}5.1{{ property_prefix("-webkit") }}[2]
Sintaxe legada do webkit {{ non-standard_inline() }}{{ CompatNo() }}3{{ property_prefix("-webkit") }} [2]{{ CompatNo() }}{{ CompatNo() }}4.0{{ property_prefix("-webkit") }} [2]
Sintaxe at (sintaxe do padrão final){{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }} [3]
+ {{ CompatGeckoDesktop("16") }}		{{ CompatNo() }}10.011.60{{ property_prefix("-o") }} [3]
+ Presto 2.12 will remove the prefix.		{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FuncionalidadeAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico (suporte à função radial-gradient(), mas não necessariamente com a sintaxe final){{CompatVersionUnknown}}{{ CompatGeckoMobile("1.9.2") }}{{ property_prefix("-moz") }} [3]
+ {{ CompatGeckoMobile("16") }}		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Sintaxe legada do webkit {{ non-standard_inline() }}{{CompatUnknown}}{{ CompatNo() }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Sintaxe at (sintaxe do padrão final){{CompatUnknown}}{{ CompatGeckoMobile("10") }}{{ property_prefix("-moz") }} [3]
+ {{ CompatGeckoMobile("16") }}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer 5.5 a 9.0 suportam a funcionalidade proprietária filter: progid:DXImageTransform.Microsoft.Gradient() filter.

+ +

[2] WebKit desde 528 suporta a função legada -webkit-gradient(radial,…). Veja também o suporte atual para gradientes radiais.

+ +

[3] Firefox 3.6 e Webkit implementaram uma sintaxe anterior, prefixada.

+ +

Veja também

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