Gracias a esta herramienta podremos enmascarar imágenes en formas geométricas de todo tipo o -incluso- hacerlas personalizadas nosotros mismos. ¡Y todo con CSS (clip-path)!

En diseño web, lo importante se encuentra en los detalles. Los elementos con sombras en las interfaces web son una constante y es por eso que os traigo un generador muy especial: https://brumm.af/shadows

Permite generar varias capas de sombras, añadir transparencias por rango, difuminado, etc. bastantes opciones para crear una sombra única y diferente a todo lo que puedas encontrar por Internet.

¡Los gradientes están de moda! y, en muchas ocasiones, nos resulta complicado escoger los más adecuados para crear una transición agradable y atractiva. Con esta utilidad se acabaron los problemas: selecciona un color y generará un degradado perfecto. Si -además- quieres aplicarlo en tu web, puedes obtener el código CSS con un solo clic.

A diferencia del código Javascript, que tiene atributos que permiten cargarlo de forma asíncrona, en CSS no existía nada parecido hasta la fecha. Ahora, con un pequeño truco, vamos a solventar este inconveniente. Para cargar CSS, de manera asíncrona y sin demorar el render de la página, utilizaremos el atributo onload. Aquí os dejo cómo tendríais que enlazar el archivo CSS:

<link rel="stylesheet" href="/mi_css.css" media="print" onload="this.media='all'">

Recordar todo el código relativo a las estructuras Grid en CSS puede ser un poco tedioso: contenedores, justificar, jerarquías… pero en esta web: grid.malven.co, tenemos la posibilidad de acceder rápida y fácilmente a todos ellos, con ejemplos ilustrativos.

Google acaba de anunciar reCaptcha v3. Respaldado por el ya tan de moda Machine Learning, nos prometen un sistema de validación transparente para el usuario. Si alguien se anima a probarlo, estaré encantado de leer su análisis y experiencia con el mismo.

Manual de integración

Últimamente estoy maquetando y he descubierto el sistema Grid de CSS. Me ha parecido tan maravilloso que me he sentido obligadísimo a compartirlo con vosotros. Os comentaría alguna de sus ventajas, fundamentos y peculiaridades, pero -la verdad- el manual que os disponéis a leer lo resume y explica todo con tal claridad que me lo reservo para que lo descubráis por vosotros mismos.

Si queréis maquetar como «Dios» manda, podéis empezar por aquí:

• Manual online Grid – Maquetación CSS

Cada vez utilizamos menos Javascript para hacer animaciones. CSS está conquistando, en este aspecto, más y más terreno. Las ventajas son evidentes: implica menos peso de descarga y mayor velocidad. Para aquellos que todavía no estéis familiarizados con las animaciones en CSS, no hay nada mejor que ver ejemplos prácticos de uso. En la siguiente página, disponéis de un extenso catálogo de casos: escalar, rotar, flips, slides, etc. y todos acompañados por su respectivo código CSS.

• Visitar Animista: Ejemplos de animación en CSS

Si hay un código que, más de una vez, me haya dado quebraderos de cabeza, ese ha sido el responsable de copiar textos al portapapeles desde la web. Para que no paséis por el mismo mal trago, os traigo Clipboard.JS, un archivo de 3kb y muy fácil de implementar.

• Descargar ClipBoard.js

¡Muchos habréis visto ya este efecto tan de moda! Se trata de ir desplegando (mediante animación o transición) elementos en el cuerpo de la Web mientras vamos haciendo scroll. Si queréis programar algo parecido, aquí os dejo Scroll Reveal. Un código, en Java Script, que os facilitará la tarea.