Due Consigli utili per CSS3

Attenzione! Questo contenuto è vecchioQuesto articolo risale al 2016, quindi i contenuti e le operazioni qui consigliate potrebbero essere diventate obsolete nel corso del tempo.

Sono da poco incappato per lavoro in un paio di siti davvero interessanti, che ho già salvato tra i bookmark, e che mi toglieranno parecchio lavoro in futuro.

In pochi conoscono la potenza delle regole CSS3 per creare degli effetti complessi, soprattutto per quanto riguarda il box-shadow, che può davvero essere miscelato e mixato in una vasta gamma di differenti output visivi.

Vi linko, quindi, un link che vi aprirà nuovi orizzonti sulla scrittura di regole per il box-shadow: Box-Shadow in CSS3 by @paulund

Un'altro tool molto molto utile che voglio condividere è invece un sito che permette la generazione di background in PNG, che sono davvero belli e si integrano bene con qualsiasi tipo di progetto: Background Generator by SiteOrigin

Di solito assieme al Background Generator di SiteOrigin io uso anche un'altro tool, che è il Base64 Image Encoder, per integrare le grafiche di background direttamente nel CSS: Base 64 Image Encoder Online.

Perchè includere le immagini di background nel CSS? Semplice. Sono immagini relativamente piccole in termini di dimensioni ( massimo 25kb ) e, se integrate con un normale background: transparent url( ... obbligano di fatto il browser dell'utente a sprecare un socket di comunicazione con il sito per il download di una risorsa banale come una immagine di background. A questo punto, conviene davvero sprecare un overhead del 30% sulla grandezza dell'immagine codificata in base_64 piuttosto che far spendere al browser un socket per il download della risorsa.

Con questo è tutto, spero di aver aiutato qualche collega! Buon lavoro!