Use este tópico para saber como utilizar o painel do CSS Designer para aplicar e editar degradês no plano de fundo de sua página da Web.
Usando o painel CSS Designer, é possível aplicar degradês ao plano de fundo de seus sites. A propriedade de degradê está disponível na categoria Fundo.
Clique em 
perto da propriedade degradê para abrir o painel degradês. Com esse painel, você pode:
- Escolher cores de modelos de cor diferente (RGBa, Hexadecimal ou HSLa) Em seguida, salve diferentes combinações de cores como amostras de cor.
- Para redefinir a nova cor como a cor original, clique na cor original (K).
- Para alterar a ordem das amostras, arraste as amostras até a posição desejada.
- Para excluir uma amostra de cor, arraste a amostra para fora do painel.
- Usar os delimitadores de cor para criar degradês complexos. Clique em qualquer lugar entre os delimitadores de cores padrão para criar um delimitador de cor. Para excluir um ponto de parada de cor, arraste o ponto de parada de cor para fora do painel.
- Especificar o ângulo do degradê linear.
- Para repetir o padrão, edite a propriedade background-repeat.
- Salvar os gradientes personalizados como amostras.
Vamos entender o seguinte código:
background-image: linear-gradient(57deg,rgba(255,255,255,1.00) 0%,rgba(21,8,8,1.00) 46.63%,rgba(255,0,0,1.00) 100%)
- 57deg: indica o ângulo do gradiente linear
- rgba(255, 255, 255, 1.00): indica a cor do primeiro delimitador de cor
- 0%: indica o delimitador de cor
somente os valores “%” de delimitadores de cor são permitidos no Dreamweaver. Se você usar outros valores, como px ou em, o Dreamweaver irá interpretá-los como ”nil“. Além disso, o Dreamweaver não oferece suporte a cores CSS e, se você especificar essas cores no código, tais cores serão lidas como “nil”.
Renderização de gradientes em navegadores da Web
Ao usar degradês como fundo, configure o Dreamweaver para renderizar corretamente os degradês em navegadores da Web diferentes. O Dreamweaver adiciona prefixos do fornecedor ao código que permitem que os navegadores da Web exibam gradientes de modo apropriado.
O Dreamweaver pode gravar os seguintes prefixos do fornecedor no formato w3c:
- Webkit
- Firefox
- Opera
Por padrão, o Dreamweaver grava prefixos do fornecedor para o WebKit e a visualização dinâmica do Dreamweaver. É possível escolher os outros fornecedores necessários na caixa de diálogo Preferências (Preferências > Estilos CSS).
Para sombra de Box, os prefixos Webkit e W3C são sempre gerados, independentemente de você tê-los selecionado nas Preferências ou não.
As alterações feitas nos degradês também são refletidas nas sintaxes específicas do fornecedor. Se você abrir um arquivo existente contendo sintaxes específicas do fornecedor no Dreamweaver, certifique-se de escolher os prefixos de fornecedor necessários nas Preferências. Isso acontece porque, por padrão, o Dreamweaver atualiza somente o Webkit e o código relacionado à visualização dinâmica do Dreamweaver quando você usa ou altera degradês. Portanto, as outras sintaxes específicas do fornecedor no seu código não são atualizadas.
Troca de imagens e gradientes de fundo
Você pode alterar a ordem (em que aparecem no código) de imagens e gradientes de fundo com um único clique.
Clique na seta ao lado da URL ou da propriedade gradiente no CSS Designer.
O Dreamweaver contém uma implementação básica do recurso de trocar fundo. Quando você tiver vários valores ou imagens, a troca talvez não funcione como esperado. Além disso, suponha que você tenha uma imagem, a segunda imagem e um degradê aplicado ao plano de fundo. Trocar o degradê resulta na seguinte ordem: degradê, segunda imagem, primeira imagem.
Criar belos sites no Dreamweaver
Crie, codifique e gerencie sites dinâmicos com uma ferramenta completa e eficiente.
