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 +

4 formas de hacer columnas en CSS

Cuando hablamos de columnas en ámbito web hay muchas opiniones al respecto, casi tantas como opciones. En este post pretendo presentar las diferentes formas de ejecutar estos esquemas.
Seguir leyendo +

Selectores CSS que detectan errores

Actualmente el mundo de los selectores CSS ha avanzado mucho (a veces más que los propios navegadores) pero con los que sí son compatibles se pueden hacer muchas cosas. Una de ellas es identificar malos funcionamientos o malas prácticas de HTML.
Seguir leyendo +

Cómo subrayar bien una texto

Cuando queremos subrayar un texto usamos la mayor parte de veces el clásico text-decoration: undeline;, pero a veces se nos queda un poco pobre el estilo. Una línea fina, muy pegada al texto y del mismo color del texto. También podemos usar border-bottom con un ...
Seguir leyendo +

Todo sobre la perspectiva

Hace ya algún tiempo que sigo a este desarrollador youtuber, que la verdad es que me gusta mucho como explica. Os dejo este vídeo que nos enseña lo que hay que saber sobre la perspectiva.
Seguir leyendo +

Alinear dos cajas una al lado de la otra

Normalmente cuando tenía que alinear dos cajas horizontalmente hacía lo que todos: display inline-bock y con widths de un 47%… Pero existe una manera mejor para tener resultados mucho mejores.
Seguir leyendo +

Poner imágenes de Background

A menudo hace falta una renovación de la información de las propiedades más básicas. En este caso hablamos de background y sus múltiples propiedades desglosadas.
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 +

Con display: flex viviremos mejor

Siempre “hemos tenido muchos problemas” con alinear los elementos, y lo digo entre comillas porque no muchos pero si a nivel de compatibilidad y acabados. Display inline-block con hace unos espacios entre elementos de unos pixeles, el float a veces no nos obedece para centrar ...
Seguir leyendo +

Desmientiedo hacks heredados de CSS. ¡Escribe menos, programa más!

Los que llevamos muchos años maquetando y programando en general a menudo heredamos hacks que implementamos en nuestras rutinas diarias y que a veces los navegadores al evolucionar ya soportan y nosotros no nos damos cuenta. Aquí actualizamos nuestro código para escribir menos pero mejor. display: ...
Seguir leyendo +

Crear sprites con terminal

Cuando hacemos animaciones complejas tenemos que usar sprites. Para hacer estos sprites tenemos dos opciones: Hacerlo con Photoshop (el trabajo padre) o usar After Effects. Cuando usamos AE al exportar los frames vienen separados por archivos sueltos y tenemos que unirlos. Photoshop lo malo que ...
Seguir leyendo +

Utilizar correctamente @font-face

Importar fuentes está a la orden del día. Quién más quién menos suele importar fuentes bonitas, originales, atrevidas o poco comunes para sus mejores webs (si queréis algunas gratis os dejo mi blog de tipografías gratis). Pero la mayoría de las veces o no importamos ...
Seguir leyendo +

Iconos transformistas

Cuando tenemos una hamburguesa muchas veces tenemos que esconderla para mostrar una cruz de cerrar o un flecha de volver. Hoy en día eso es poco elegante y obliga a usar diferentes elementos de maquetación cosa que es engorroso e implica usar javascript en exceso. ...
Seguir leyendo +

Botones con el borde animado

Siempre estoy buscando efectos nuevos, inspiraciones e innovaciones que ensalcen la navegación y la experiencia del usuario. Viendo un blog, me inspiró para crear un “plugin” (lo pongo entre comillas por la modestia que conlleva usar esta categoría para lo que os voy a presentar) ...
Seguir leyendo +

Modos de fusión en CSS

La mayoría de veces que diseñamos lo hacemos sin tener en cuenta las posibilidades a la hora de implementar en web nuestros diseños. Yo, al menos, puedo preveer cuales van a ser los posibles problemas a la hora de maquetar. Hasta el momento una técnica ...
Seguir leyendo +

SVG is for Everybody

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

Jonathan Snook “CSS is a Mess”

Muy iteresantes la conferencia de Jonathan Snook en beyond tellerrand Düsseldorf 2014. Nos cuenta de una forma divertida cómo se edebe escribir CSS con ejemples reales de DOs y DON’Ts.
Seguir leyendo +

Las posibilidades de las fuentes OpenType en web

Últimamente se está avanzando mucho en el desarrollo de las posibilidades de customización de las fuentes OpenType importadas en las webs.
Seguir leyendo +