È una domanda che mi sento fare abbastanza spesso: È possibile creare ombre dai gradienti anziché dai colori solidi? Non esiste una proprietà CSS specifica che faccia questo (credetemi, ho guardato) e qualsiasi post sul blog che trovate a riguardo è fondamentalmente un sacco di trucchi CSS per approssimare un gradiente. In realtà ne copriremo alcuni mentre procediamo.
Ma prima… un altro articolo sulle ombre sfumate? Veramente?
Sì, questo è l'ennesimo post sull'argomento, ma è diverso. Insieme, spingeremo i limiti per ottenere una soluzione che copra qualcosa che non ho visto da nessun'altra parte: trasparenza. La maggior parte dei trucchi funziona se l'elemento ha uno sfondo non trasparente, ma cosa succede se abbiamo uno sfondo trasparente? Esploreremo questo caso qui!
Prima di iniziare, lascia che ti presenti il mio generatore di ombre sfumate. Tutto quello che devi fare è regolare la configurazione e ottenere il codice. Ma segui perché ti aiuterò a capire tutta la logica dietro il codice generato.
Sommario
Soluzione non trasparente
Cominciamo con la soluzione che funzionerà per l'80% della maggior parte dei casi. Il caso più tipico: stai usando un elemento con uno sfondo e devi aggiungere un'ombra sfumata ad esso. Nessun problema di trasparenza da considerare lì.
La soluzione è fare affidamento su uno pseudo-elemento in cui è definito il gradiente. Lo posizioni dietro l'elemento reale e applicare un filtro sfocatura ad esso.
.box { position: relative;
}
.box::before { content: ""; position: absolute; inset: -5px; /* control the spread */ transform: translate(10px, 8px); /* control the offsets */ z-index: -1; /* place the element behind */ background: /* your gradient here */; filter: blur(10px); /* control the blur */
}
Sembra un sacco di codice, ed è perché lo è. Ecco come avremmo potuto farlo con a box-shadow
invece se stessimo usando un colore solido invece di un gradiente.
box-shadow: 10px 8px 10px 5px orange;
Questo dovrebbe darti una buona idea di cosa stanno facendo i valori nel primo frammento. Abbiamo gli offset X e Y, il raggio di sfocatura e la distanza di diffusione. Si noti che abbiamo bisogno di un valore negativo per la distanza di diffusione che proviene da inset
proprietà.
Ecco una demo che mostra l'ombra sfumata accanto a un classico box-shadow
:
Se guardi da vicino noterai che entrambe le ombre sono leggermente diverse, specialmente la parte sfocata. Non è una sorpresa perché sono abbastanza sicuro che il filter
l'algoritmo della proprietà funziona in modo diverso rispetto a quello per box-shadow
. Non è un grosso problema poiché il risultato è, alla fine, abbastanza simile.
Questa soluzione è buona, ma presenta ancora alcuni inconvenienti legati al z-index: -1
dichiarazione. Si C'è "contesto impilabile" succede lì!
ho fatto domanda transform
all'elemento principale, e boom! L'ombra non è più al di sotto dell'elemento. Questo non è un bug ma il risultato logico di un contesto di stacking. Non preoccuparti, non inizierò una noiosa spiegazione sullo stacking context (L'ho già fatto in un thread Stack Overflow), ma ti mostrerò comunque come aggirare il problema.
La prima soluzione che consiglio è quella di utilizzare un 3D transform
:
.box { position: relative; transform-style: preserve-3d;
}
.box::before { content: ""; position: absolute; inset: -5px; transform: translate3d(10px, 8px, -1px); /* (X, Y, Z) */ background: /* .. */; filter: blur(10px);
}
Invece di usare z-index: -1
, useremo una traslazione negativa lungo l'asse Z. Metteremo tutto dentro translate3d()
. Non dimenticare di usare transform-style: preserve-3d
sull'elemento principale; altrimenti, il 3D transform
non avrà effetto.
Per quanto ne so, non ci sono effetti collaterali in questa soluzione... ma forse ne vedi uno. In tal caso, condividilo nella sezione dei commenti e proviamo a trovare una soluzione!
Se per qualche motivo non sei in grado di utilizzare un file 3D transform
, l'altra soluzione è fare affidamento su due pseudo-elementi: ::before
ed ::after
. Uno crea l'ombra sfumata e l'altro riproduce lo sfondo principale (e altri stili di cui potresti aver bisogno). In questo modo, possiamo facilmente controllare l'ordine di sovrapposizione di entrambi gli pseudo-elementi.
.box { position: relative; z-index: 0; /* We force a stacking context */
}
/* Creates the shadow */
.box::before { content: ""; position: absolute; z-index: -2; inset: -5px; transform: translate(10px, 8px); background: /* .. */; filter: blur(10px);
}
/* Reproduces the main element styles */
.box::after { content: """; position: absolute; z-index: -1; inset: 0; /* Inherit all the decorations defined on the main element */ background: inherit; border: inherit; box-shadow: inherit;
}
È importante notare che lo siamo forzatura l'elemento principale per creare un contesto di impilamento dichiarando z-index: 0
, o qualsiasi altra proprietà che faccia lo stesso, su di essa. Inoltre, non dimenticare che gli pseudo-elementi considerano come riferimento il riquadro di riempimento dell'elemento principale. Quindi, se l'elemento principale ha un bordo, devi tenerne conto quando definisci gli stili dello pseudo-elemento. Noterai che sto usando inset: -2px
on ::after
per tenere conto del bordo definito sull'elemento principale.
Come ho detto, questa soluzione è probabilmente abbastanza buona nella maggior parte dei casi in cui si desidera un'ombra sfumata, purché non sia necessario supportare la trasparenza. Ma siamo qui per la sfida e per spingerci oltre i limiti, quindi anche se non hai bisogno di ciò che verrà dopo, resta con me. Probabilmente imparerai nuovi trucchi CSS che puoi usare altrove.
Soluzione trasparente
Riprendiamo da dove eravamo rimasti con il 3D transform
e rimuovi lo sfondo dall'elemento principale. Inizierò con un'ombra che ha entrambi gli offset e la distanza di diffusione uguali a 0
.
L'idea è trovare un modo per tagliare o nascondere tutto all'interno dell'area dell'elemento (all'interno del bordo verde) mantenendo ciò che è all'esterno. Useremo clip-path
per quello. Ma potresti chiederti come clip-path
può fare un taglio interno un elemento.
In effetti, non c'è modo di farlo, ma possiamo simularlo usando un particolare pattern poligonale:
clip-path: polygon(-100vmax -100vmax,100vmax -100vmax,100vmax 100vmax,-100vmax 100vmax,-100vmax -100vmax,0 0,0 100%,100% 100%,100% 0,0 0)
Tada! Abbiamo un'ombra sfumata che supporta la trasparenza. Tutto quello che abbiamo fatto è aggiungere a clip-path
al codice precedente. Ecco una figura per illustrare la parte poligonale.
L'area blu è la parte visibile dopo l'applicazione del clip-path
. Sto usando solo il colore blu per illustrare il concetto, ma in realtà vedremo solo l'ombra all'interno di quell'area. Come puoi vedere, abbiamo quattro punti definiti con un grande valore (B
). Il mio grande valore è 100vmax
, ma può essere qualsiasi valore elevato desiderato. L'idea è di assicurarci di avere abbastanza spazio per l'ombra. Abbiamo anche quattro punti che sono gli angoli dello pseudo-elemento.
Le frecce illustrano il percorso che definisce il poligono. Partiamo da (-B, -B)
finché non arriviamo (0,0)
. In totale, abbiamo bisogno di 10 punti. Non otto punti perché due punti si ripetono due volte nel percorso ((-B,-B)
ed (0,0)
).
C'è ancora un'altra cosa lasciato a noi da fare, ed è per tenere conto della distanza di diffusione e degli offset. L'unico motivo per cui la demo di cui sopra funziona è perché si tratta di un caso particolare in cui gli offset e la distanza di diffusione sono uguali a 0
.
Definiamo lo spread e vediamo cosa succede. Ricorda che usiamo inset
con un valore negativo per fare questo:
Lo pseudo-elemento è ora più grande dell'elemento principale, quindi il clip-path
taglia più del necessario. Ricorda, dobbiamo sempre tagliare la parte interno l'elemento principale (l'area all'interno del bordo verde dell'esempio). Dobbiamo regolare la posizione dei quattro punti all'interno di clip-path
.
.box { --s: 10px; /* the spread */ position: relative;
}
.box::before { inset: calc(-1 * var(--s)); clip-path: polygon( -100vmax -100vmax, 100vmax -100vmax, 100vmax 100vmax, -100vmax 100vmax, -100vmax -100vmax, calc(0px + var(--s)) calc(0px + var(--s)), calc(0px + var(--s)) calc(100% - var(--s)), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s)) calc(0px + var(--s)), calc(0px + var(--s)) calc(0px + var(--s)) );
}
Abbiamo definito una variabile CSS, --s
, per la distanza di diffusione e aggiornati i punti del poligono. Non ho toccato i punti in cui sto usando il grande valore. Aggiorno solo i punti che definiscono gli angoli dello pseudo-elemento. Aumento tutti i valori zero di --s
e diminuire il 100%
valori di --s
.
È la stessa logica con gli offset. Quando trasliamo lo pseudo-elemento, l'ombra non è allineata e dobbiamo rettificare nuovamente il poligono e spostare i punti nella direzione opposta.
.box { --s: 10px; /* the spread */ --x: 10px; /* X offset */ --y: 8px; /* Y offset */ position: relative;
}
.box::before { inset: calc(-1 * var(--s)); transform: translate3d(var(--x), var(--y), -1px); clip-path: polygon( -100vmax -100vmax, 100vmax -100vmax, 100vmax 100vmax, -100vmax 100vmax, -100vmax -100vmax, calc(0px + var(--s) - var(--x)) calc(0px + var(--s) - var(--y)), calc(0px + var(--s) - var(--x)) calc(100% - var(--s) - var(--y)), calc(100% - var(--s) - var(--x)) calc(100% - var(--s) - var(--y)), calc(100% - var(--s) - var(--x)) calc(0px + var(--s) - var(--y)), calc(0px + var(--s) - var(--x)) calc(0px + var(--s) - var(--y)) );
}
Ci sono altre due variabili per gli offset: --x
ed --y
. Li usiamo all'interno di transform
e aggiorniamo anche il clip-path
valori. Ancora non tocchiamo i punti del poligono con valori grandi, ma compensiamo tutti gli altri - riduciamo --x
dalle coordinate X, e --y
dalle coordinate Y.
Ora tutto ciò che dobbiamo fare è aggiornare alcune variabili per controllare l'ombra del gradiente. E già che ci siamo, rendiamo anche il raggio di sfocatura una variabile:
Abbiamo ancora bisogno del 3D
transform
trucco?
Tutto dipende dal confine. Non dimenticare che il riferimento per uno pseudo-elemento è il riquadro di riempimento, quindi se applichi un bordo al tuo elemento principale, avrai una sovrapposizione. O mantieni il 3D transform
ingannare o aggiornare il inset
valore per tenere conto del confine.
Ecco la demo precedente con un aggiornamento inset
valore al posto del 3D transform
:
Direi che questo è un modo più adatto di procedere perché la distanza di diffusione sarà più accurata, poiché inizia dal border-box invece che dal padding-box. Ma dovrai regolare il inset
valore in base al bordo dell'elemento principale. A volte, il bordo dell'elemento è sconosciuto e devi usare la soluzione precedente.
Con la precedente soluzione non trasparente, è possibile che tu debba affrontare un problema di contesto di impilamento. E con la soluzione trasparente, è possibile che tu debba invece affrontare un problema di confine. Ora hai opzioni e modi per aggirare questi problemi. Il trucco della trasformazione 3D è la mia soluzione preferita perché risolve tutti i problemi (Il generatore online prenderò in considerazione anche questo)
Aggiunta di un raggio del bordo
Se provi ad aggiungere border-radius
all'elemento quando si utilizza la soluzione non trasparente con cui abbiamo iniziato, è un compito abbastanza banale. Tutto quello che devi fare è ereditare lo stesso valore dall'elemento principale e il gioco è fatto.
Anche se non hai un raggio del bordo, è una buona idea definirlo border-radius: inherit
. Questo spiega qualsiasi potenziale border-radius
potresti voler aggiungere in seguito o un raggio del bordo che proviene da qualche altra parte.
È una storia diversa quando si ha a che fare con la soluzione trasparente. Sfortunatamente, significa trovare un'altra soluzione perché clip-path
non può gestire le curvature. Ciò significa che non saremo in grado di tagliare l'area all'interno dell'elemento principale.
Introdurremo il mask
proprietà alla miscela.
Questa parte è stata molto noiosa e ho faticato a trovare una soluzione generale che non facesse affidamento numeri magici. Mi sono ritrovato con una soluzione molto complessa che utilizza solo uno pseudo-elemento, ma il codice era un pezzo di spaghetti che copre solo alcuni casi particolari. Non credo valga la pena esplorare quella strada.
Ho deciso di inserire un elemento in più per il bene del codice più semplice. Ecco il markup:
<div class="box"> <sh></sh>
</div>
Sto usando un elemento personalizzato, <sh>
, per evitare potenziali conflitti con CSS esterni. Avrei potuto usare un <div>
, ma poiché è un elemento comune, può essere facilmente preso di mira da un'altra regola CSS proveniente da qualche altra parte che può violare il nostro codice.
Il primo passo è posizionare il <sh>
elemento e creare volutamente un overflow:
.box { --r: 50px; position: relative; border-radius: var(--r);
}
.box sh { position: absolute; inset: -150px; border: 150px solid #0000; border-radius: calc(150px + var(--r));
}
Il codice può sembrare un po' strano, ma man mano che procediamo arriveremo alla logica dietro di esso. Successivamente, creiamo l'ombra sfumata usando uno pseudo-elemento di <sh>
.
.box { --r: 50px; position: relative; border-radius: var(--r); transform-style: preserve-3d;
}
.box sh { position: absolute; inset: -150px; border: 150px solid #0000; border-radius: calc(150px + var(--r)); transform: translateZ(-1px)
}
.box sh::before { content: ""; position: absolute; inset: -5px; border-radius: var(--r); background: /* Your gradient */; filter: blur(10px); transform: translate(10px,8px);
}
Come puoi vedere, lo pseudo-elemento utilizza lo stesso codice di tutti gli esempi precedenti. L'unica differenza è il 3D transform
definito sul <sh>
elemento invece dello pseudo-elemento. Per il momento, abbiamo un'ombra sfumata senza la funzione di trasparenza:
Si noti che l'area del <sh>
elemento è definito con il contorno nero. Perché lo sto facendo? Perché in questo modo, sono in grado di applicare a mask
su di esso per nascondere la parte all'interno dell'area verde e mantenere la parte debordante dove dobbiamo vedere l'ombra.
So che è un po' complicato, ma diverso clip-path
, le mask
la proprietà non tiene conto dell'area al di fuori un elemento per mostrare e nascondere le cose. Ecco perché sono stato obbligato a introdurre l'elemento in più: simulare l'area “esterna”.
Inoltre, tieni presente che sto usando una combinazione di border
ed inset
delimitare quell'area. Questo mi permette di mantenere la casella di riempimento di quell'elemento extra uguale all'elemento principale in modo che lo pseudo-elemento non abbia bisogno di calcoli aggiuntivi.
Un'altra cosa utile che otteniamo dall'uso di un elemento extra è che l'elemento è fisso e solo lo pseudo-elemento si muove (usando translate
). Questo mi permetterà di definire facilmente la maschera, che è il ultimo fase di questo trucco.
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
E 'fatto! Abbiamo la nostra ombra sfumata e supporta border-radius
! Probabilmente ti aspettavi un complesso mask
valore con una gran quantità di gradienti, ma no! Abbiamo solo bisogno di due semplici gradienti e a mask-composite
per completare la magia.
Isoliamo il <sh>
elemento per capire cosa sta succedendo lì:
.box sh { position: absolute; inset: -150px; border: 150px solid red; background: lightblue; border-radius: calc(150px + var(--r));
}
Ecco cosa otteniamo:
Nota come il raggio interno corrisponde a quello dell'elemento principale border-radius
. Ho definito un grande bordo (150px
) E border-radius
uguale al bordo grande più il raggio dell'elemento principale. All'esterno ho un raggio pari a 150px + R
. Dentro, ce l'ho 150px + R - 150px = R
.
Dobbiamo nascondere la parte interna (blu) e assicurarci che la parte del bordo (rossa) sia ancora visibile. Per fare ciò, ho definito due livelli maschera: uno che copre solo l'area del riquadro del contenuto e un altro che copre l'area del riquadro del bordo (il valore predefinito). Poi ho escluso l'uno dall'altro per rivelare il confine.
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
Ho usato la stessa tecnica per creare un bordo che supporti gradienti e border-radius
. Ana Tudor ha anche un buon articolo sul composito per mascheratura che vi invito a leggere.
Ci sono degli svantaggi in questo metodo?
Sì, questo sicuramente non è perfetto. Il primo problema che potresti incontrare è legato all'utilizzo di un bordo sull'elemento principale. Ciò potrebbe creare un piccolo disallineamento nei raggi se non lo si tiene in considerazione. Abbiamo questo problema nel nostro esempio, ma forse è difficile notarlo.
La correzione è relativamente semplice: aggiungi la larghezza del bordo per il file <sh>
elementi inset
.
.box { --r: 50px; border-radius: var(--r); border: 2px solid;
}
.box sh { position: absolute; inset: -152px; /* 150px + 2px */ border: 150px solid #0000; border-radius: calc(150px + var(--r));
}
Un altro svantaggio è il grande valore che stiamo usando per il bordo (150px
nell'esempio). Questo valore dovrebbe essere abbastanza grande da contenere l'ombreggiatura ma non troppo grande per evitare problemi di overflow e barra di scorrimento. Fortunatamente, il generatore in linea calcolerà il valore ottimale considerando tutti i parametri.
L'ultimo inconveniente di cui sono a conoscenza è quando lavori con un complesso border-radius
. Ad esempio, se si desidera applicare un raggio diverso a ciascun angolo, è necessario definire una variabile per ciascun lato. Non è davvero uno svantaggio, suppongo, ma può rendere il tuo codice un po' più difficile da mantenere.
.box { --r-top: 10px; --r-right: 40px; --r-bottom: 30px; --r-left: 20px; border-radius: var(--r-top) var(--r-right) var(--r-bottom) var(--r-left);
}
.box sh { border-radius: calc(150px + var(--r-top)) calc(150px + var(--r-right)) calc(150px + var(--r-bottom)) calc(150px + var(--r-left));
}
.box sh:before { border-radius: var(--r-top) var(--r-right) var(--r-bottom) var(--r-left);
}
Il generatore online considera solo un raggio uniforme per semplicità, ma ora sai come modificare il codice se vuoi considerare una configurazione di raggio complessa.
Concludendo
Siamo arrivati alla fine! La magia dietro le ombre sfumate non è più un mistero. Ho cercato di coprire tutte le possibilità e tutti i possibili problemi che potresti incontrare. Se mi sono perso qualcosa o scopri qualche problema, non esitare a segnalarlo nella sezione dei commenti e lo verificherò.
Ancora una volta, molto di questo è probabilmente eccessivo considerando che la soluzione de facto coprirà la maggior parte dei tuoi casi d'uso. Tuttavia, è bene conoscere il "perché" e il "come" dietro il trucco e come superare i suoi limiti. Inoltre, abbiamo fatto un buon esercizio giocando con il ritaglio e il mascheramento CSS.
E, naturalmente, hai il generatore in linea puoi raggiungere ogni volta che vuoi evitare il fastidio.
- Distribuzione di contenuti basati su SEO e PR. Ricevi amplificazione oggi.
- Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. Accedi qui.
- Fonte: https://css-tricks.com/different-ways-to-get-css-gradient-shadows/
- 1
- 10
- 11
- 3d
- 7
- 9
- 98
- a
- capace
- Chi siamo
- a proposito
- sopra
- Assoluta
- Secondo
- Il mio account
- conti
- preciso
- effettivamente
- aggiuntivo
- Dopo shavasana, sedersi in silenzio; saluti;
- algoritmo
- Tutti
- consente
- già
- sempre
- Ana
- ed
- Un altro
- ovunque
- applicato
- APPLICA
- AMMISSIONE
- RISERVATA
- in giro
- articolo
- sfondo
- fondamentalmente
- perché
- prima
- dietro
- CREDIAMO
- sotto
- Big
- maggiore
- Po
- Nero
- Blog
- Blu
- sfocatura
- sistema
- Noioso
- Scatola
- Rompere
- Insetto
- calcolare
- calcoli
- non può
- Custodie
- casi
- Challenge
- dai un'occhiata
- classico
- percorso di clip
- strettamente
- codice
- colore
- combinazione
- arrivo
- commento
- Uncommon
- completamento di una
- complesso
- concetto
- Configurazione
- conflitto
- Prendere in considerazione
- considerando
- ritiene
- contenuto
- contesto
- di controllo
- Angolo
- angoli
- potuto
- Portata
- coprire
- Copertine
- creare
- crea
- CSS
- Trucchi CSS
- costume
- taglio
- tagli
- affare
- trattare
- deciso
- diminuire
- Predefinito
- definito
- definisce
- definizione
- decisamente
- dipende
- DID
- differenza
- diverso
- direzione
- scopri
- distanza
- non
- fare
- Dont
- inconvenienti
- ogni
- In precedenza
- facilmente
- effetto
- o
- altrove
- abbastanza
- garantire
- particolarmente
- Anche
- qualunque cosa
- esempio
- Esempi
- esclusi
- Esercitare
- previsto
- spiegazione
- esplora
- Esplorare
- esterno
- extra
- Faccia
- abbastanza
- preferito
- caratteristica
- pochi
- figura
- filtro
- Trovare
- ricerca
- Nome
- Fissare
- fisso
- seguire
- forza
- Gratis
- da
- Generale
- generato
- ottenere
- Dare
- Go
- andando
- buono
- gradienti
- Green
- accade
- Aiuto
- qui
- nascondere
- Come
- Tutorial
- HTML
- HTTPS
- MALATO
- idea
- importante
- in
- Aumento
- invece
- introdurre
- invitare
- problema
- sicurezza
- IT
- mantenere
- conservazione
- Sapere
- Cognome
- galline ovaiole
- IMPARARE
- probabile
- limiti
- limiti
- piccolo
- logico
- Lunghi
- più a lungo
- Guarda
- guardò
- SEMBRA
- lotto
- magia
- Principale
- mantenere
- Maggioranza
- make
- mask
- si intende
- metodo
- forza
- modificare
- momento
- Scopri di più
- maggior parte
- cambiano
- in movimento
- Mozilla
- Mistero
- Bisogno
- negativo.
- tuttavia
- New
- GENERAZIONE
- offset
- ONE
- online
- di fronte
- ottimale
- Opzioni
- Arancio
- minimo
- Altro
- Altri
- altrimenti
- contorno
- al di fuori
- Superare
- parametri
- parte
- particolare
- sentiero
- Cartamodello
- perfetta
- Forse
- scegliere
- posto
- Platone
- Platone Data Intelligence
- PlatoneDati
- gioco
- per favore
- più
- punti
- Poligono
- posizione
- possibilità
- possibile
- Post
- potenziale
- piuttosto
- precedente
- probabilmente
- proprietà
- Spingi
- metti
- domanda
- raggiungere
- a raggiunto
- Leggi
- Realtà
- ragione
- raccomandare
- Rosso
- ridurre
- relazionato
- relativamente
- ricorda
- rimuovere
- ripetuto
- rapporto
- colpevole
- rivelare
- strada
- Regola
- Suddetto
- sake
- stesso
- Sezione
- Shadow
- Condividi
- dovrebbero
- mostrare attraverso le sue creazioni
- lato
- simile
- Un'espansione
- semplicità
- da
- piccole
- So
- solido
- soluzione
- alcuni
- qualcosa
- da qualche parte
- lo spazio
- specifico
- diffondere
- pila
- impilamento
- inizia a
- iniziato
- inizio
- soggiorno
- step
- Ancora
- Storia
- adatto
- supporto
- supporti
- sorpresa
- Fai
- mirata
- Task
- Il
- L'area
- cosa
- cose
- a
- insieme
- pure
- argomento
- Totale
- toccare
- Trasformare
- tradurre
- Traduzione
- Trasparenza
- trasparente
- vero
- tipico
- capire
- Aggiornanento
- aggiornato
- us
- uso
- APPREZZIAMO
- Valori
- visibile
- modi
- Che
- Che cosa è l'
- quale
- while
- volere
- senza
- Lavora
- lavoro
- lavori
- valore
- X
- Tu
- Trasferimento da aeroporto a Sharm
- indice z
- zefiro
- zero