Usando o painel CSS Transitions no Dreamweaver CS6 | keyframe – Comunicação Digital, Websites

Blog

Usando o painel CSS Transitions no Dreamweaver CS6

Neste tutorial, iremos aprender sobre o novo painel CSS Transitions do Dreamweaver CS6, o que torna fácil adicionar transições css para qualquer elemento na página através de uma única janela. Toda a sintaxe CSS é feita automaticamente, incluindo prefixos para todos os principais navegadores. 

Se você preferir escrever seu próprio código CSS, o painel CSS Transitions tem uma maneira fácil de gerenciar e editar transições, independentemente de onde eles forem adicionados.

Demonstração

Download

Então vamos lá.

O primeiro passo é criarmos uma estrutura HTML, que no caso eu já usei uma dos próprios modelos do DW. Vá no menu file > new

Limpei todo código dentro da DIV ‘content’ , e inseri dentro da DIV ‘content’  o seguinte código HTML:

[sourcecode language=”html”]
<!–novo painel de CSS transitions–>
<div class="box1">este é o box 1
<p>The above links demonstrate a basic navigational structure using an unordered list styled with CSS. Use this as a starting point and modify the properties to produce</p>
</div>
<div class="box2">este é o box 2</div>
<div class="box3">este é o box 3</div>
<!–novo painel de CSS transitions–>
[/sourcecode]

Procure os estilos da página e coloque o seguinte código:

[sourcecode language=”css”]
.box1 p, .box2 p, .box3 p {
font-size: 11px;
padding: 15px 0;
}
.box1, .box2, .box3 {
overflow: hidden;
background-color: #CCC;
float: left;
width: 240px;
height: 25px;
padding: 0 0 0 5px;
border: 1px solid #999;
margin: 0 5px 0 5px;
}
[/sourcecode]

Salve seu projeto e teste por exemplo no Google Chrome ou Firefox. Repare que agora as caixas ficam lado a lado, eu inseri uma altura de 25px e o overflow garante que o texto não apareça, salve suas alterações e abra o painel de CSS em window > css transitions.

Insira os valores conforme a figura acima.

Sobre os parâmetros:

Alvo

Digite um nome para o seletor. O seletor pode ser qualquer seletor CSS como um tag, uma regra, uma identificação, ou um seletor de composto. Por exemplo, se você deseja adicionar efeitos de transição para todos os <hr> tags, escolha hr .

Transição

Selecione um estado para o qual você deseja aplicar a transição. Por exemplo, se você deseja aplicar a transição quando o mouse passar sobre o elemento, use a opção focus.

Use a mesma transição para todas as propriedades

Selecione esta opção se você quiser especificar a mesma duração , Delay , e função de temporização para todas as propriedades CSS que você deseja fazer a transição.

Use uma transição diferente para cada propriedade

Selecione esta opção se você deseja especificar uma duração diferente, Delay, e função de temporização para cada uma das propriedades CSS que você deseja fazer a transição.

Propriedade

Clique para adicionar uma propriedade CSS para a transição.

Duração

Digite uma duração em segundos (s) ou milissegundos (ms) para o efeito de transição.

Atrasar

O tempo, em segundos ou milissegundos, antes de o efeito de transição é iniciado.

Temporização

Selecione um estilo de transição entre as opções disponíveis.

Valor Final

O valor final para o efeito de transição. Por exemplo, se você quiser o tamanho da fonte aumente  40px no final do efeito de transição, especifique 40px para a propriedade font-size.

Escolha onde pretende criar a Transição

Para incorporar o estilo no documento atual, selecione Apenas este documento .

Se você deseja criar uma folha de estilo para o código do CSS3, selecione uma nova folha de estilo . Quando você clicar em Criar Transição, você será solicitado um local para salvar o novo arquivo CSS.

Clique em save transiton, salve seu projeto e faça um teste. É importante visualizar e ver se o Dreamweaver inseriu o código corretamente, repare que ele criou o seguinte código css.

[sourcecode language=”css”]
.box1 {
-webkit-transition: min-height .75s ease;
-moz-transition: min-height .75s ease;
-ms-transition: min-height .75s ease;
-o-transition: min-height .75s ease;
transition: min-height .75s ease;
}
.box1:hover {
min-height: 130px;
}
[/sourcecode]

Para melhorar o visual eu inseri a propriedade background-color:#FFF; no .box1:hover, mais o objetivo não é visual e sim mostrar a introdução do painel.

Agora vocês já sabem o caminho, façam testes porque são várias transições e efeitos.

Espero que tenham gostado, fiquem a vontade para comentar. Qualquer dúvida estamos ai.

Este post tem 3 comentários

  1. Mai says:

    Como fazer para que o objeto/div cresça sentido ‘topo’ e não para baixo usando a caixa de transições (ou qquer outro recurso do dreamweaver cs6)?

Deixe seu comentário