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

Agregar fuentes de google fonts o cualquier otra etiqueta <link /> dentro del <head> de nuestro documento html es muy sencillo. Abrimos nuestro archivo de configuración nuxt.config.js y insertamos la fuente/s de la siguiente forma dentro del array link: link: […]

Para detectar y obtener la posición del scroll vertical («y») en pixeles en vanilla js es muy sencillo. Básicamente necesitamos usar el evento onscroll para detectar el movimiento del scroll y scrollY para obtener el valor en pixeles del desplazamiento […]

Para obtener el ancho o alto de la «ventana» actual en javascript, basta con usar el objeto window con la propiedad innerWidth para el ancho, y innerHeight para el alto: var ancho = window.innerWidth; var alto = window.innerHeight;

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