CSS

Podemos usar la regla @media con pointer: coarse de css para detectar dispositivos con pantallas táctiles como pueden ser tablets o smartphones y en ese caso aplicar los estilos que necesitemos dentro. Un ejemplo: @media (pointer: coarse) { /* tus […]

Leer más...

Ejemplo CSS si quieres usar varias veces la pseudoclase :not() para un único selector que tiene diferentes atributos. input:not([type="radio"]):not([type="checkbox"]){ background: red; } div:not(.inner):not(.wrapper){ background: blue; }

Leer más...

CSS: efecto Marquee

Un ejemplo para conseguir un bonito efecto marquee usando solo CSS. Básicamente lo conseguimos repitiendo un par de veces el texto en el html, y usando una animación infinita CSS con translateX para mover el contenedor horizontalmente de inicio a […]

Leer más...

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...