Pasos para poder usar SASS en nuestro proyecto nuxt. 1.) Instalamos la librerias node-sass y sass-loader: npm install –save-dev node-sass sass-loader Ahora ya podemos usar scss en nuestro proyecto. 2.a) Podemos agregar los estilos individualmente en nuestros layouts de vue […]

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: […]

Favicon en svg

Los favicon en svg ya son soportados por los principales navegadores web. Al ser vectorial tiene la ventaja de que no va a perder calidad independientemente del tamaño que utilice el navegador web. Para insertar un favicon svg en tu […]

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 […]

Simple código vanilla js para detectar si estamos scrolleando hacia arriba o hacia abajo usando el método addEventListener para detectar el scroll y getBoundingClientRect para conocer la posición. var scrollPos = 0; window.addEventListener('scroll', function(){ if ((document.body.getBoundingClientRect()).top > scrollPos) // ARRIBA […]

Si te molesta que aparezcan durante esas milésimas de segundo el nombre de las {{variables}} en tu html… existe el atributo v-cloak que puedes agregar a elemento/s que desees ocultar hasta que se carga Vue por completo, y ese instante […]

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 […]

Instalar Vuejs es muy sencillo. En comparación con la versión anterior de Vue CLI 3, el nombre del paquete ha cambiado de vue-cli a @vue/cli 1. Instalamos Vue CLI: npm install -g @vue/cli 2. Instalamos el plugin PWA: vue add […]

Si has tenido problemas al declarar variables SASS/SCSS dentro de la pseudo-clase :root de CSS, es posible que no las estés declarando correctamente en sass. Para usar variables SASS dentro de tu variables CSS y que se compilen correctamente debes […]