Um poderoso editor de gradientes CSS semelhante ao Photoshop
|
Opacidade:
|
Localização: | % | ||
Cor: |
Localização: | % |
| IE | Edge | Firefox | Chrome | Safari | Opera | iOS Safari | Navegador Android | Chrome para Android |
|---|---|---|---|---|---|---|---|---|
| 6 - 8
Suporte parcial usando a sintaxe filter
Uso do navegador: 0.03%
|
4 - 9
Suporte usando a antiga sintaxe -webkit-
Uso do navegador: 0% Selecione "Maximizar compatibilidade" para suportar |
4 - 5
Suporte usando a antiga sintaxe -webkit-
Uso do navegador: 0.01% Selecione "Maximizar compatibilidade" para suportar |
3.2 - 4.3
Suporte usando a antiga sintaxe -webkit-
Uso do navegador: 0% Selecione "Maximizar compatibilidade" para suportar |
2.1 - 3
Suporte usando a antiga sintaxe -webkit-
Uso do navegador: 0.01% Selecione "Maximizar compatibilidade" para suportar |
||||
| 9
Suporte parcial usando a sintaxe filter
Suporte total usando SVG (selecione "suporte IE9") Uso do navegador: 0.05% Selecione "Maximizar compatibilidade" para suportar |
3.6 - 15
Suporte usando o prefixo -moz-
Uso do navegador: 0.01% Selecione "Maximizar compatibilidade" para suportar |
10 - 25
Suporte usando o prefixo -webkit-
Uso do navegador: 0% Selecione "Maximizar compatibilidade" para suportar |
5.1 - 6
Suporte usando o prefixo -webkit-
Uso do navegador: 0.01% Selecione "Maximizar compatibilidade" para suportar |
11.1 - 11.5
Suporte usando o prefixo -o-
Uso do navegador: 0% Selecione "Maximizar compatibilidade" para suportar |
5.1 - 6.1
Suporte usando o prefixo -webkit-
Uso do navegador: 0% Selecione "Maximizar compatibilidade" para suportar |
4 - 4.3
Suporte usando o prefixo -webkit-
Uso do navegador: 0.09% Selecione "Maximizar compatibilidade" para suportar |
||
| 10+
Suporte total (sem prefixo)
|
12+
Suporte total (sem prefixo)
|
16+
Suporte total (sem prefixo)
|
26+
Suporte total (sem prefixo)
|
6.1+
Suporte total (sem prefixo)
|
12+
Suporte total (sem prefixo)
|
7.1+
Suporte total (sem prefixo)
|
4.4+
Suporte total (sem prefixo)
|
46+
Suporte total (sem prefixo)
|
(?)
Links para a documentação de gradientes CSS: W3C, Firefox, Safari, Chrome (Webkit), Internet Explorer, Opera [2].
O Ultimate CSS Gradient Editor foi criado por Alex Sirota. Se gostas desta ferramenta, confere o ColorZilla para ferramentas mais avançadas como pipetas, selecionadores de cores, editores de paletas e analisadores de sites.
Como talvez saibas, HTML5 introduziu muitas funcionalidades interessantes para desenvolvedores Web. Uma das funcionalidades é a capacidade de especificar gradientes usando apenas CSS3, sem ter que criar quaisquer imagens e usá-las como fundos repetidos para efeitos de gradiente.
Importante: Vais precisar de uma versão recente do Firefox, Chrome, Safari, Opera ou IE para usar este Gerador de Gradiente. Os gradientes CSS resultantes são cross-browser - eles funcionarão nestes browsers e também recorrerão a um gradiente mais simples em versões mais antigas do Internet Explorer.
O controle principal de gradiente permite-lhe:
O painel 'Pré-visualização' permite pré-visualizar o gradiente atual como um gradiente vertical ou horizontal, e também permite pré-visualizar rapidamente como o gradiente de fallback do Internet Explorer ficará no IE.
Por fim, o painel 'CSS' sempre tem o CSS para o gradiente atual para fácil cópia e colagem na sua folha de estilo. Também pode usar este painel para importar um CSS de gradiente existente para a ferramenta.
As predefinições de gradiente 'Ultimate Web 2.0 Gradients' foram derivadas do trabalho de deziner folio e SGlider12.
O Seletor de Cores é uma pequena adaptação de John Dyer's Color Picker.
A função de codificação Base-64 é de webtoolkit.
Alguns ícones por Yusuke Kamiyamane.