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 […]
Función php para convertir automáticamente el código iso de un pais a su nombre real y en el idioma que le pases como parámetro… sin necesidad de tener los datos de los paises en alguna array o bd: function nombre_pais($iso, […]
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: […]
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 […]