Recursos on-line para gerar gradientes CSS3

A capacidade para gerar misturas de gradiente de complexos é uma das melhorias dramáticas em realmente CSS3. Até o advento do CSS3, os designers contou com arquivos de imagem em azulejos para criar fundos texturizados atrás de páginas e elementos de design (como tags). Esses arquivos de imagem abrandou páginas, e parecia brega quando eles lentamente baixado em páginas que um usuário tinha aberto.

Essa é a boa notícia.

A desvantagem é que define a sintaxe, mesmo para um gradiente linear simples é um aborrecimento porque diferentes navegadores têm sintaxe diferente para definir até mesmo essas inclinações simples. E quando se trata de definir gradientes diagonais ou radiais, as diferenças entre sintaxe navegador tornam-se ainda mais evidente.

Só para dar um sentido a isso, examinar o CSS necessário para produzir a imagem de fundo na figura abaixo:

background: -moz-radial de gradiente (centro, tampa elipse, rgba (228,245,252,1) 0%, rgba (191,232,249,1) 50%, rgba (159,216,239,1) 51%, rgba (42,176,237,1) 100%) - / * FF3.6 + * / background: -webkit-gradiente (radial, centro, 0px, centro, 100%, cor-stop (0%, rgba (228,245,252,1)), cor-stop (50% , rgba (191,232,249,1)), cor-stop (51%, rgba (159,216,239,1)), cor-stop (100%, rgba (42,176,237,1))) - / * Chrome, Safari4 + * / background: - webkit-radial de gradiente (centro, tampa elipse, rgba (228,245,252,1) 0%, rgba (191,232,249,1) 50%, rgba (159,216,239,1) 51%, rgba (42,176,237,1) 100%) - / * Chrome10 +, Safari5.1 + * / background: -o-radial de gradiente (centro, tampa elipse, rgba (228,245,252,1) 0%, rgba (191,232,249,1) 50%, rgba (159,216,239,1) 51%, rgba (42,176,237,1) 100%) - / * Opera 12+ * / background: -ms-radial de gradiente (centro, tampa elipse, rgba (228,245,252,1) 0%, rgba (191,232,249,1) 50%, rgba ( 159,216,239,1) 51%, rgba (42,176,237,1) 100%) - / * IE10 + * / background: radial de gradiente (elipse no centro, rgba (228,245,252,1) 0%, rgba (191,232,249,1) 50%, rgba (159,216,239,1) 51%, rgba (42,176,237,1) 100%) - / * W3C * /

Então, o que é uma má designer para fazer? Felizmente, existem vários geradores de gradiente CSS realmente úteis online. Aqui estão três dos melhores:

Generator Gradiente CSS final do ColorZilla

Provavelmente, o mais poderoso dos geradores de gradiente CSS3, o Final Generator Gradiente CSS permite que os designers definem gradientes com controles deslizantes que vai se sentir confortável para quem tenha definido um gradiente no Illustrator, CorelDraw ou outros programas de desenho, mostrado aqui:

The Ultimate CSS Gradient Generator também fornece opções para geração de imagens SVG que serão reconhecidos no Internet Explorer 9 (que tem suporte limitado para gradientes CSS3).

CSS3 Generator Gradiente

A Gradiente Generator CSS3, criado por Damian Galarza, tem algumas menos recursos do que o Gradiente Generator final CSS, mas uma interface muito limpa, acessível torna mais fácil para criar misturas diagonais linear básica e, enquanto assistia código CSS aparecer na tela.

Este recurso é especialmente útil para a criação de fundo gradiente para botões desde a janela de visualização é um bom limpo square-sized botão, pré-configurado.

CSS Gradient Background Criador

Alguns caras em uma garagem-se perto de Seattle colocar um gerador de gradiente CSS3 easy-to-use e poderoso do que eles chamam de CSS Gradient Background Criador. Eles têm uma alternativa start-up que eles chamam de Microsoft, e os gradientes que você gerar aqui trabalhar em - sim, o Internet Explorer (versões 10 e posteriores), mas também todos os outros browers atuais.

A Gradiente CSS Background Criador pode ser o caminho mais rápido para criar gradientes do bando como ele vem com mais de uma dúzia pré-sets.

Como Geradores Gradiente CSS3 Trabalho

Todos os três geradores de gradiente CSS3 listados aqui, entre outros, bem como, criar blocos de código CSS3 que os designers podem copiar e colar em arquivos CSS. Eles geradores não fornecem uma grande ajuda em como fazer isso - eles esperam que você seja capaz de lidar com a definição CSS3 fundos para elementos e classe e seletores div em um arquivo CSS.

Mas o processo não é muito difícil. Por exemplo, se você criar um estilo de classe e nomeá-la .background, você pode copiar e colar um estilo de gradiente em que o seletor como mostrado aqui:

.fundo {/ * IE10 Release Preview * / background-image: -ms-radial de gradiente (centro, o círculo do lado mais próximo, #FFFFFF 0%, # 00A3EF 100%) - / * Mozilla Firefox * / background-image: -moz -radial-gradiente (centro, o círculo do lado mais próximo, #FFFFFF 0%, # 00A3EF 100%) - / * Opera * / background-image: -o-radial de gradiente (centro, o círculo do lado mais próximo, #FFFFFF 0% , # 00A3EF 100%) - / * Webkit (Safari / Chrome 10) * / background-image: -webkit-gradiente (radial, centro, 0, centro, 140, cor-stop (0, #FFFFFF), cor -stop (1, # 00A3EF)) - / * Webkit (Chrome 11+) * / background-image: -webkit-radial de gradiente (centro, o círculo do lado mais próximo, #FFFFFF 0%, # 00A3EF 100%) - / * W3C Markup, IE10 Release Preview * / background-image: radial de gradiente (círculo mais próximo do lado no centro, #FFFFFF 0%, # 00A3EF 100%) -}

E, em seguida, você pode aplicar o plano de fundo a qualquer elemento no seu arquivo HTML. Aqui, o fundo é aplicada a uma etiqueta de:

(Conteúdo aqui)