Desarrollo Web by esther solà

Recursos para desarrolladores web

Categorías:

[Front] Snippet del día

Me encanta ver las maravillas que hace la gente con un poco de código. A veces son detalles, de usabilidad, de diseño, o simplemente un toque especial, una pequeña animación, una transición... a veces son simples divertimentos, pero otras son recursos que nos pueden ayudar, dar ideas e inspirar

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

Google reCaptcha v3 y php opciones y problemas

Recientemente he tenido que configurar Google reCaptcha v3 en dos páginas web con PHP a medida, y aún siendo ambas muy parecidas, la solución que me ha funcionado ha sido algo diferente en cada una, seguramente debido a la configuración del servidor del hosting. Google reCaptcha se ha convertido

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