Salve a tutti esperti del CSS,
Sto da poco imparando i vostri segreti e sto uscendo letteralmente pazza
La mia idea iniziale era fare un semplicissimo menù portable con 5 sezioni e un'animazione hover su ogni sezione con testo centrale, figure con opacità 50%, didascalia e sfondo del paragrafo mantenuta.
Quindi ho creato un DIV contenitore con 5 paragrafi inline con sfondi a caso.
Ho impostato il width dei paragrafi del 20% rispetto alla larghezza del DIV contenitore per farli stare tutti correttamente nel loro contenitore e siccome non riuscivo a centrare perfettamente il testo ho aggiunto il codice line-height.
Poi ho dato un effetto hover al testo.
Il vero problema è avvenuto quando ho tentato di aggiungere la didascalia ai vari paragrafi. Mi sono letteralmente bloccata perchè sono troppo nabba.
Quando vado ad aggiungere il 'figure' va a sballare tutto.
Quindi dopo svariate prove ho deciso di rivolgermi a veri esperti del css.
Questo è il codice HTML:
E questo il css:codice:<!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap" rel="stylesheet"> <meta charset=UTF-8 /> <link href="style.css" rel="stylesheet" tupe="text/css" media="all"> </head> <body> <header><center><h1>MENU'</h1></center></header> <div id="contenitore"> <p class="primoblocco"> PRIMAVERA </p> <p class="secondoblocco">ESTATE</p> <p class="terzoblocco"> AUTUNNO</p> <p class="quartoblocco">INVERNO</p> <p class="quintoblocco"> MEZZESTAGIONI</p> </div> </body> </html>
codice:#contenitore { width: 900px; height: 400px; margin: 0 auto; display: flex; background-color: black; color: yellow; justify-contenent: center; align-items: center; line-height: 400px; } #contenitore p { background-position: center center; background-size: cover; width: 20%; height: 100%; margin: 0 5px; float: center; border: 1px solid black; font-family: 'Nothing You Could Do', cursive; font-size: 100%; color: #000; color: rgba(0, 0, 0, 0.0); text-align: center; transition-duration: 1s; -webkit-transition-duration: 1s; } #contenitore p:hover { color: white; color: rgba(75, 2, 66, 1.0); } .primoblocco { background-image: url("https://cache.desktopnexus.com/cropped-wallpapers/1738/1738540-1024x614-[DesktopNexus.com].jpg") } .secondoblocco { background-image:url("https://cache.desktopnexus.com/cropped-wallpapers/2491/2491675-1024x614-[DesktopNexus.com].jpg") } .terzoblocco { background-image:url("http://fotohd.weebly.com/uploads/2/1/9/8/21989596/1-regali-natale-o-su-horizontal-fixed_orig.jpg") } .quartoblocco { background-image:url("http://fotohd.weebly.com/uploads/2/1/9/8/21989596/7719476_orig.jpg") } .quintoblocco { background-image:url("https://cdn.pixabay.com/photo/2017/07/08/23/58/bathtub-2485957_1280.jpg") }
Rispondi quotando
