Transições CSS3 no Dreamweaver CS6

• Abril 26, 2024

Com a adição do HTML5 e CSS3, os sites interativos estão se tornando o esperado. Agora, com o Dreamweaver^R O CS6 e o ​​novo painel Transições CSS, você pode criar seus próprios efeitos interativos sem a necessidade de escrever nenhum código. A saída desse processo é apenas CSS3, sem JavaScript. Portanto, você não precisa se preocupar se o visualizador ativou o JavaScript. As transições criadas pelo Dreamweaver podem ser reproduzidas em qualquer navegador da web moderno.

Vamos ver como é fácil criar nossas próprias transições interativas. A transição pode ser aplicada a qualquer classe, ID ou elemento CSS. Tudo o que precisamos fazer é definir os valores no painel Transições CSS.

1. Nosso primeiro passo é selecionar o elemento ao qual desejamos aplicar a transição. No nosso exemplo, será um link de menu.
   
   
2. Clique em Janela - Transições CSS para abrir o painel.
   
   
3. No painel Transições CSS, clique no sinal de adição para adicionar uma transição.
   
   
4. Na caixa de diálogo Nova transição, podemos usar o menu Regra de destino para escolher entre as predefinições ou digitar nosso próprio nome para a transição. Vamos digitar o nome .morph.
   
   
5. Em seguida, precisamos escolher a ação que acionará a transição. No menu Transição, escolha Passar o mouse para que a transição seja acionada quando colocarmos o mouse sobre o link. Outras opções incluem: ativo, verificado, desativado, ativado, foco, foco, indeterminado e destino.
   
   
6. Para a opção de menu, temos duas opções. Vamos escolher o primeiro.
   
   Use a mesma transição para todas as propriedades
   Use uma transição diferente para cada propriedade
   
   
7. Para a duração e o atraso da transição, podemos usar segundos ou milissegundos. Vamos definir a duração para 1 segundo e o atraso para 0,05 segundo.
   
   
8. Para a função de tempo, temos várias opções de atenuação. Vamos escolher Ease Out.
   
   
9. Para adicionar uma propriedade CSS, clique no sinal de mais e escolha um na lista pop-up. Vamos escolher a cor de fundo.
   
   
10. Depois de escolhermos uma propriedade, podemos definir o valor final para a transição. Dependendo da Propriedade que escolhemos, o menu Valor Final nos dará o menu correspondente para essa Propriedade. Para a cor de fundo, obtemos o seletor de cores. Se adicionarmos a propriedade Font-Weight, obteremos um menu de pesos predefinidos.
    
    
11. Por fim, precisamos escolher Onde criar a transição. Nossas opções são Somente este documento ou Novo arquivo de folha de estilo. Vamos usar o primeiro.
    
    

Depois de clicar no botão Criar transição, podemos ver que a transição foi listada no painel Transições CSS, indicando que a transição de metamorfose será acionada pela ação de foco e aplicada ao destino a.morph.

Se verificarmos a visualização do código, veremos que a classe morph foi adicionada ao link.

Quando passamos o mouse sobre o link na Visualização ao vivo, a cor do plano de fundo muda.

Mas e se precisássemos editar a transição? Podemos fazer isso através do painel Transições CSS.

1. Selecione a transição a.morph e o ícone Editar ficará ativo (ícone de lápis).
   
   
2. Clique no ícone Editar para abrir a caixa de diálogo Editar transição. Aqui, podemos alterar os valores conforme necessário ou adicionar uma nova propriedade e valor final.
   
   

Agora que criamos a transição de metamorfose, podemos aplicá-la facilmente a outros elementos, porque agora está disponível no menu Regra de destino.

* A Adobe me forneceu uma cópia deste software para fins de revisão.

Direitos autorais 2018 Adobe Systems Incorporated. Todos os direitos reservados. As capturas de tela do produto Adobe foram impressas com permissão da Adobe Systems Incorporated. Adobe, Photoshop, Álbum do Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst e Flash Paper é / é [a] marca registrada ou marca comercial da Adobe Systems Incorporated nos Estados Unidos e / ou em outros países.

Instruções De Vídeo: Curso de Dreamweaver CS6 - Transições CSS (Abril 2024).