Funcionament de la propietat CSS box-shadow
La propietat box-shadow de CSS permet aplicar una o més ombres a l'estructura d'un element de disseny web. Aquesta propietat és fonamental per aportar tridimensionalitat, definir la jerarquia visual i millorar la percepció de profunditat en una interfície d'usuari.
L'estructura bàsica d'una declaració de box-shadow conté diversos valors numèrics i de color que defineixen el comportament físic de la llum simulada. El Generador de Box Shadow permet manipular cadascun d'aquests paràmetres de forma visual i en temps real, traduint les accions directament en codi CSS compatible amb els navegadors web.
Paràmetres de configuració de l'ombra
Per dissenyar una ombra de caixa, s'han d'ajustar diferents propietats mitjançant els controls de l'eina:
- Desplaçament horitzontal: Aquest lliscador desplaça l'ombra cap a l'esquerra o cap a la dreta. El rang de valors permesos oscil·la entre -50px i 50px. Els valors positius mouen l'ombra cap a la dreta, mentre que els negatius la desplacen cap a l'esquerra.
- Desplaçament vertical: Aquest control mou l'ombra cap amunt o cap avall, amb un rang que va des de -50px fins a 50px. Els valors positius desplacen l'ombra cap avall i els negatius la desplacen cap amunt.
- Difuminat: Controla la dispersió i la suavitat de les vores de l'ombra. El rang d'ajust va de 0px (vora completament nítida) fins a 100px (vora altament difuminada).
- Extensió: Defineix el creixement o la reducció de la mida de l'ombra abans que s'apliqui l'efecte de difuminat. El rang d'aquest lliscador se situa entre -50px i 50px. Un valor positiu expandeix l'ombra cap enfora, mentre que un valor negatiu la retreu cap a l'interior de l'element.
- Color de l'ombra: Un selector de color que permet definir el to cromàtic de la projecció.
- Opacitat: Regula el nivell de transparència de l'ombra per suavitzar la seva intensitat sobre el fons.
- Ombra interior (inset): Un selector de tipus commutador que inverteix la direcció de l'ombra, fent que es projecti cap a l'interior de l'element en lloc de cap a l'exterior.
Comportament de les capes i generació de codi
El disseny d'ombres complexes sovint requereix la superposició de diferents nivells de dispersió. L'aplicació pre-renderitza cinc capes de manera predeterminada. La primera capa s'inicialitza amb els valors de desplaçament i difuminat 0 8 24 -4 i un color negre amb un 18% d'opacitat, mentre que les altres quatre capes romanen ocultes fins que l'usuari decideix activar-les o modificar-les.
Quan es treballa amb múltiples capes, es poden utilitzar les funcions següents:
- Afegir capa: Crea una nova capa d'ombra que s'inicia amb els valors de configuració per defecte.
- Eliminar capa: Suprimeix la capa d'ombra seleccionada actualment.
Quan s'acumulen diverses capes actives, el generador compila automàticament el codi CSS separant els valors de cada capa mitjançant comes. Això permet que el navegador renderitzi les ombres de manera apilada, respectant l'ordre de definició per aconseguir un efecte de profunditat realista.
Aplicacions pràctiques en el disseny d'interfícies
L'ús de diferents configuracions de box-shadow permet resoldre diverses necessitats de disseny en pàgines web i aplicacions:
Ombres subtils i ajustades
Per a elements petits o que han d'aparèixer molt a prop de la superfície del fons, s'utilitzen valors de desplaçament i difuminat baixos. Una extensió negativa ajuda a contraure l'ombra, evitant que es vegi bruta o massa dispersa a les cantonades de l'element.
Ombres amples i suaus
Per simular que un element està molt elevat (com ara un diàleg emergent o un menú desplegable), s'apliquen valors de difuminat elevats combinats amb una opacitat baixa. Això imita el comportament de la llum natural quan la font de llum està distant.
Efecte de botó o camp premut
Mitjançant l'activació de l'opció d'ombra interior (inset), l'ombra es projecta cap a dins de l'element. Aquesta tècnica visual és ideal per dissenyar camps d'entrada de text (inputs) o per simular l'estat actiu i premut d'un botó, donant la sensació que l'element s'ha enfonsat respecte a la superfície de la interfície.
Processament de dades i privacitat
El funcionament d'aquest generador es realitza de manera local. Cada ombra es renderitza al seu navegador. Cap dada que defineixi aquí es puja a BroBroGo, garantint que els paràmetres de disseny i les proves es processin exclusivament en el dispositiu de l'usuari.
Preguntes freqüents
Què controlen exactament el desplaçament, el difuminat i l'extensió?
El desplaçament mou l'ombra cap a l'esquerra/dreta i cap amunt/avall, el difuminat en suavitza les vores, i l'extensió la fa créixer o disminuir abans de difuminar-la. Una extensió negativa retreu l'ombra, cosa que és útil per a ombres molt ajustades.
Què fa l'opció d'ombra interior (inset)?
Una ombra normal cau fora de l'element, com la llum darrere d'una targeta elevada. L'opció Inset la inverteix cap a l'interior, de manera que l'element sembla enfonsat; és molt útil per a camps de text o botons premuts.
Per què s'haurien d'acumular diverses capes d'ombra?
Una sola ombra pot semblar plana a partir d'una certa mida. L'elevació real sol combinar una ombra fosca i ajustada amb una altra de més suau i ampla. Afegiu una segona capa i ajusteu-les de manera independent per aconseguir aquest efecte.