Créer un site web avec Dreamweaver CC

Ajouter des rollovers sur aside et main

Testez gratuitement nos 1266 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Appliquez également des effets de survol aux éléments de la zone aside et au premier article de la partie main. Utiliser le code n'est pas compliqué, il suffit définir les états de survol et de placer une transition.
03:00

Transcription

Pour apporter une transition sur aside, il va suffire de venir sur la partie li, changer la couleur d'écriture en la passant en gris puisque nous sommes sur fond orange d'habitude. Et puis tout simplement, pointer vers exactement les mêmes sélecteurs avec infos, ce qu'on va rajouter c'est un pseudo hover entre chacune des classes tout simplement en les collant. Alors attention, qu'il n'y a pas d'espace entre eux parce que ce n'est pas les classes access qui seraient à l'intérieur d'un li: hover, mais ce sont les li qui ont une classe access lorsqu'ils ont un pseudo hover. Il suffit de pointer vers des images, qui soient des images hover. Donc si vous n'avez pas les images vous pouvez les récupérer dans le dossier images directement. Et donc une fois ces images récupérées, vous vous apercevez que ce sont, des images qui sont tout simplement, sur fond orange. Donc, en écrivant en gris sur orange on va pouvoir voir le job tranquille. Alors, on pourra rajouter sur la aside li. Donc, on n'a pas une aside li, on va créer une règle aside li. On va pouvoir mettre une transition de 400 ms sur all, histoire de dire, On va vouloir une transition sur l'ensemble de ces éléments de 400 ms. Donc, à chaque fois que le hover sera émis la couleur et l'image seront remplacées à la fois, la couleur et la transformation du url prendront 400 ms. On va pouvoir maintenant, ajouter sur la partie main, alors on va prendre la feuille de style-main si vous ne le retrouvez pas, on a ce petit sélecteur, ici pour venir la chercher, voilà main.css. On va se mettre au niveau du h1 parce que le titre arrivé au niveau de h1 en fait, ce n'est pas le h1. c'est le first-of-type h1 qui, lui, avait cet effet-là. Ce qu'on pourrait faire c'est demandé au titre qui va se trouver, en fait, si on regarde sur le photoshop dans la partie médiane on va pouvoir le cacher et puis le faire apparaître petit à petit. Donc, on pourra lui placer une transition plus un arrière plan qui pourrait être assez sympa. Donc, ce qu'on va faire c'est ce fameux 15, on va lui demander de se positionner au contraire en 40 ou 50. Ici on va lui rajouter une hauteur de 25 une arrière-plan rgba. Puis, on va lui demander que sur le hover ici, essayons de le prendre, voilà. On va lui demander sur le même sélecteur avec le hover cette fois-ci, d'aller à un top 25. Donc on va pouvoir placer un first-of-type hover. Et on peut rajouter donc, notre fameuse transition sur le h1 maintenant. Donc, si je rajoute une transition all de 600 ms et si s'enregistre ça devrait pouvoir faire le job. Donc, on va passer en mode En direct pour pouvoir visualiser notre image. Donc, ici, on a nos survols qui se passent bien avec notre petite transition, parfait !! Et puis si je viens, voilà, on a bien le Trios des trois qui apparaît. Alors, on va réduire un peu la page pour voir cet aspect un peu responsive également. Voyez qu'en survol, on a les Trios des trois qui apparaît. Et bien entendu, on pourrait envisager d'avoir un clic, et de partir sur l'article du blog directement.

Créer un site web avec Dreamweaver CC

Réalisez votre premier site web avec Dreamweaver. Abordez les principales étapes de conception, telles que la création d’une page web, l’ajout de contenu multimédia, etc.

3h04 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :25 janv. 2017
Durée :3h04 (37 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !