CATEGORÍA : Artículos

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 excepciones en CSS para IE u otros navegadores

Normalmente  cuando tenemos una web terminada llega el momento fatídico de comprobarla en todos los navegadores posibles, solemos tenerle miedo a los móviles pero el tema del responsive es juego de niños comparado con la pesadilla de hacer tu web retrocompatible con navegadores más antiguos.

Una de las formas es utilizar los condicionales dentro del head para la etiqueta <html>, como por ejemplo:

<!--[if lt IE 7 ]> <html xmlns="http://www.w3.org/1999/xhtml" lang="es-ES" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html xmlns="http://www.w3.org/1999/xhtml" lang="es-ES" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html xmlns="http://www.w3.org/1999/xhtml" lang="es-ES" class="ie8"> <![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml" lang="es_ES">

La sintaxis para esclarecer qué condicional utilizar según el navegador (if IE 7, por ejemplo) la podéis encontrar en librosweb.

De esta manera, en vuestra hoja de estilos podéis crear excepciones particulares ya que la etiqueta <html> tendrá una clase única según el navegador, en el CSS la excepción sería algo tal que así:

html.ie6  .contenedor {background:red;}
html.ie7 .contenedor {background:green;}

Aunque la mejor manera, si tenemos que modificar muchos estilos, es utilizar esos condicionales para tener distintos CSS según el navegador, algo así:

<link href="css/estilos.css" rel="stylesheet" media="screen" type="text/css" />

<!--[if IE 8 ]>
<link rel="stylesheet" href="css/estilos-ie8.css" type="text/css" media="screen" />
<![endif]-->

Al estar debajo de los estilos generales sobreescribirán (en condiciones normales, es decir, si no hay !important o estilos en línea) los estilos definidos en el CSS previo.

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

Añade un script al footer de wordpress

Uno de los factores que cada vez cobran más importancia en SEO es la velocidad de carga, y uno de los elementos que pueden hacer más o menos rápida tu página es dónde colocas los scripts, por suerte, en el caso de wordpress puedes encolar algunos scripts a través del archivo functions.php

function javascripts_palfondo(){
(código javascript)
}
add_action('wp_footer', 'javascripts_palfondo');

Si lo que quieres es meter un script que ya maneja wordpress:

function javascripts_palfondo() {
wp_enqueue_script ('nombre-script', get_stylesheet_directory_uri() . '/js/nombre-script.js', array( 'jquery' ), '', true );
}
add_action('wp_enqueue_scripts', 'javascripts_palfondo');

Y si todo esto es un engorro siempre puedes recurrir a plugins como
BWP Minify

Tormus, el comprobador de DIVS

Hay veces que tenemos una estructura de divs dentro de divs que están dentro de unos divs incluidos en un tab dentro de otro tab para trabajar con pestañas y toggles, si no comentamos bien o trabajamos con el código de otro desarrollador encontrar el fallo en una maqueta puede ser para volverse loco, para ello tenemos esta herramienta online que te permite ver dónde cierra exactamente cada div y así encontrar dónde está cerrando mal el html.

Herramienta para comprobar DIVS