Creiamo una Cornice al Sito

Quest'oggi voglio spiegarvi qualcosa di veramente semplice e potente allo stesso tempo che sono sicuro riuscirà ad entrare fin da subito nelle vostre grazie e non vedrete l'ora di applicarlo al vostro prossimo progetto!  

Mi sto riferendo alla cornice con la quale potrete racchiudere il vostro sito web e renderlo un pezzo memorabile del web! Parto fin da subito dicendovi che per realizzare questo effetto dovremmo essere in possesso di una media conoscenza dei CSS ma la buona notizia è che non necessiterete di nessun markup per realizzare questo effetto!

Cosa ci Serve?

Visto che si parla del linguaggio CSS per prima cosa ci serviranno due tipi di file, il primo è un file HTML al quale applicheremo i vari effetti mentre il secondo è il classico foglio di stile che ci permetterà di ottenere il risultato. Bando alle ciancie diciamo che abbiamo già creato il nostro file index.html e style.css, nel file HTML dovremmo essere sicuri di avere abbastanza contenuto da riempire la pagina, nell’esempio che andremo a costruire utilizzerò una altezza impostata di 100px (giusto per essere sicuri di vedere i bordi verticali) ma sconsiglio a tutti di replicare questa mia scelta quando andrete a rilasciare il vostro progetto! Mentre quello che dobbiamo fare è andare a modificare il nostro CSS come segue:

Grazie a questo piccolissimo blocco di codice e, ricordiamocelo, a nessun markup aggiuntivo siamo in grado di mostrare questo nuovo elemento che ci permetterà di racchiudere il nostro sito in una elegante cornice! Ecco il risultato dell’esempio appena preparato:

Prima Cornice

Come possiamo vedere dalla stessa immagine anche se presente al lato la barra di scorrimento di FireFox la cornice racchiude correttamente il contenuto della nostra pagina, ma esiste anche un altro metodo che ci permetterà di avere delle cornici ben più avanzate sfruttando le potenzialità dei CSS3.

Cornici Avanzate con i CSS3

Il metodo che vi introduco adesso ha dei benefici e degli svantaggi, il principale beneficio è che utilizza una sola proprietà dei CSS3 e che quindi anche il codice dei nostri CSS rimarrà più organizzato e pulito, lo svantaggio è che utilizzando questo metodo non saremo più in grado di avere una cornice in basso, ma con gli sviluppi grafici che saremo in grado di realizzare sono sicuro che varrà la pena almeno di conoscere questa tecnica.

La proprietà CSS3 a cui mi sto riferendo è la box-shadow! Niente di più semplice che applicare una o, come vedremo, molteplici ombre per raggiungere l’effetto desiderato! Ecco quindi che con una semplice regola CSS saremo in grado di applicare l’effetto desiderato!

Conclusioni

Come annunciato precedentemente l’effetto in questione ha alcuni limiti, per prima cosa troviamo la differente compatibilità tra browser rispetto alla proprietà box-shadow, ed inoltre dobbiamo ricordarci che usando questa tecnica la cornice realizzata non andrà ad occupare l’altezza del browser e che quindi potrebbe non propriamente venir considerata come una cornice. Ma sono sicuro che qualche piccola funzione JavaScript ci verrà incontro per poter lavorare con la pseudo-classe :before; nessuno ha intenzione di inviarci la propria soluzione prima di lasciarci scrivere un articolo a riguardo?

Lascia il tuo Pensiero