Cours de Absolute et Orphère ♥

*a fait le code en 5 minutes pour avoir un truc de potable a présenter*
Coucou les filles ! Alors j'ai un peu farfouillé le fofo et j'ai cru comprendre que vous aviez toutes les deux vos bases en HTML/CSS (Abso avec sa signa en onglet et Orph' avec sa fiche pour sa partie de cours en Graph') alors j'aimerais savoir en détails vos compétences ainsi ce que vous aimeriez que je vous enseigne c:

J'espère que vous allez vous amuser ♥

D'ailleurs, je vous ai prise toute les deux en même temps parce que c'est un peu plus simple pour moi, étant donné que je suis une fille tout le temps occupée xD J'espère que cela ne vous dérangera pas c:

*ont commence par ça parce que c'est le moins long /PAN/*

Coucou Abso', donc je vais de te donner quelques méthodes avec les explications pour le hover c:

Pour commencer, un bref rappel (ça va te servir Orph', alors lit aussi 8D). Le hover, c'est le fait de créer des transition entre un point A et un point B au passage de la souris. En claire, tu passe ta souris, POUF il se passe un truc.

Exemple :

Code:

.rondnoir {
margin:auto; /*pour centrer*/
transition: all 0.4s ease; /*La transition de fin*/
border-radius:50px 50px 50px 50px; /*les bords arrondis*/
width:100px; /*la largeur*/
height:100px; /*la hauteur*/
background:mediumpurple;/*la couleur de fond*/
}

.rondnoir:hover { /*Au survol*/
transition: all 0.4s ease;/*la transition de début*/
background:indigo;/*la couleur de fond*/
}

Code:

<div class="rondnoir"></div>

Donc vous l'aurez remarqué, je n'utilise pas la manière classique du :

Code:

.durée {-o-transition-duration: 2s;
webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
transition-duration: 2s;}

.rondnoir {
margin:auto; /*pour centrer*/
border-radius:50px 50px 50px 50px; /*les bords arrondis*/
width:100px; /*la largeur*/
height:100px; /*la hauteur*/
background:mediumpurple;/*la couleur de fond*/
}

.rondnoir:hover { /*Au survol*/
background:indigo;/*la couleur de fond*/
}

Code:

<div class="durée rondnoir"></div>

Je sais qu'il y a plein de trucs comme ça, mais je ne préfère pas m'aventurer plus loin, c'est déjà bien assez compliqué comme ça.

Pour revenir à cette propriété :

transition: all 0.4s ease;

Le 0.4s correspond au temps, le reste, on s'en fout (#laprofquinesaitrien).

Généralement, on ne met pas les même valeurs pour l'allée et le retour parce que c'est plus stylé  

Après, on recherche généralement plus d'effet soi-même sur internet, parce qu'on est jamais contente de ce qu'on veut.

Donc je vais donner deux trois manière de faire un hover sympa c:
Déjà, commençons par une manière que j'aime beaucoup utiliser (elle est présente sur la PA Baby Metal que j'ai laisser en LS ici ^-^

Donc on fait un rond :

Code:

.premierrond {
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:pink;
*/
}

Code:

<div class="premierrond"></div>

Puis un deuxième rond :

Code:

.premierrond {
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:pink;
}

.deuxiemerond {
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:green;
}

Code:

<div class="premierrond"></div>
<div class="deuxiemerond"></div>

On utiliser un margin pour remonter le rond vert de sorte à ce qu'il se superpose sur le rond rose clair.

Code:

.premierrond {
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:pink;
}

.deuxiemerond {
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:green;
margin-top:-118px;
}

Et maintenant vient la transition ! On va mettre le deuxieme rond a opacité 1 et au hover, le placer à opacité 0 de sorte à ce qu'il laisse le rond rose visible c:

Code:

.premierrond {
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:pink;
}

.deuxiemerond {
transition: all 0.4s ease;
opacity:1;
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:green;
margin-top:-118px;
}

.deuxiemerond:hover {
transition: all 0.4s ease;
opacity:0;
}

Je sais ce que vous allez dire. C'est plus long et moins simple que la méthode qui est exposé au tout début du cours certes. En fait, cette méthode est plus utilisé pour l'apparition, disparition de textes/images. On met le premier rond avec une image ou une couleur, et au survol apparaît une autre couleur (dans le cas d'une image) ou un texte. Pour que le texte soit bien positionné en dessous du rond vert, on rajoute un z-index aux deux ronds. C'est ce qui permet une bonne superposition. Par exemple, un z-index de 999 sera toujours position au dessus d'un z-index 998
Comme ceci :

Lala

Code:

.premierrond {
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:pink;
position:relative;
z-index:1;
}

.deuxiemerond {
transition: all 0.4s ease;
opacity:1;
margin:auto;
border-radius:50px 50px 50px 50px;
width:100px;
height:100px;
background:green;
margin-top:-118px;
position:relative;
z-index:2;
}

.deuxiemerond:hover {
transition: all 0.4s ease;
opacity:0;
}

Je pense que je posterais à la suite d'autre méthode pour le hover. Mais ici, j'ai expliqué le plus simple, j'espère que j'ai été assez compréhensible >w<
Je commence ton cours demain Orph', désolé j'ai un léger contre-temps aujourd'hui qui fait que je n'aurais pas mon ordi à dispo et sur portable, c'est un peu galère.

C'était les hover