Quante volte avresti voluto trovare una soluzione rapida ed efficace ad un problema grafico che sembrava impossibile?

In questo articolo ti mostriamo alcuni trucchi CSS che si dimostreranno tanto semplici quanto efficaci.

Le proprietà CSS che elencheremo in questa guida non sono ancora gestite da Oxygen in maniera visuale, ma potrai tranquillamente applicarle utilizzando "Custom CSS".

Testo gradientato

Vorresti creare un'effetto simile per i tuoi titoli? Ti spiego subito come fare.

Per prima cosa avrai bisogno di applicare un gradiente al background del tuo titolo. E lo puoi fare facilmente in Oxygen, come mostrato nell'immagine sotto. 👇

La prossima cosa che vogliamo fare è impostare la proprietà background-clip: text. Questa proprietà farà in modo che il gradiente in background venga applicato solo dove c'è del testo. 

Tuttavia, a questo punto sembrerà che il tuo gradiente sia scomparso completamente. Questo accade semplicemente perché anche il testo è ancora renderizzato e il gradiente è nascosto sotto.

Ecco perché dobbiamo impostare anche la proprietà text-fill-color: transparent. Rimuoverà il riempimento dal testo, rendendo nuovamente visibile il gradiente.

-webkit-background-clip: text;
-webkit-text-fill-color: transparent; 
-moz-background-clip: text;
-moz-text-fill-color: transparent;

Supporto 👉 96.28% dei browser (https://caniuse.com/?search=background-clip)

Ridimensionare correttamente le immagini

A volta capita di dover ridimensionare forzatamente le immagini. Di default, le immagini adattano larghezza o altezza in base al loro aspect-ratio.

Tuttavia, si può avere la necessità di avere un'immagine per forza quadrata. Supponiamo ad esempio di avere un'immagine che deve essere 300x300, ma in realtà la sua dimensione è 300x450.

Forzando le sue dimensioni ad un quadrato, il risultato sarà questo:

Forzare le sue dimensioni non è stata una buona idea, in quanto ora la foto è visibilmente distorta. Per correre ai ripari basterà aggiungere la proprietà

object-fit: cover

Questa proprietà fa in modo che l'immagini si comporti come se fosse in background, senza creare alcuna distorsione.

Supporto 👉 97% dei browser (https://caniuse.com/?search=object-fit)

Ombre & immagini

Applicare delle ombre su immagini .png o .svg può sembrare complicato, ma in realtà non c'è nulla di più semplice.

Non fare l'errore di pensare che basti un banale box-shadow per realizzare l'effetto voluto, perché invece otterrai questo:

Per raggiungere l'effetto desiderato dovrai utilizzare il seguente filtro:

filter: drop-shadow(5px 5px 10px rgba(0,0,0,.15))

E l'effetto ottenuto sarà questo:

Supporto 👉 96% dei browser (https://caniuse.com/?search=drop-shadow)

Sfocare il background

Per sfocare il background creando un'effetto simile a quello delle notifiche su iphone, basterà applicare al container in questione la proprietà:

backdrop-filter: blur(30px)

Il valore è indifferente, ma più è alto e più lo sfondo sarà sfocato.

Questo è anche il trend del 2021: il glassmorphism. Abbiamo dedicato un articolo e un intero tutorial su YouTube se sei interessato ad approfondire l'argomento.

Supporto 👉 88% dei browser (https://caniuse.com/?search=backdrop-filter)

Tagliare il testo in modo efficace

Gestire la lunghezza dei testi non è mai stata una cosa banale. Alcuni più lunghi, altri più corti e molto spesso è necessario "darci un taglio".

Ma come tagliare i testi in modo che abbiano tutti lo stesso numero di righe e quindi la stessa altezza? E magari aggiungendo anche i tre puntini finali creando un bell'effetto grafico?

Beh.. ho la soluzione per te!

.text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

Grazie alla proprietà -webkit-line-clamp potrai semplicemente decidere il numero di righe da mostrare, e in automatico il testo renderà visibile solamente le righe richieste.

Supporto 👉 96% dei browser (https://caniuse.com/?search=line-clamp)