Archivado en:  Codepen

Post


Actualizado: 19 de octubre de 2017

Layouts con css grid

Diferentes layouts con Css grid

Link


Actualizado: 18 de octubre de 2017

Contenedor lateral al hacer click

He estado probando “layouts” para mostrar un contenedor lateral al hacer click en un botón. De momento el ganador es el que he os enlazo, aunque me preocupa un poco como funcionará con una web con contenido real, me preocupa el renderizado de la parte del contenido al desplazarse, en cuanto lo pruebe en producción lo comento.

Cosas que hay que tener en cuenta.

El responsive (por supuesto) y la posibilidad de que el contenido en el contenedor lateral sea mayor que la altura del viewport, cosa que he solventado con un overflow: auto;

Actualización: He mejorado rendimiento cambiando el desplazamiento del contenedor lateral, en vez de usar el posicionamiento left:-400px he usado transform: translateX(400px);

Link

Link

Toma de contacto, animaciones CSS al cargar una página.

No soy un gran fan de las animaciones web, quizás porque sufrí mucho con flash.
Ahora ya toca empezar a jugar con ellas, de momento voy a intentar cosas sencillas y solo para la carga de páginas, así que he hecho unas pequeñas pruebas en codepen.

Link

Link

Colores aleatorios con sass

He publicado un nuevo “pen” en Codepen, es una prueba para generar colores aleatorios al compilar scss. Basandome en el modo de color hsl, de esta forma puedo mantener la tonalidad entre diferentes colores.

Refresca o modifica el pen para obtener diferentes resultados.

Link