CSS Tricks, parte uno

Ciao, vediamo insieme qualche tricks utile per i nostri fogli di stile.

Le variabili

Css offre la possibilità di dichiarare delle variabili per organizzare al meglio i nostri fogli di stile.
I vantaggi sono molteplici infatti, possiamo dichiarare le nostre variabili sia globalmente che localmente.

Definiamo la variabile a livello globale all’intento del selettore :root

:root{
—primary-color:red;
}
.box {
color:var(—primary-color);
}

Abbiamo assegnato la variabile al nostri div attraverso la funzione var, tutti i tag con classe box avranno come colore del testo quello presente in —primary-color.

Se a livello globale il —primary-color sarà “red” ,dichiarando la variabile localmente, andremo a sovrascrivere questo valore solo per la classe di riferimento.

:root{
/* global */
—primary-color:red;
}
.box {
/* local */
—primary-color:blue;
color:var(—primary-color);
}

Box Shadow su file PNG

Se applicassimo box-shadow sulla nostra immagine png trasparente l’effetto sarà quello di “valorizzare” il riquadro dell’immagine e non la sua forma.

Ci viene in aiuto la proprietà filter:drop-shadow che aggiungerà un ombra alla parte “effettiva” dell’immagine png senza includere la trasparenza.

img {
filter:drop-shadow(5px 5px 5px #4e4e4e);
}

Truncate text

In ottica responsive capita di dover gestire la lunghezza del testo, magari per le anteprime dei nostri post, e rendere più equilibrato il layout della pagina.

Anche qui css ci aiuta a gestire questo aspetto, gestendo anche la scelta di quante linee di testo far vedere prima di interromperlo con i classici … , il tutto adattandosi alla lunghezza del nostro box.

.truncate p {
display: -webkit-box;
max-width: 100%;
-webkit-line-clamp: 2; /*interrompi dopo 2 linee*/
-webkit-box-orient: vertical;
overflow: hidden;
}