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!

Durante lo sviluppo di qualsiasi sito basato sul famoso Boostrap 3 si incontra ad un certo punto la necessità di scrivere del codice CSS custom per modificare la responsività del layout. Quindi, è comodo sapere già a priori quali sono i breakpoint di Bootstrap per le grandezze dello schermo, che generano appunto lo switch nelle grandezze delle colonne.

Con l'espression breakpoint si intendono quindi le media query che generano gli switch su tablet, cellulari, etc

Ecco il codice sorgente dei breakpoint, considerando che max-width si riferisce a tutto cioò che è "minore o uguale", mentre min-width si riferisce a tutto cioò che è "maggiore o uguale"

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/

    /*==========  Metodi "Mobile-First"  ==========*/

    /* iPhone Retina */ 
    @media only screen and (min-width : 320px) {
        
    }

    /* Device molto piccoli, e smartphone */ 
    @media only screen and (min-width : 480px) {

    }

    /* Device piccoli, e tablet */
    @media only screen and (min-width : 768px) {

    }

    /* Tablet di media grandezza, schermi desktop piccoli */
    @media only screen and (min-width : 992px) {

    }

    /* Device grandi e schermi per desktop */
    @media only screen and (min-width : 1200px) {

    }



    /*==========  Metodi "Desktop-First"  ==========*/

    /* Device grandi e schermi per desktop */
    @media only screen and (max-width : 1200px) {

    }

    /* Tablet di media grandezza, schermi desktop piccoli */
    @media only screen and (max-width : 992px) {

    }

    /* Device piccoli, e tablet */
    @media only screen and (max-width : 768px) {

    }

    /* Device molto piccoli, e smartphone */ 
    @media only screen and (max-width : 480px) {

    }

    /* iPhone Retina */ 
    @media only screen and (max-width : 320px) {
        
    }