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: […]
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 […]
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. […]
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 […]
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 […]
La posición sticky es un nuevo valor de la propiedad position de CSS. Puede ser útil cuando queremos que un elemento tenga una posición fija cuando nos desplazamos hacia abajo en la página web «sin usar javascript», solo con CSS. […]
Un par de ejemplos diferentes para colorear con degradados los bordes de un elemento en css usando la función linear-gradient() que crea una imagen que representa un degradado lineal de colores. Ejemplo: Un cuadrado, un cuadrado con bordes derondeados y […]
Forma fácil de crear con CSS (más concretamente con la propiedad -webkit-text-stroke) un texto con un determinado grosor de trazo y color. Ántes para conseguir este efecto teníamos que tirar siempre de programas de retoque fotográfico y insertarlo como una […]
css-purge es una herramienta css que me encanta, esta escrita en Node JS y se encarga de reducir, acortar, comprimir, limpiar, recortar y formatear CSS duplicado, extra, excesivo… eliminando todo el código css que no sea necesario en el archivo […]
Si quieres aplicar estilos css a elementos que no tengan ninguna clase puedes usar el pseudoelemento :not([class]) para buscar elementos que no tengan el atributo class en este caso. Ejemplo: ul:not([class]){ padding-left: 30px; } Este estilo se aplica solo a […]