Para cargar los estilos light/dark automaticamwnte en función de la congifuración que tenga el usuario en su sistema operativo podemos hacer uso de la propiedad media prefers-color-scheme: A. Por medio de link en el head del documento cargando los archivos […]
Ahora es muy sencillo conseguir ese diseño de botón o elemento con un borde redondeado externo separado x pixeles. Usando la propiedad outline-offset podemos establecer un espacio entre un contorno outline y el límite del elemento. Antes para conseguir este […]
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 […]
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; }
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]