Archivo de la etiqueta: CSS3

Animaciones con CSS3

Las animaciones realizadas con CSS3 lentamente se abren paso en remplazo de Javascript, cierto es que con ellas no podemos lograr animaciones demasiado complejas, ni tampoco podemos esperar que funcionen en navegadores obsoletos como Internet Explorer, incluso no estoy seguro de que funcionen correctamente en la versión 10, que pocos tienen a la hora de escribir esta publicación.

Para implementar una animación con CSS3 tenemos que usar las funciones CSS3 animation y @keyframes. La sintaxis de las mismas no tiene muchas complicaciones, en el caso de animation se trata de la llamada corta, pudiendo, usando las llamadas individuales, definir todos los parámetros de la animación por separado; personalmente prefiero ésta versión por que ocupa mucho menos código. Veamos un ejemplo súper sencillo, un CD que cuando le pasamos el mouse por arriba gira utilizando la función CSS3 transform : rotate.

cd

Sigue leyendo Animaciones con CSS3

Lista de Propiedades CSS3

El CSS3 es cada vez más soportado por los nuevos navegadores, y naturalmente su uso se hace cada vez más común. Hace algunas semanas publique dos entradas con un total de diez propiedades CSS3 comúnmente usadas (Parte 1 y Parte 2) donde se explica la sintaxis y los efectos que producen. Hoy le paso el trabajo a otro sitio que tiene una lista muy completa con las propiedades CSS3 comunes y experimentales.

Sigue leyendo Lista de Propiedades CSS3

Introducción a CSS y CSS Avanzado – Dos Libros Gratuitos

Por suerte hay gente que crea libros técnicos de muy buena calidad y decide darlos a la comunidad, en este caso se trata de dos libros que ahondan en las técnicas de diseño CSS. El creador de los libros, que tienen 223 y 151 páginas, es Javier Eguíluz Pérez y se encuentran para la descarga en formato PDF totalmente gratis.

Sigue leyendo Introducción a CSS y CSS Avanzado – Dos Libros Gratuitos

Diez atributos CSS3 imprescindibles (Segunda parte 10/10)

6 – Media Queries

Las Media Queries nos permiten “ejecutar” cierto código CSS cuando se cumple una o más condiciones. Y por “ejecutar” me refiero a que el código contenido en esta Media Querie se superpondrá al resto de los valores ya definidos para los elementos que estemos modificando con la misma. Suena un poco confuso pero es bastante sencillo, especialmente si vemos el código:

1
2
3
4
5
6
7
8
9
10
11
.caja{
      width:200px;
      height:100px;
 }
 
 @media only screen and (max-width:768px) and (min-width:480px){
     .caja{
           width:100px;
           height:50px;
     }
 }
.caja{
      width:200px;
      height:100px;
 }

 @media only screen and (max-width:768px) and (min-width:480px){
     .caja{
           width:100px;
           height:50px;
     }
 }

Sigue leyendo Diez atributos CSS3 imprescindibles (Segunda parte 10/10)

Diez atributos CSS3 imprescindibles (Primera parte 5/10)

El CSS3 es la nueva versión del lenguaje de estilos para sitios web, aunque debería ser el estándar nos encontramos muchas veces con que debemos utilizar prefijos para hacer funcionar las ultimas adiciones al lenguaje. Hoy trigo diez atributos CSS que son de mucha utilidad al hacer un sitio web moderno.

1 – Border-radius:

El atributo border-radius nos permite añadir bordes redondeados a nuestra Div, así como a otros elementos HTML (ej: inputs). La sintaxis del atributo es la siguiente:

1
2
3
4
.caja{
     border:2px solid;
     border-radius:25px;
}
.caja{
     border:2px solid;
     border-radius:25px;
}

Donde el valor da la curvatura a todos los bordes, cuanto más grande el valor mayor es la curvatura. En el caso que queramos definir la curvatura de cada uno de los bordes lo podemos hacer de la siguiente manera:

Sigue leyendo Diez atributos CSS3 imprescindibles (Primera parte 5/10)