Velha Guarda Ex-Staffer Cr4cko 1.149 Postado 23 de Dezembro 2014 Velha Guarda Ex-Staffer Compartilhar Postado 23 de Dezembro 2014 Bom, vou passar algo à vocês que eu sempre uso. Parei de usar jquery para diversas coisas no meu site. Efeito fade, e qualquer tipo de transições com os efeitos :hover, :focus, etc. CSS3 está ai para deixar o seu site mais clean e rapido. Com o Transition, podemos adicionar efeitos sem a necessidade de javascript ou flash. O efeito transition você pode instancia-lo da seguinte forma: 1 - Vamos criar um botão no css É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se Vamos testar? Veja o exemplo: É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se Explicação completa (por Dotfile) transition-delay: Determina a partir de quanto tempo a transição irá iniciar que o padrão é 0. transition-duration: Duração do efeito em segundos que se não me engano por padrão é 0 também. transition-property: Nome da propriedade CSS a qual o efeito da transição vai ser aplicado (border, background, etc) transition-timing-function: Forma como se comporta o ritmo da transição que podem ser linear, ease, ease-in, ease-out e ease-in-out e tem um tipo de forma que você pode manipular (só procurar na internet). e por fim a: transition: Forma resumida que agrupa as outras 4 propriedades. É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se Exemplo: É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se OBS: A ordem não interfere no resultado. Você pode ler mais a respeito no seguinte link É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se Qualquer dúvida, só postar aqui que eu respondo! Abraços Quer aprender a programar Python? https://youtube.com/@ProgramadorPython ᅠᅠMural de Coleçõesᅠᅠ Clique aqui e adquira suas medalhas Link para o comentário Compartilhar em outros sites Mais opções de compartilhamento...
.alvejado 6 Postado 23 de Dezembro 2014 Compartilhar Postado 23 de Dezembro 2014 Obrigado, não sei css então tenho que pegar da net, vlw cara vou usar esse :festa:Feliz natal e Boas Festas:festa: ᅠᅠMural de Coleçõesᅠᅠ Clique aqui e adquira suas medalhas Link para o comentário Compartilhar em outros sites Mais opções de compartilhamento...
rnxn 2 Postado 26 de Dezembro 2014 Compartilhar Postado 26 de Dezembro 2014 Dá uma atualizada ai, faz tempo que não é necessário usar vendor prefixes. Vê ai: É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se O mesmo vale border-radius: É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se LOL :slow: ᅠᅠMural de Coleçõesᅠᅠ Clique aqui e adquira suas medalhas Link para o comentário Compartilhar em outros sites Mais opções de compartilhamento...
Velha Guarda Ex-Staffer Cr4cko 1.149 Postado 27 de Dezembro 2014 Autor Velha Guarda Ex-Staffer Compartilhar Postado 27 de Dezembro 2014 Dá uma atualizada ai, faz tempo que não é necessário usar vendor prefixes. Vê ai: É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se O mesmo vale border-radius: É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se LOL Obrigado @rnxn pela informação, eu não estava sabendo dessa.. Eu não utilizo muito isso, pois sempre desenvolvo utilizando google chrome como navegador padrão.. Mas não sabia dessa.. valeu! Abraços Quer aprender a programar Python? https://youtube.com/@ProgramadorPython ᅠᅠMural de Coleçõesᅠᅠ Clique aqui e adquira suas medalhas Link para o comentário Compartilhar em outros sites Mais opções de compartilhamento...
rnxn 2 Postado 28 de Dezembro 2014 Compartilhar Postado 28 de Dezembro 2014 Sem problemas, quando tiver uma dúvida sobre compatibilidade de uma propriedade veja no site É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se quais browsers a suportam. :slow: ᅠᅠMural de Coleçõesᅠᅠ Clique aqui e adquira suas medalhas Link para o comentário Compartilhar em outros sites Mais opções de compartilhamento...
Dotfile 0 Postado 5 de Janeiro 2015 Compartilhar Postado 5 de Janeiro 2015 Não gostei do tópico devido a falta da explicação da propriedade em si. ᅠᅠMural de Coleçõesᅠᅠ Clique aqui e adquira suas medalhas Link para o comentário Compartilhar em outros sites Mais opções de compartilhamento...
Velha Guarda Ex-Staffer Cr4cko 1.149 Postado 5 de Janeiro 2015 Autor Velha Guarda Ex-Staffer Compartilhar Postado 5 de Janeiro 2015 Adicionei uma rapida explicação. Mas já tinha uma explicação dentro das tags code. Só o exemplo já explica facilmente como funciona a propriedade Transition. É um elemento que pode mudar o efeito dos estilos, sem a necessidade de flash/javascript. Mas obrigado pela critica, vê se está bom a edição.. Abraços! Quer aprender a programar Python? https://youtube.com/@ProgramadorPython ᅠᅠMural de Coleçõesᅠᅠ Clique aqui e adquira suas medalhas Link para o comentário Compartilhar em outros sites Mais opções de compartilhamento...
Dotfile 0 Postado 5 de Janeiro 2015 Compartilhar Postado 5 de Janeiro 2015 Pensei em algo do tipo: transition-delay: Determina a partir de quanto tempo a transição irá iniciar que o padrão é 0. transition-duration: Duração do efeito em segundos que se não me engano por padrão é 0 também. transition-property: Nome da propriedade CSS a qual o efeito da transição vai ser aplicado (border, background, etc) transition-timing-function: Forma como se comporta o ritmo da transição que podem ser linear, ease, ease-in, ease-out e ease-in-out e tem um tipo de forma que você pode manipular (só procurar na internet). e por fim a: transition: Forma resumida que agrupa as outras 4 propriedades. É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se Exemplo: É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se OBS: A ordem não interfere no resultado. Você pode ler mais a respeito no seguinte link É necessário se cadastrar para acessar o conteúdo. Entre ou Cadastre-se ᅠᅠMural de Coleçõesᅠᅠ Clique aqui e adquira suas medalhas Link para o comentário Compartilhar em outros sites Mais opções de compartilhamento...
Velha Guarda Ex-Staffer Cr4cko 1.149 Postado 6 de Janeiro 2015 Autor Velha Guarda Ex-Staffer Compartilhar Postado 6 de Janeiro 2015 Dotfile, adicionei sua explicação mais completa ao topico. Obrigado pela ajuda, Abraços! Quer aprender a programar Python? https://youtube.com/@ProgramadorPython ᅠᅠMural de Coleçõesᅠᅠ Clique aqui e adquira suas medalhas Link para o comentário Compartilhar em outros sites Mais opções de compartilhamento...
Posts Recomendados