Gradientes Circulares e Elípticos CSS3 [Dicas CSS3]
Hoje vamos continuar nossa discussão sobre Gradientes CSS3. Na postagem anterior, mostramos como criar Gradientes Lineares. Desta vez vamos cobrir o seu parente, Gradientes Circulares e Elípticos.
A sintaxe de gradiente
O gradiente em CSS3 é declarado usando o imagem de fundo propriedade. Isto é para melhor compatibilidade quando também precisamos adicionar cor de fundo em um único conjunto de regras, para que eles não colidam uns com os outros. Então, para criar o gradiente radial, simplesmente o chamamos com esse gradiente radial () função. Existem quatro valores a serem incluídos na função para definir o gradiente adequadamente.
O primeiro valor define o posição gradiente. Podemos usar uma palavra-chave descritiva, como top, bottom, center e left, ou também podemos ser mais específicos, como, 50% 50% para definir o gradiente no centro ou 0% 0% para definir o gradiente para começar em canto superior esquerdo.
O segundo valor define o forma e o tamanho do gradiente, existem dois argumentos para moldar os gradientes, primeiro o elipse qual é o padrão, e o segundo é círculo.
E para o tamanho gradiente, podemos selecionar um dos seis argumentos a seguir.
| Valores | Descrição |
|---|---|
lado mais próximo | A forma do gradiente encontra o lado da caixa mais próximo de seu centro (para círculos) ou encontra os lados vertical e horizontal mais próximos do centro (para elipses). |
canto mais próximo | A forma do gradiente é dimensionada de modo a encontrar exatamente o canto mais próximo da caixa do centro. |
o lado mais distante | Semelhante ao lado mais próximo, exceto que a forma é dimensionada para encontrar o lado da caixa mais distante de seu centro (ou lados verticais e horizontais). |
mais distante | A forma do gradiente é dimensionada de modo a encontrar exatamente o canto mais distante da caixa do centro. |
conter | Sinônimo de |
tampa | Sinônimo de |
Fonte da Tabela: Rede de desenvolvedores Mozilla.
Por fim, o terceiro e o quarto definem a combinação de cores. Então, aqui está como nós escrevemos a sintaxe para criar o Elíptico gradientes, e desta vez vamos usar tampa para o tamanho do gradiente, por isso vai se espalhar amplamente, cobrindo o recipiente;
corpo background-image: gradiente radial (centro central, cobertura de elipse, # ffeda3, # ffc800);
Para criar o Circular gradiente podemos simplesmente fazer assim:
corpo background-image: gradiente radial (centro central, cobertura do círculo, # ffeda3, # ffc800);
Como o nome indica, a forma do gradiente será um círculo.
Suporte de Navegador
Apenas tome nota, porém, todos os navegadores ainda estão no processo de fornecer suporte completo para esse recurso, então eles ainda precisam do prefixo do fornecedor. Assim, toda a sintaxe completa que funcionará em todos os navegadores modernos - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ e Opera 11+ - será algo parecido com isto;
corpo background-image: gradiente radial (parte inferior do centro, cobertura de elipse, # ffeda3, # ffc800); background-image: -o-radial-gradient (parte inferior do centro, tampa da elipse, # ffeda3, # ffc800); background-image: -ms-gradiente-radial (parte central inferior, cobertura de elipse, # ffeda3, # ffc800); background-image: -moz-radial-gradient (parte inferior do centro, tampa da elipse, # ffeda3, # ffc800); background-image: -webkit-radial-gradient (parte inferior do centro, tampa da elipse, # ffeda3, # ffc800);
Confira a demonstração ou faça o download da fonte para brincar com gradientes.
- Demonstração
- Fonte de download
Palavras finais
Criar gradiente radial CSS3 não é tão difícil quanto você pensa e, especialmente, quando você recebe ajuda dessas ferramentas para gerar código:
- Gradientes Colorzilla
- Gradientoo
O gradiente radial é apenas um tipo de gadgets CSS3, continuaremos nossa discussão sobre o assunto em postagens futuras, portanto, fique ligado em Hongkiat.com
