Dimensione shadow casella CSS3 - unità percentuali?

Question

Sto lavorando a un progetto che deve utilizzare la proprietà box-shadow CSS3. Va bene, ma ho scoperto che la dimensione di diffusione dell'ombra non può essere impostata su percentuale dell'oggetto padre.

Capisco perfettamente che box-shadow non è additivo, quindi non prende la dimensione del genitore come riferimento.

Ma dato che ho bisogno di avere un sito completamente reattivo con oggetti che si adattano fluidamente (non solo sui punti di interruzione), questo pone un problema: posso impostare la proprietà di diffusione dell'ombra solo in unità assolute (em o px).

C'è qualche soluzione a questo? Ho pensato di usare il contenitore interno (per il contenuto) all'interno del contenitore (per "ombra" - è senza sfocatura), ma questo crea un altro problema: il centraggio verticale del contenitore interno.

Qualsiasi soluzione? No jQuery per favore, solo puro CSS.

Grazie

Answer 1

Hai provato a usare l'unità di rem (radice unitaria em)? Credo che tu possa usare questo per farlo scalare in modo fluido.

L'unità rem è sempre relativa all'elemento html root, quindi verrà ridimensionata di conseguenza e non dovrete preoccuparvi di contenitori interni o cose del genere. Ha anche un supporto browser piuttosto ampio a questo punto.

Lo uso sui miei progetti per renderli più reattivi, ma sempre seguendo un parametro già definito da px o em in modo che non funzioni correttamente per ogni evenienza. Per esempio:

font-size: 14px; font-size: 1.4rem; 

Ecco un tutto grande articolo che spiega che c'è da sapere su questa unità: http://snook.ca/archives/html_and_css/font-size-with-rem

Answer 2

Vuoi il box-shadow in scala con la larghezza del contenitore o con l'altezza del contenitore? Non puoi realmente specificare altezza e larghezza della tua ombra, solo una diffusione. Quindi se il tuo contenitore si restringe del 10% in larghezza ma non si riduce in altezza, la tua ombra si ridurrà del 10% (se fosse possibile), cioè l'altezza dell'ombra si ridimensionerà anche se probabilmente non dovrebbe.

Se si desidera che l'ombra della casella venga effettivamente ridimensionata correttamente in base all'altezza e alla larghezza, è necessario creare più ombre, una per l'altezza e una per la larghezza.

Tuttavia, non sarà mai possibile ridimensionare l'ombra effettiva, solo il contenitore dell'ombra. Quindi dovresti creare un contenitore all'interno del tuo contenitore principale e quindi dargli dei margini negativi e allegare l'ombra della scatola. Tuttavia, noterai presto che la tua ombra cresce effettivamente anziché ridursi quando ridimensiona il contenitore.

Sembra un po 'eccessivo per provare e ridimensionare qualcosa che non è scalabile senza l'utilizzo di query multimediali o jQuery.

Tuttavia, se siete alla ricerca di confini scalabili, cioè box-shadow senza sfocature: P, allora non cercate oltre:

http://jsfiddle.net/925r2/3/

<style> 
    * { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     box-sizing: border-box; 
    } 

    .wrapper { 
     position: relative; 
     margin: 100px auto 0; 
     width: 80%;   /* .content width */ 
     height: 400px;  /* .content height */ 
    } 

    .content { 
     position: absolute; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     background: #fff; /* .content background */ 
    } 

    .shadow { 
     position: absolute; 
     top: -10%;   /* .content shadow top height */ 
     right: -5%;   /* .content shadow right width */ 
     bottom: -10%;  /* .content shadow bottom height */ 
     left: -5%;   /* .content shadow left width */ 
     background: #000; /* .content shadow, unfortuntely no blur effect */ 
    } 
</style> 

<div class="wrapper"> 
    <div class="shadow"></div> 
    <div class="content">This is your content</div> 
</div> 

Answer 3

Se siete alla ricerca di un inserto box-shadow è possibile utilizzare uno sfondo a gradiente radiale per simulare il comportamento.Così, invece di -

box-shadow: inset 0 0 100% #000; 

Si potrebbe utilizzare -

background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0,rgba(0,0,0,1) 100%); 

Supporto: FF16 +, IE10 +, Safari 5.1+

non riesco a trovare alcuna risposta definitiva su quando Chrome ha iniziato a sostegno della proprietà , ma la mia versione attuale (39.0.2171.65) lo supporta sicuramente.

ColorZilla è uno strumento piuttosto utile per generare gradienti radiali (tra gli altri) con i prefissi necessari se si decide di percorrere questa rotta.

Answer 4

ho scoperto che la dimensione diffusione di ombra non può essere impostato per percentuale di oggetto padre

Vero. Ma è possibile impostare font-size sull'oggetto padre, quindi definire la dimensione dell'oggetto in em s e utilizzare lo stesso em s per definire la dimensione box-shadow.

Oppure, se l'oggetto principale è la finestra, è possibile utilizzare viewport units: vw and vh.