Usando o painel CSS Transitions no Dreamweaver CS6 | keyframe – Comunicação Digital, Websites
Usando o painel CSS Transitions no Dreamweaver CS6
em 31 jul, 2012 com 5 comentários
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.
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:
<!–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 class="box2">este é o box 2</div>
<div class="box3">este é o box 3</div>
Procure os estilos da página e coloque o seguinte código:
.box1 p, .box2 p, .box3 p {
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.
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 .
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.
Clique para adicionar uma propriedade CSS para a transição.
Digite uma duração em segundos (s) ou milissegundos (ms) para o efeito de transição.
O tempo, em segundos ou milissegundos, antes de o efeito de transição é iniciado.
Selecione um estilo de transição entre as opções disponíveis.
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.
-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;
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.
animações , css3 , dreamweaver
10 de novembro de 2016 at 20:17 - Responder
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)?