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;…
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…
Les bordures
Ce qu’on peut faire avec border: Au survole certain exemple réagisse. La 13 au survole applique une rotation de la croix.
Les dégradés
background dégradés:
Background avec menu fixe.
Pour le fond de la page: et son code: L’ordre de déclaration des valeurs de la propriété background va être le suivant : La valeur relative à la propriété background-image ; Les valeurs relatives aux propriétés background-position / background-size (avec le slash entre les deux valeurs); La valeur relative à la propriété background-repeat ; La valeur relative à la propriété background-attachment ; La valeur relative à la…
Évaluation du module 2
Pour cette évaluation le prof, je trouve, n’a pas été trop dur. création d’une montre, l’intégrer dans une bannière, et reproduction d’une bannière, vous avez 3 heures. 10/10. Astuce : Pour la montre (tiret des minutes) Faire un trait à douze heure. Utiliser l’outils rotation et faire un clique au centre du cercle en maintenant…
Structurer une page sur la base de flottants.
Exercice assez complexe que d’utiliser les flottants pour la mise en pages. Voici quelques exemples: Le code CSS: Deuxième exemples: Le CSS: Autre exemple: Avec menu burger. Le code: