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.

Propriedade degradê
Propriedade degradê

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) e salvar as combinações de cores como amostras de cores.
    • Para redefinir a nova cor como a cor original, clique na cor original (K).
    • Para alterar a ordem das amostras, arraste-as até a posição desejada.
    • Para excluir uma amostra de cores, 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 o delimitador de cor, arraste o delimitador de cor para fora do painel.
  • Especificar o ângulo do degradê linear.
  • Para repetir o padrão, edite a propriedade background-repeat.
  • Salve os degradês 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 degradê linear
  • rgba(255, 255, 255, 1.00): indica a cor da primeira interrupção de cor
  • 0%: indica a interrupção de cor

Observação:

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”.

Processamento de degradês 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 degradês 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).

Observação:

para as gerações de sombra de Caixa, os prefixos do Webkit e w3c sempre são gerados independentemente de terem sido selecionados ou não em Preferências.

As alterações feitas nos degradês também são refletidas nas sintaxes específicas do fornecedor. Se você abrir um arquivo existente que contém sintaxes específicas do fornecedor no Dreamweaver CC, escolha os prefixos do fornecedor obrigatórios em 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 degradês de fundo

Você pode alterar a ordem (em que aparecem no código) de imagens e degradês de fundo com um único clique.

Clique na seta ao lado do url ou da propriedade gradient no CSS Designer.

Observação:

a Dreamweaver CC contém uma implementação básica do recurso de troca de 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.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online