Pubblicato da: Max
In data:
12 Mar 2022
Tempo di lettura:
Ciao! Nel video-tutorial di oggi, realizzeremo:
Una simpatica Tenda-Veneziana in Html e CSS
Partiamo come al solito, impostando la struttura di base html e css
Creiamo un div con classe container, passiamo al css e lo stilizziamo, assegnandogli un immagine di sfondo, su cui costruiremo la nostra tenda.
All’interno di container, posizioniamo un div con classe filtro, e nel file css lo stilizziamo, assegnandogli la stessa altezza e larghezza del container, un background nero con alta trasparenza (#000000a6), e un’opacità elevata, (opacity:9), che sarà la dichiarazione su cui giocheremo per realizzare l’effetto luce quando la tenda sarà riavvolta.
Realizziamo la tenda “veneziana”.
Creiamo la barra che la sostiene, sfruttando l’elemento fittizio before, che in css mi permette di realizzare un elemento non presente nella struttura html.
Definiamo cosa dovrà accadere al momento dell’ hover:
La tenda si riavvolge e la luce entra nella stanza -:)
Bene! Abbiamo realizzato una Tenda-Veneziana in Html e CSS!
Per scaricare i file utilizzati clicca sul tasto Download, e dopo decomprimi il file ZIP.
Puoi guardare il video-tutorial completo, sul mio canale YouTube, dove troverai tantissimi altri video dello stesso genere.
Ciao! Alla prossima 🙂
