Efecto de movimiento sencillo con CSS3: La propiedad transition

Con la adopción de la mayoría de navegadores de los atributos propios de CSS3 se abren puertas para hacer más rápido los efectos :hover. Si hasta no hace mucho lo normal era utilizar sprites para simular cambios de color o movimiento ahora es más rápido (y más ligero) hacerlo mediante transition.

Si quiero que un efecto :hover haga una transición suave marco primero las propiedades que van a cambiar al pasar el ratón por encima (con margin, padding, etc.) o cambio de color (con background-color, por ejemplo) o por qué no, ambas.

a:hover {margin-top:3px; background-color:red;}

Luego añado la propiedad transition para todos los navegadores disponibles:

a:hover {
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
  • Donde all marca todo el elemento pero podría cambiar modificando sólo el ancho (width), el alto (height), el color (color), etc.
  • 300ms es la duración en milisegundos, podríamos utilizar 1s para un segundo, 2s, etc.
  • ease-in-out es el efecto easing y podría sustituirse ease-in o cualquier otro elemento de esta propiedad.

Podéis pegarle un vistazo a todas los efectos disponibles con una demo y su explicación en easings.net y obtener un listado de todas sus propiedades y compatibilidad en el enlace de la w3schools.

Easings.net Transitions en CSS3

 

Cómo hacer un condicional CSS para Retina Display

A veces, por comodidad, usamos imágenes de fondo con la propiedad background en CSS pero un día entras a una web hecha por ti desde un iphone, ipad o trasto que con pantalla retina display y te encuentras con una imagen absurdamente pequeña o distorsionada…

La manera de arreglarlo es con la propiedad background-size de CSS3 y un par de condicionales que afecten sólo a los dispositivos con retina:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi) {
.menu { background-size: 127px 55px; background: url(images/menu@2x.jpg) no-repeat center center;}
}

Normalmente se crea una imagen al doble de tamaño de la original (menu@2x.jpg) y se establece en la propiedad background-size el tamaño exacto de esa imagen (ancho alto).

Más info al respecto:

Background Size CSS3