Creare un Sito Html/CSS Modulare #2 - Cover

Continuiamo a costruire il nostro sito Web Modulare con la sintassi BEM, oggi realizziamo il modulo della Cover.

Scarica il codice della struttura realizzata qui: http://bit.ly/marchetti-design-community

Per creare una design accattivante utilizzeremo 3 tecniche HTML/CSS (supportate anche da browser datati come IE9) molto versatili e potenti che combinate tra l'oro danno un risultato Fantastico.

1) Altezza percentuale e sfondo cover
Partiremo inserendo un elemento con altezza percentuale quindi variabile in base alla grandezza dello schermo. Grazie ai CSS3 e il responsive design inseriremo una immagine come sfondo che verrà ridimensionato occupando tutto lo spazio disponibile sia in altezza che in larghezza.

2) Contenuto centrato verticalmente
Grazie alla proprietà CSS display:table andremo a centrare verticalmente la caption della nostra cover. Riusciremo con questa tecnica CSS a creare un elemento HTML (con altezza variabile) centrato verticalmente ad un altro elemento HTML con percentuale (quindi variabile)

3) Layer per aumentare leggibilità
Inseriremo poi un div con opacità 0.5% per scurire l'immagine e rendere il testo più leggibile

Stay Tuned!

-

Sito: http://www.marchettidesign.net/
-
Temi WordPress FREE

Fullby: http://www.marchettidesign.net/fullby/
Gridby: http://www.marchettidesign.net/gridby/
Swipy: http://www.marchettidesign.net/swipy/
Fullbase: https://it.wordpress.org/themes/fullb...
-
Twitter:   / afmarchetti  
Facebook:   / marchettidesignnet-140329246021912  
Github: https://github.com/afmarchetti/
Codepen: https://codepen.io/afmarchetti/
-
Music: Soundcloud
-
Camera - iPhone 6