Come creare una cornice 3d per una immagine soltanto coi CSS

Durante la creazione di cornici per  immagini  maggior parte dei progettisti optano per una delle due scelte: creare il risultato finale interamente in Photoshop, o disegnare "box dentro un altro box" con HTML e decorarli coni i CSS.

Oggi vediamo una soluzione basata interamente sul linguaggio CSS. Quindi potresti aplicarla a qualsiasi immagine o elemento sulla tua pagina senza ricorrere a fotoshop. Basta copiare il codice nel tuo foglio di stile sotto una certa classe e puoi aplicarla al elemnto scelto.  

Come creare una cornice 3d interamente in CSS con la tecnica "Matting"

"Matting", come riferimento nel industria dell'arte è la separazione dell'opera dal telaio da una serie di supporti.

creare cornice css

Questi supporti sono spesso realizzati in cartone in diversi colori e texture. L'obiettivo di questo articolo è ricreare quell'effetto visivo della cornice 3d su una pagina web, senza aggiungere elementi attorno alla immagine;la marcatura html è molto semplice:

<img class="mat" src="/img.jpg" alt="">

Per prima cosa da fare, vediamo le proprietà CSS che possono ricreare l'impressione di una "scatola" attorno alla immagine. Questo sara il nostro  punto di partenza, con bordo creeremo un effetto di base e l'imbottitura tra il confine e l'elemento aggiungera effetto visivo di una scatola d'incasso. Per realizzare questo posiamo aggiungere un inserto con proprieta box-shadow ricreanado l'impressione di una struttura interna, e con la proprietà outline  per quelli esterni.

Naturalmente vogliamo che l'immagine e la struttura che creeremo intorno saranno responsive, quindi il nostro iniziale codice CSS sara cosi :

img.mat {
        box-sizing: border-box;
        width: 80%; height: auto;
        display: block;
        margin: 4rem auto;
        padding: 10%;
        background: #F4F0EC;
        border: 8px solid #333;
        box-shadow: 0 0 0 50px rgba(125,135,18,0.3) inset;
}

Il trucco è che l'ombra del inserto non possiede  offset orizzontale o verticale o qualsiasi altra sfocatura: solo valori di diffusione, inserto e colore saranno usati per creare l'effetto della struttura interna.

Possiamo migliorare la sensazione di "profondità" sul frame posizionando un altra ombra in stile più tradizionale al interno, mentre allo stesso tempo aggiungere un puo di textura attraverso una combinazione di background-image  e colori RGBA :

img.mat {
        box-sizing: border-box;
        width: 80%; height: auto;
        display: block;
        margin: 4rem auto;
        padding: 10%;
        background-image: url(sfondo.jpg);
        background-repeat: no-repeat;
        background-size: contain;
        border: 8px solid #333;
        box-shadow: 0 0 0 50px rgba(125,135,18,0.3) inset,
                0 0 30px rgba(0,0,0,0.8) inset;
}

esempio corniceCSS

e ultima cosa da fare è di agiungere outline alla immagine per ricreare cornice esterna.

Questa operazione  dovrebbe essere fatta  con attenzione, per diversi motivi: -outline-ha dei limiti nel suo utilizzo.

Firefox attualmente tratta outline leggermente diverso da altri browser: ha un valore di offset di default di 12px, e outline sarà posizionato verso l'esterno da qualsiasi interno box-shadow.

Con il colore verde abbiamo indicato border e con il colore rosso outline e di mezzo vediamo l'ombra interna del box box-shadow

Con questi appunti in mente, il codice finale per l'effetto opacizzante visto nella parte superiore di questo articolo sara cosi :

img.mat {
        box-sizing: border-box;
        width: 100%; height: auto;
        display: block;
        padding: 10%;
        background-color: #A67B5B;
        background-image: url(/images/css/cardboard.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        border: 6px double #483C32;
        box-shadow: 0 0 0 50px rgba(244,240,236,0.4) inset,
         0 0 0 11px rgb(180, 130, 90),
          0 0 30px rgba(0,0,0,0.8) inset;
        outline: 2px solid #333;
        outline-offset: 0px;
}

Questo è naturalmente solo l'inizio: ci sono molte alternative, spero solo che questo articolo ti ha ispirato di esplorare ancora di piu .

Letto 901 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso