Creare un Sito Html/CSS Modulare #2 – Cover
By Andrea Marchetti
@marchetti_design
Continuiamo a costruire il nostro sito Web Modulare in HTML e CSS con la sintassi BEM. Oggi realizziamo il modulo della Cover.
Nella lezione successiva realizziamo le tre card con informative:
http://www.marchettidesign.net/2016/10/creare-un-sito-htmlcss-modulare-3-cards-e-banner/
Scarica il codice della struttura realizzata qui: http://bit.ly/marchetti-design-community
Per creare un 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.
Ecco gli step per arrivare al risultato finale.
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à ridimensionata 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 dentro un altro elemento HTML (con altezza variabile).
3) Layer per aumentare leggibilità
Inseriremo poi un div con opacità 0.5% per scurire l’immagine e rendere il testo più leggibile. Posizioneremo il div sopra all’immagine di sfondo ma sotto il testo della caption.
Se ti è piaciuto il video iscriviti al nuovo canale YouTube 😉
https://www.youtube.com/channel/UCWT3E1a00seSxCo3amg16AQ
Stay Tuned!
Potrebbero interessarti:
