quinta-feira, 2 de setembro de 2010

Css Transition e Links

Eu descobri a pouco tempo que o css sozinho é capas de criar algumas animações bem interessantes. Uma delas eu coloquei nos links das tags. Se você usa o IE nem deve ter notado, mas se usa o Safari ou Chrome deve ter achado o máximo, como eu =D. Se vc curtiu eu dou a barbada de como criar.

.cpojer-links a {
 display: inline-block;
 padding: 4px;
 outline: 0;
 color: #3a599d;
 -webkit-transition-duration: 0.25s;
 -moz-transition-duration: 0.25s;
 -o-transition-duration: 0.25s;
 transition-duration: 0.25s;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 -o-transition-property: -o-transform;
 transition-property: transform;
 -webkit-transform: scale(1) rotate(0);
 -moz-transform: scale(1) rotate(0);
 -o-transform: scale(1) rotate(0);
 transform: scale(1) rotate(0);
}
.cpojer-links a:hover {
 background: #3a599d;
 text-decoration: none;
 color: #fff;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 -o-border-radius: 4px;
 border-radius: 4px;
 -webkit-transform: scale(1.05) rotate(-1deg);
 -moz-transform: scale(1.05) rotate(-1deg);
 -o-transform: scale(1.05) rotate(-1deg);
 transform: scale(1.05) rotate(-1deg);
}
.cpojer-links a:nth-child(2n):hover {
        -webkit-transform: scale(1.05) rotate(1deg);
        -moz-transform: scale(1.05) rotate(1deg);
        -o-transform: scale(1.05) rotate(1deg);
        transform: scale(1.05) rotate(1deg);
}

Esse é todo o código que vc vai precisar. Talvez vc vai querer um container diferente pra tag <a>. Mas tenho certeza que vc consegue ajeitar o seu html e esse css sem problemas pra fechar com a sua necessidade.

Essa animação, infelizmente só roda hoje no chrome, safari e opera. O Firefox não roda as transições, mas o transform sozinho já da um efeito bem agradável. Nas novas versões beta do FF e IE (4 e 9 respectivamente) a transição já funciona. Então é implementar e esperar pelo futuro preparado =D.

[Christoph Pojer via David Walsh]

3 comentários:

Unknown disse...

Woori Casino No Deposit Bonus 2021 | Free Play in Demo
Woori Casino offers a variety of free spins and no deposit gri-go.com bonuses, as well as regular nba매니아 promotions. As https://septcasino.com/review/merit-casino/ you https://octcasino.com/ can't claim this offer without being novcasino registered

Anônimo disse...

Try video poker at no cost and study the fundamental of the sport. Choose from over 167 free games from main providers like NetEnt and Betsoft right right here. ITech Labs is a testing and certification lab for Online Gaming methods, specializing in compliance, software program high quality, reporting and delivery. Having testing completed by iTech Labs ensures that games and gaming methods comply with all related standards, 빅카지노 and that they are honest, dependable and resilient. Casino.org is the world’s main impartial on-line gaming authority, offering trusted on-line casino information, guides, critiques and data since 1995.

iq0mmx3t27 disse...

Following forms of injection molds are used to manufacture plastic components using the injection molding course of. Custom molded component manufacturers design and fabricate the mould specifically for the part they’ll produce. When the manufacturing run for a component is finished, specialists substitute the mould with a new new} mould for the following Manual Can Openers part they need to|they should} manufacture. However, the process you choose will rely upon totally different variables. These embody your preliminary design, the quantity of the components wanted, and the general use of the merchandise. Additionally, working with an injection molder that provides post- molding capabilities can help streamline your course of, create efficiencies, and cut back prices.

Postar um comentário