Ir al contenido principal

Entradas

Mostrando las entradas etiquetadas como webkit

Transiciones con CSS3

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados. En el post previo se comentó la manera de hacer Animaciones con CSS3 , en esta ocasión hablaremos de otra forma de generar cambios visuales: Transiciones con CSS3. A diferencia de las animaciones, las transiciones no utilizan "keyframes", sino mas bien son indicaciones de cómo queremos visualizar los cambios (tiempo, propiedades, "easing"), dichos cambios se pueden activas utilizando pseudoselectores CSS como "hover". En el cuadro siguiente se aplicó un efecto donde la anchura y el color cambia al ubicar el mouse sobre el. Pasa el mouse sobre mi Realicemos entonces los pasos para implementar las transiciones. 1.- Coloquemos el elemento al que queremos aplicarle las transiciones y le damos un ID: <body>      <div id="miDiv">      Este es mi DIV     ...

Animación con CSS3

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados. Bueno ya todos sabemos que entre HTML5 y CSS3 han generado en combinación grandes herramientas para hacer tareas que antes solamente con Flash o Javascript eran posibles. Una de estas en hacer una pequeña animación como la que se muestra a continuación (Internet Explorer y Opera no funcionan con estas características). Lo que tenemos arriba es solamente un objeto DIV al que con aplicarle ÚNICAMENTE estilos CSS3 hemos logrado este efecto. Vamos pues a crearlo. 1.- Crear el objeto: Solo es necesario crear dentro del body de nuestro HTML una etiqueta DIV: <body> <div></div> </body> Nota: en este ejemplo usamos un DIV, pero podemos utilizar el elemento que queramos, inclusive podemos usar clases (?) o id (?) para asignarle estas propiedades. 2.- Aplicare estilo: Crea...