Os degradés radiais, que incluem tanto os que têm forma circular em geral, quanto os que têm forma de elipse, são obtidos através do atributo radial-gradient, de CSS3. De modo que, mediante a aplicação de diferentes parâmetros, conseguiremos todas as possibilidades. Como veremos a continuação, têm uma forma de serem definidos muito parecida à que vimos com os degradés lineares, embora neste caso tenhamos que levar em conta alguns outros parâmetros, o que pode dificultar um pouquinho mais seu entendimento.
A sintaxe resumida será a seguinte:
background: radial-gradient(parâmetros);
Ou então:
background-image: radial-gradient(parâmetros);
Os parâmetros que podemos indicar na declaração radial-gradient() é onde realmente radica a dificuldade e ao mesmo tempo a potência deste tipo de degradés. Não obstante, a maioria dos parâmetros é opcional, razão pela qual podemos fazer degradés radiais bastante simples, que tomarão parâmetros por padrão. Na realidade, como veremos, o único que necessitaremos sempre será definir dois ou mais cores para realizar o gradiente de cor.
A lista de parâmetros que poderemos indicar é a seguinte:
A) Posição inicial do gradiente circular:
Os degradés radiais começam em um ponto qualquer do fundo de um elemento e se estendem para fora desse ponto com formas circulares ou de elipse. Em seguida, para defini-los, necessitaremos uma forma de especificar dito ponto de inicio do degradé. O ponto se especifica com uma ou duas coordenadas, que podem ter distintas unidades CSS. Se omitido, se entende que o degradé tem que começar no ponto central do fundo do elemento.
B) Forma e/ou dimensão:
A forma pode ser circular ou elíptica, para o qual especificamos as palavras "circle" ou "ellipse". O tamanho é expresso com outra série de palavras chave, que indicam até onde deve crescer o círculo ou elipse: closest-side | closest-corner | farthest-side | farthest-corner | contain | cover. Por exemplo, closest-side indica que o círculo ou elipse deve crescer até o lado mais próximo. A palavra farthest-corner indica que deve crescer até o canto mais distante. Contain seria o mesmo que dizer closest-side e cover sinônimo de farthest-corner.
Alternativa a B) Tamanho:
Como maneira alternativa a especificar a forma e a dimensão do degradé -ponto B) anterior-, podemos indicar duas medidas em qualquer unidade CSS ou porcentagens. Essas medidas seriam utilizadas para gerar um círculo ou uma elipse do tamanho desejado para nosso gradiente. A primeira medida seria para a largura da elipse e a segunda seria para a altura (se ambas forem iguais aparece uma forma circular no degradé. Se são distintas, seria uma elipse. O tamanho deve ser sempre positivo.
C) Cores do degradé:
Para terminar, devem indicar-se quantas cores se queiram, separadas por vírgulas, com a possibilidade de indicar as paradas de cor desejadas.
Agora, vejamos uma série de exemplos que esperamos esclareçam as ideias com respeito à declaração de fundos radiais.
Nos exemplos que se mostrarão a seguir, se apresenta unicamente o código com o atributo de estilo definitivo, que estará disponível quando as CSS3 sejam um standard.
background: radial-gradient(ellipse cover, #66f, #f80, #ffc);
Em realidade, no momento, para que funcione em Firefox e Chrome há que colocar seus atributos com os nomes proprietários de cada navegador.
background: -webkit-radial-gradient(ellipse cover, #66f, #f80, #ffc);
background: -moz-radial-gradient(ellipse cover, #66f, #f80, #ffc);
A marca -webkit-radial-gradient serve para navegadores baseados em Webkit, como Chorme, e -moz-radial-gradient serve para navegadores baseados em Mozilla, como Firefox.
background: radial-gradient(#0f0, #06f);
Isto faz um degradé do verde ao azul turquesa, com todos os outros parâmetros pré- determinados. Faria um gradiente de forma circular, com seu ponto de início no centro do elemento, em verde, fazendo com que chegasse ao azul turquesa nas bordas do elemento.
background: radial-gradient(top left, #fff, #f66);
Neste caso definimos o ponto de inicio do gradiente com "top left". Trata-se do canto superior esquerdo, onde aparecerá o branco e o degradé teria forma circular tendendo para o rosa, ocupando 100% do elemento.
background: radial-gradient(200px 30px, #f0f, #000);
Este degradé também declara a posição inicial do gradiente, porém o faz mediante as coordenadas definidas com medidas em píxels. É circular e ocupa 100% do espaço disponível no elemento.
background: radial-gradient(center, #00f, #000 50%);
Neste declaramos a posição inicial com center, o comportamento predeterminado, que coloca o início do degradé no centro, tanto vertical quanto horizontal. O detalhe é que o degradé se realiza desde o centro até 50% do tamanho do elemento, já que colocamos uma parada de cor ("color stop") de 50% na última cor.
background: radial-gradient(circle, #66f, #f80, #ffc);
Este é o primeiro dos exemplos no que definimos a forma do degradé, ainda que só indiquemos "circle". Portanto, o degradé começará no centro e ocupará 100% do espaço disponível no elemento, embora sempre com o mesmo raio.
background: radial-gradient(ellipse cover, #66f, #f80, #ffc);
Este degradé é exatamente igual ao anterior, mas em vez de circular é de elipse, cobrindo 100% do espaço disponível, e começando no centro. Este é o comportamento predeterminado do estilo.
background: radial-gradient(10%, ellipse closest-side, #66f 60%, #f80 85%, #ffc);
Este exemplo tem definida a posição do degradé e a forma. É o primeiro que especifica esses dois valores ao mesmo tempo. Neste caso, sobre a posição só se declara 10%, assim que aparecerá centrado na vertical e na horizontal aparecerá em 10% do espaço do container pela parte da esquerda. É em forma de elipse e closest-side significa que se expande em forma de elipse até se completar no lado mais próximo.
background: radial-gradient(10%, ellipse farthest-corner, #66f 60%, #f80 85%, #ffc);
Este degradé é igual ao anterior, na mesma posição e em forma de elipse, porém, o tamanho foi definido com farthest-corner, o que fará com que o degradé seja muito maior, expandindo-se até o canto mais distante.
background: radial-gradient(20px 100px, 30% 80%, #fff, #666, #66f);
Neste caso definimos a posição inicial com as coordenadas em píxels e, o que é novidade, definimos tanto a forma quanto o tamanho do degradé em porcentagem. A largura será 30% do elemento e a altura 80%.
background: radial-gradient(top left, 150px 100px, #ffc, #f96, #963, #630);
Definimos a posição inicial por meio dos valores top e left e o tamanho por meio de unidades em píxels.
background: radial-gradient(20% 80%, 100% 50%, red, blue 50px, red);
A posição do centro do degradé está em porcentagem, assim como o tamanho da elipse, também em porcentagens.
background: radial-gradient(left, 200px 200px, #f00 20%, #f80, #ff0, #0f0, #00f, #60f, #c0f);
Neste definimos o tamanho da largura e da altura com dois valores em píxels, mas como são iguais, em lugar de uma elipse veríamos uma forma circular, cujo raio é sempre igual.
Recordem que podem ver o exemplo em funcionamento, embora só em navegadores que suportem os degradés radiais. Os outros usuários podem ver os degradés produzidos nos exemplos na seguinte imagem:
No próximo artigo falaremos do último tipo de degradés CSS3 que falta ver, os degradés radiais de repetição.
