CSS

Cuando necesites que ciertos elementos no respondan (hover, click…) a eventos del ratón (o táctil)… tenemos la propiedad css pointer-events con su valor «none» para poder desabilitarlo y hacer ese elemento como «invisible al cursor». pointer-events: none; Para verlo en […]

Leer más...

Si usas la propiedad columns de css para dividir el contenido en «x» columnas y tienes el problema de que se corta el contenido de alguna columna por arriba/abajo puedes usar la propiedad break-inside del siguiente modo en cada elemento […]

Leer más...

Actualmente es muy sencillo usando solo CSS poder cambiar el «grosor» o «color» de la barra de desplazamiento o scroll del navegador web: a). Para cambiar el ancho usamos el pseudo-elemento -webkit-scrollbar. Ejemplo: .mi-elemento::-webkit-scrollbar{ width: 5px; } b). Para cambiar […]

Leer más...

En css a los textos aparte de asignarles un color, podemos también aplicarles un fondo de una imagen a modo de máscara consiguiendo efecto de la imagen dentro del relleno del texto. Usamos las propiedades background-clip y text-fill-color como en […]

Leer más...

CSS: crop en imagenes

Diferentes ejemplos para redimensionar imagenes usando solo CSS. La propiedad object-fit se encarga de cambiar el tamaño del contenido de un elemento para que se ajuste a su contenedor. La propiedad tiene 5 valores diferentes: contain – se redimensiona manteniendo […]

Leer más...

Dos ejemplos diferentes de como crear un grid con cuadrados iguales usando CSS Grid Layout. Para los 2 ewjemplos vamos a usar la misma base de grid de 10 columnas: .grid { display: grid; grid-template-columns: repeat(10, 1fr); grid-gap: 10px; padding: […]

Leer más...

Como conseguir un efecto parallax SOLO CON CSS (sin usar javascript). Me encanta este método para ese tipo de páginas donde tienen un header con un fondo y queremos que tengan algún tipo de pequeño movimiento parallax al hacer scroll […]

Leer más...

Para conseguir el efecto de aclarar o oscurecer elementos en CSS existe el filtro brightness() que ajusta el brillo de la imagen. 0% hará que la imagen sea completamente negra. 100% es el valor predeterminado y representa la imagen original. […]

Leer más...

Un ejemplo de como insertar un determinado texto dentro de un circulo sin que sobresalga de este usando solo CSS. Usando la propiedad shape-outside puedes crear los 2 polígonos para crear la máscara fácilmente usando las developer tools de firefox […]

Leer más...

3 formas diferentes para conseguir el efecto de texto subrayado. La forma clásica usando la propiedad «text-decoration: underline«, en donde el grosor de la línea de subrayado va acorde al tamaño y grosor de la fuente. Si queremos poder cambiar […]

Leer más...