Je rappelle quand même que le plagiat est interdit... u_u
Je ne vais pas t'expliquer comment faire exactement la même chose que sur le site dont tu as pris la capture, mais à faire le même genre d'effet. Je pense savoir quelle "astuce" ils ont utilisé pour faire sortir la "pokéball" du cadre rouge, mais je ne vais pas dévoiler leurs secrets. En étant un peu malin, quand tu auras plus d'expérience tu pourras trouver par toi-même.
La méthode que je vais t'expliquer va te permettre de faire un cadre de couleur au passage de la souris, mais l'image sera totalement incluse dedans. Si elle est trop haute, l'effet ne sera peut-être pas très esthétique, et dans ce cas il sera peut-être mieux que tu la mettes en dehors du "cadre". Ce sera à toi de voir.
Donc, commençons.
Pour t'expliquer le principe, on va créer un bloc dans lequel on va mettre le lien, et ce n'est pas le lien lui-même qui va être modifié au passage de la souris mais ce bloc. L'intérêt est que ce sera bien la totalité de la ligne qui se colorera au passage de la souris, et pas seulement le lien.
Pour créer notre bloc, on va devoir faire un div. Et dedans on va mettre le lien.
- Code:
-
<div><a href="url">texte</a></div>
A présent on a notre base. Maintenant, il va falloir choisir les propriétés qu'on veut appliquer à notre bloc. Ca, ça se passe dans le css. Mais dans le css... y a tout un ensemble de propriétés. On doit donc créer une liste qui va ne s'appliquer qu'à un endroit. Et pour ça, on va tout simplement donner un nom à notre liste de propriétés.
Je vais choisir le nom lien-en-bloc parce qu'aucune autre idée ne me passe par la tête, mais tu peux le remplacer par ce que tu veux. Le tout est de s'en souvenir.
Reste un problème. Comment dire à notre html qu'il doit prendre les propriétés que je vais définir dans le css sous le nom de lien-en-bloc ?
Pour ça il faut commencer par décider de quelle nature est ma liste de propriétés. Il en existe plusieurs, mais je ne vais pas le détailler. Ici, il s'agira d'une classe. Donc il faudra dire dans le html qu'on veut utiliser les propriétés de la classe lien-en-bloc.
- Code:
-
<div class="lien-en-bloc"><a href="url">texte</a></div>
A présent, pour ce qui est du html tout est terminé. Tout le reste se fait en css.
Dans le css, on va devoir créer notre liste de propriétés. Comme on a dit que ce sera une classe, le nom va être précédé par un point, qu'il ne faudra pas oublier sans quoi le sens sera totalement différent.
On doit ensuite ouvrir une accolade, et nos propriétés s'écriront là. Il ne faudra pas oublier de la refermer, ce que je te conseille donc de faire tout de suite, en laissant une ligne libre.
Il ne nous reste à présent plus qu'à choisir nos propriétés.
Pour mettre une propriété, il faut écrire son nom, mettre deux points pour indiquer qu'on passe à la valeur, écrire la valeur, et terminer par un point-virgule.
Il ne nous reste plus qu'à choisir les propriétés qu'on veut mettre.
On va dire que l'arrière-plan du bloc sera celui de la page sur laquelle il est placé, donc on ne va pas ajouter de couleur particulière. Par contre, on veut notre image sur le côté, donc on va devoir l'ajouter. Et pour qu'elle change au passage de la souris, on va la mettre en arrière plan. En background.
Je t'ai mis directement le code, avec des commentaires, ce qui sera plus simple.
Les commentaires sont les textes écrits entre /* et */. Ils n'ont aucune utilité dans le code et n'influent pas dessus. Ils servent uniquement de repère ou de mémo pour l'utilisateur.
- Code:
-
.lien-en-bloc {
width: 100%; /* pour que le bloc prenne 100% de la largeur disponible. Par défaut, un bloc prend toute la largeur disponible, et il n'est pas toujours nécessaire de préciser cette valeur. J'ai même déjà vu des fois où il ne faut pas le mettre car cela entraîne des bugs */
height: 30px; /* c'est la hauteur du bloc. J'ai mis 30px mais adapte-là à la hauteur de l'image */
background-image: url("adresse-de-l-image"); /* notre image de fond */
background-repeat: no-repeat; /* pour ne pas que l'image se répète comme une mosaïque et bien ne l'avoir qu'une seule fois */
background-position: middle left; /* la position de l'image, soit ici au milieu de la hauteur, et à gauche */
padding-left: 30px; /* pour que le texte ne soit par-dessus l'image, on va le décaler de 30 px à partir de la gauche (choisis la valeur que tu veux en fonction de ton image)*/
vertical-align: middle; /* le texte sera écrit au milieu de la largeur du bloc. Tu peux choisir bottom pour qu'il s'écrive en bas, ou top pour qu'il s'écrive en haut */
}
Là, on a notre bloc quand la souris n'est pas dessus. Maintenant on veut qu'il change quand la souris est dessus. Donc on va faire la même chose, sauf qu'il va falloir utiliser hover, comme je l'ai dit tout à l'heure, et appliquer des propriétés différentes. En fait, tu verras que pas grand-chose ne change par rapport à tout à l'heure. L'image de fond y est toujours, il faudra juste changer le lien, ainsi que les autres propriétés. Ce qu'on va rajouter par contre, c'est un fond de couleur !
- Code:
-
.lien-en-bloc:hover {
width: 100%;
height: 30px;
background-image: url("adresse-de-l-image");
background-repeat: no-repeat;
background-position: middle left;
background-color: couleur; /* notre fameux fond de couleur ! N'oublie pas de remplacer mon mot "couleur" par la valeur que tu veux */
padding-left: 30px;
vertical-align: middle;
}
On a le css, on a le html, plus qu'à valider, et admirer le résultat.
Pour mémoire, le css est accessible depuis le panneau d'administration > Affichage > Couleurs > Feuille de style css.
Fu'
Sam 30 Mar 2024, 22:07 par 
