El atributo title de HTML nos permite añadir información adicional en un elemento, como imagen, enlace, etc... que se suele mostrar en forma de tooltip. El problema es que por defecto no siempre podemos controlar el aspecto de esta etiqueta, que dependerá del navegador que está utilizando el
Enlaces largos y word-wrap
Cuando desarrollamos una web que muestra contenido generado por el cliente, ya sea un CMS propio, WordPress o cualquier tipo de plataforma en la que el usuario puede crear y publicar contenido propio, nos encontramos a veces con un problema en dispositivos de pantalla pequeña cuando añaden palabras
Entender nth-child con ejemplos prácticos
Existen muchos selectores y pseudo-clases de CSS que nos pueden ser muy útiles a la hora de preprar una maquetación web y ajustar los estilos para adaptarnos a un diseño concreto. La pseudoclase :nth-child(an+b) de CSS es una de ellas, y nos permite seleccionar varios elementos hijos de la clase
Usar iconos de Font Awesome como placeholder en un formulario
Si estás preparando un formulario para web, un detalle interesante es poder añadir un icono junto al texto que aparece por defecto en cada campo, el llamado placeholder. Para poder hacerlo, debemos seguir los siguientes pasos: 1- Carga los estilos de Font Awesome: hay varias formas de
Añadir sombra a una imagen con transparencia en CSS
Hay detalles en los que no caemos hasta que los necesitamos o no nos preguntan directamente sobre ello. Este es el caso de darle sombra a una imagen de formato png con fondo transparente. Si tenemos un logotipo por ejemplo y queremos darle sombra con CSS, si por costumbre usamos el atributo
Aprovechando el selector :lang de CSS
En CSS tenemos muchas opciones que sabemos que existen pero a menudo no utilizamos o no se nos ocurre cuando podríamos utilizarlas. Recientemente me ha pasado con el selector :lang de CSS. :lang permite aplicar estilos distintos a un elemento mediante CSS según el idioma en el que se muestre
Efecto máquina de escribir con CSS
Cuando rediseñé esta web para centrarla en los servicios de formación a desarrolladores web, quise poner en el tagline de la página de inicio un subtítulo con el llamado efecto máquina de escribir (typewriter effect). Como iba con prisas y no quería o podía perder tiempo en según que detalles,
Prioridad y especificidad de CSS en WordPress
Cuando trabajamos con estilos de CSS para crear un diseño o modificar uno existente, tenemos que ser conscientes de dos temas muy importantes que nos van a condicionar: las prioridades y la especificidad de los estilos. En este artículo vamos a ver estos dos conceptos en general y que ocurre en
Uso práctico para el selector :not de CSS
Existen muchos selectores o pseudo-clases de CSS que aunque sabemos que existen no acostumbramos a utilizarlos a menudo, en mi caso, :not es uno de ellos. Básicamente, :not() es una pseudo-clase que sirve para añadir excepciones en nuestras hojas de estilo CSS. Por ejemplo, si queremos que
