Pour faire une transition d’opacité, au survol par exemple, en css il faut: a h1:hover, a img:hover { transition-duration: 0.5s; opacity: 0.7; filter: alpha(opacity=70); } Flèche de menu tournant de 180° + Déroulement en 1 seconde: .etiquette::after{ content: »⬇︎ »; color: rgba(255, 255, 255, .5); font-size: 1.5rem; position:absolute; display:block; top:-2px; left: 7rem ; transition: all 1s;…
Mois : juillet 2018
Spécial Menu
Pour clarifier les choses, je me fait ici un article spécial menu déroulant à plusieurs niveaux: -Tout d’abord le code html(une partie): <nav class= »navigation-principale »> <ul id= »ul-premier-niveau »> <li><a href= »# » class= »li-premier-niveau »>Niveau1</a> <ul class= »ul-deuxieme-niveau »> <li class= »li-deuxieme-niveau li-deuxieme-menu-b »><a href= »# »>Niveau2</a> <ul class= »ul-troisieme-niveau »> <li class= »li-troisieme-niveau »><a href= »# »>Niveau3</a></li> <li class= »li-troisieme-niveau »><a href= »# »>Niveau3</a></li> </ul> </li> <li class= »li-deuxieme-niveau »><a href= »# »>Niveau2</a></li> <li class= »li-deuxieme-niveau »><a href= »# »>Niveau2</a></li> </ul> </li> <li><a href= »# »…
EvalBlog
Une évaluation! Chaud… La partie écran de téléphone, avec menu déroulant progressif et couleur de survol. HTML et CSS uniquement. Les photos et les titres d’article doivent devenir partiellement transparent à leurs survole. La partie écran PC. Vous pouvez remarquer que je n’ai pas pue m’empêcher, il est évident que la première photo (un…
Responsive avec menu déroulant
Un autre travail en responsive: Dans un premier temps il faut créer le code html puis une feuille de style css commune à toutes les pages. les pages: Le cod html: Le code css commun: Ensuite le code responsive: Par la suite nous avons fait plusieurs menu: Le burger se transforme en croix et le…
Responsive
Le responsive consiste à adapter le contenu à différent écrans. En déplaçant les blocs la lisibilité reste claire. Pour cela il faut déjà insérer une balise dans le head du html: <meta name= »viewport » content= »width=device-width, initial-scale=1.0, maximum-scale=3.0″> Puis indiquer à partir de quelle taille d’écrans nous voulons ces modifications. pour le premier exemple le code…