Emular el background-size con imágenes en línea para mejorar el SEO

Nos hemos acostumbrado a utilizar imágenes de fondo pero Google no nos ayuda a indexar con este tipo de prácticas. Aquí propongo una solución para emular el resultado de poner una imagen en background-size: cover;
Seguir leyendo +

Cómo subrayar un texto con color de fondo

En este bloc por ejemplo se usa un efecto en los títulos de la home que es que a los textos darles un efecto de subrayado. Pues ahora veremos cómo hacerlo para que quede perfecto con sus paddings laterales y todo.
Seguir leyendo +

Condicionales de navegadores

Cuando acabamos a de hacer una web, generalmente se hace con un sólo navegador (yo recomiendo Chrome), toca testear las web en los diferentes navegadores (infierno). Internet Explorer es el que suele dar más problemas pero Firefox tampoco se queda corto la verdad. Suponiendo que ...
Seguir leyendo +

SVG is for Everybody

Una conferencia muy interesante impartida por Chris Coyier, cocreador de codepen y autor de css-tricks.
Seguir leyendo +

42 maneras de seleccionar un elemento

A menudo nos encontramos con maquetaciones que no podemos modificar, para estos casos van muy bien los pseudoselectores. A continuación os presento 42 maneras de seleccionar un elemento
Seguir leyendo +

Cómo añadir un borde al body por encima del contenido

A menudo he hecho diseños que incluían un borde fijo en el body. La verdad es que este tipo de bordes quedan bien si van por encima del contenido pero si hacemos un div sin color de fondo pero con borde y lo ponemos encima ...
Seguir leyendo +

Metatags necesarios para facebook

Hoy en día si tu site no se comparte bien en facebook, twitter y demás redes sociales puedes perder muchas visitas. A continuación tenéis los metatags correspondientes para poner dentro del head para que facebook coja la imagen que queráis vosotros así cómo el resto ...
Seguir leyendo +

Quitar los espacios entre medio elementos con display:inline-block

A menudo hay “cosas” en maquetación web que son inexplicables. Este caso es una de ellas. Cuando tenemos una serie de divs (o li o cualquier elemento que queramos) y lo mostramos en inline-block a menudo nos ponen entre los elementos un margen absurdo que tenemos ...
Seguir leyendo +

Checkbox y Radio Buttons customizados

Muchas veces nos encontramos con que podemos aplicar estilos a campos de texto y cajas de texto, también a botones pero no a checkbox y radio buttons. Pues bien hay una manera (aunque tiene sus inconvenientes). Para ello debemos montar una estructura HTML similar a ésta ...
Seguir leyendo +

¿Cuanto sabes de HTML5?

El otro día encontré este divertido juego de adivinar tags de HTML5. Se trata de adivinar el mayor número de tags aceptados por este estándar. ¿Te atreves? The HTML5 Quiz
Seguir leyendo +

¿No te acuerdas de todos los tags de HTML5?

Par todos aquellos que os falla a veces la memoria y para todos aquellos que creemos que un desarrollador programa de concepto y luego ya pensará en qué idioma decirlo, os dejo estos sheets:
Seguir leyendo +

5 webs inspiradoras de HTML

Crafty 2010 Se trata de una web muy visual que domina a la perfección las transiciones entre apartados y que demuestra sin tapujos que está basada en un grid (un sistema de guías y cajas) muy evidente.crafty2010.com
Seguir leyendo +

Etiqueta Canonical

Los tres principales buscadores, Google, Yahoo y Microsoft siguen preocupados con el problema del contenido duplicado, y acaban de proponer una nueva etiqueta llamada “Canonical” para indicar cuál es el contenido principal y cuáles las URLs secundarias. Hasta ahora, resolvíamos el tema de la “canonicalización de ...
Seguir leyendo +