Creare un Sito Html/CSS Modulare #2 – Cover

By Andrea Marchetti - 29 Set , 2016

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://www.marchettidesign.net/moduli/sito-bem.html

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!


Commenti Facebook

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *