Css3 efecto transition

CSS3 nos da una propiedad muy interezante, podemos dar un efecto de transicion en nuestros estilos. En el siguiente post monstraremos un ejemplo muy sencillo de como utilizarlo. En nuestro ejemplo usaremos la propiedad transition-duration, tenemos que tener en cuenta que esta propiedad no es soportada por algunos navegadores. Navegadores que lo soportan: Safari, Chrome, Opera y la version de Firefox Beta 4. Teniendo en cuenta esto comenzaremos por mostrar nuestro código CSS3:

 En principio deben copiar y guardar la siguiente biblioteca Jquery: http://code.jquery.com/jquery-1.5.min.js lo guardan con la extensión .js para poder llamarlo de la siguiente forma en nuestro html:

#caja{ transition-duration: .5s; -o-transition-duration: .5s; -moz-transition-duration: .5s; -webkit-transition-duration: .5s; width: 400px; height: 200px; border: 8px solid #000; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; margin: 0 auto; background: #505050; color:#808080; font-size: 30px; font-weight:bold; font-family: Arial; text-shadow: 0px 1px 2px #000; } #caja:hover{ width: 550px; height: 250px; font-size: 40px; }
Nuestro código HTML:
<div id="caja"> <p> Css3 Efecto transition.<br/>Ejemplo por<br/><br/> <a href="http://lcscript.blogspot.com.es"> lcscript </a></p> </div>

Share on Google Plus

About fullsistem