Generador d'ombres CSS (box-shadow)

Com utilitzar el generador de box-shadow

1. Comença amb un predefinit o conserva l’ombra Suau per defecte. La fila Predefinits ofereix Suau, Dura, En capes, Elevació, Neumorfisme, Interior i Resplendor.
2. A Capes d’ombra, fes clic en una capa per seleccionar-la. Cada capa es pot moure amb Mou amunt i Mou avall, o suprimir amb Elimina. Afegeix una capa duplica la capa seleccionada perquè puguis retocar-ne una còpia.
3. Edita la capa seleccionada a Edita la capa seleccionada: arrossega el punt del quadre Desplaçament, o fes servir els lliscadors i els camps numèrics de Desplaçament horitzontal (px), Desplaçament vertical (px), Desenfocament (px) i Expansió (px).
4. Tria el Color de l’ombra amb el selector de color o escriu qualsevol color CSS al camp de codi, i després ajusta l’Opacitat (%). Marca Interior (ombra interna) per dibuixar l’ombra dins del requadre.
5. Ajusta els Paràmetres de la previsualització (Color del requadre, Color de fons, Radi de les vores (px)) per veure l’ombra sobre els teus colors reals. Només afecten la previsualització.
6. Copia la declaració de Codi CSS amb el botó Copia.

Teclat: posa el focus al punt del quadre Desplaçament i fes servir les tecles de fletxa per moure’l d‘1 px en 1 px, o de 10 en 10 px amb Maj.

Com funciona box-shadow

La sintaxi d’una ombra és box-shadow: [inset] x y desenfocament expansió color.

• x i y desplacen l’ombra cap a la dreta i cap avall. Els valors negatius la desplacen cap a l’esquerra i cap amunt. Una font de llum situada damunt de l’element implica una y positiva.
• El desenfocament suavitza la vora. No pot ser negatiu. Un desenfocament de 0 dóna una còpia amb vores dures del requadre.
• L’expansió fa créixer (positiva) o encongir (negativa) l’ombra abans de desenfocar-la. Una expansió negativa amb una y gran manté l’ombra sota l’element en lloc de al seu voltant.
• El color sol portar transparència. Aquesta eina escriu els colors opacs en HEX i els translúcids amb rgba(), que tots els navegadors entenen. Si escrius un color que ja té canal alfa, l’Opacitat (%) el multiplica.
• inset posa l’ombra dins de la vora, com si el requadre estigués enfonsat a la pàgina.

L’ombra segueix el border-radius de l’element i no canvia mai la maquetació: no ocupa espai ni provoca barres de desplaçament.

Per què apilar diverses ombres?

Les ombres reals no són un sol rectangle desenfocat. Una ombra petita, fosca i definida es troba just sota l’objecte, i una de gran, tènue i difusa s’escampa més lluny. Apilar de dues a cinc capes imita aquest efecte i queda molt més natural que una sola ombra pesada. El predefinit En capes duplica el desplaçament i el desenfocament a cada pas amb una opacitat baixa, una tècnica popularitzada per molts sistemes de disseny. Elevació imita les ombres de tres capes de Material Design.

La primera capa de la llista es pinta damunt de les altres, exactament com en el valor CSS. L’ordre importa sobretot quan es barregen ombres interiors i exteriors o es fan servir colors intensos.

Neumorfisme

El neumorfisme («soft UI») fa servir dues ombres en un element del mateix color que el seu fons: una de fosca desplaçada cap avall i cap a la dreta, i una de clara desplaçada cap amunt i cap a l’esquerra. El predefinit Neumorfisme fixa els dos colors a #e0e5ec. Tingues en compte que aquest estil té poc contrast, de manera que els botons construïts amb ell necessiten un estat de focus clar i etiquetes llegibles.