Degradê

De Wiki V4

Exemplo de código degradê

As propriedades da moldura nos textos, imagens e no site, são versáteis e fáceis de usar, entretanto para designs mais sofisticados, é necessário o uso de efeitos de degradê.

O efeito visual do degradê pode ser aplicado através de ações internas, na inicialização de um objeto por exemplo. Crie uma animação de inicialização no objeto, adicione a propriedade "Ação Interna" e nesta propriedade, coloque o código do degradê.

Para aplicar o degradê no fundo do site, crie uma animação de entrada de página na página inicial, adicione a propriedade "Ação interna" e nesta propriedade, coloque o código do degradê.

Existem duas ações internas para esta finalidade:

1. aplicaDegradeFundo(dados) => serve apenas para aplicar um visual de degradê no fundo do site. Veja mais detalhes;

2. aplicaDegrade(dados) => aplica este efeito no fundo dos Textos, Imagens ou Módulos;

Este é um recurso avançado, mas com os exemplos abaixo basta copiar e ajustar seu comando.

Os dados são separados por vírgulas, na seguinte ordem:

aplicaDegrade(realce, brilho, larguraBrilho, alturaBrilho, raioBrilho, raio, direcao, posBrilho, cores, transparencias, faixas)

Onde cada dado deve ser:

realce: cor ou N - Equivale ao filtro realce na moldura, criando uma borda simpática. N remove.

brilho: cor ou N - Efeito de brilho sobre o degradê. Cor em código HTML, mas substituindo o # por 0x , ex: preto=#000000 fica 0x000000

larguraBrilho: % do objeto - Largura do brilho em % em relação ao objeto onde se aplica o degradê

alturaBrilho: % do objeto - Altura do brilho em % em relação ao objeto onde se aplica o degradê

raioBrilho: número em pixels - Comprimento do raio da curvatura do brilho em pontos

raio: número em pixels - Comprimento do raio da curvatura do degradê em pontos

direcao: -180 a 180 graus - 0=esquerda para direita, 90=cima para baixo, 180=direita para esquerda, -90 = baixo para cima, aceita qualquer ângulo, ex: 45

posBrilho: 1 ou 0 - 0=Topo/esquerda , 1=baixo/direta

cores: cores do degradê separado por espaço '0xFFFFFF, 0X000000'. Cores no formato 0x123ABC cada valor.

transparências: transparências do degradê separados por espaços '100, 100'. De 0-100 cada valor .

faixas: faixas de transição das cores, separada por espaços. De 0-255 cada valor. Define onde será a transição das cores informadas. 0=início do objeto, 255= fim do objeto.

Veja no final desta página exemplos de código de cores em HTML

Vamos aos exemplos na prática, que é a melhor maneira de entender este recurso.

Em cada exemplo abaixo você poderá copiar o código da ação interna e aplicar no seu site, com as modificações desejadas.