Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide
Lien pour comprendre pourquoi le contenu n'est pas sous hide
Bonjour 
Donc je vous fais mon premier tutoriel qui va porter sur le thème " Transition ". Divers style qui vont vous permettre de décorer votre forum :)
Donc je vous fais mon premier tutoriel qui va porter sur le thème " Transition ". Divers style qui vont vous permettre de décorer votre forum :)
Effet Rotation
Exemple :
HTML :
- Code:
<span class="maclasse"> <img src="https://i.imgur.com/FHTNa3t.jpg" alt="" /></span>
CSS :
- Code:
/*Image*/
.maclasse img{
width: 70px;
height: 70px;
margin: 10px;
padding: 0px;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
/*Effet sur image au survol*/
.maclasse:hover img {
-webkit-transform : rotate(360deg);
transform: rotate(360deg);
}
Effet Rotation et Agrandissement
Exemple :
HTML :
- Code:
<span class="maclasse"><img src="https://i.imgur.com/FHTNa3t.jpg" alt="" /></span>
CSS :
- Code:
/*Image*/
.maclasse img{
width: 60px;
height: 60px;
margin: 10px;
padding: 0px;
-webkit-transition: all 1.5s ease;
transition: all 1.5s ease;
}
/*Effet sur image au survol*/
.maclasse:hover img {
width: 96px;
height: 96px;
-webkit-transform : rotate(-360deg);
transform: rotate(-360deg);
}
Infobulle Transition
Exemple :
HTML :
- Code:
<div class="nu_infobulle"><img src="https://i.imgur.com/FHTNa3t.jpg" alt="" /><span class="nu_bulle">Ici les infos qui s'afficheront au survol de l'image<br /><a href="#profil">Profil</a> <a href="#mp">MP</a></span></div>
CSS :
- Code:
/*Bloc qui contient l'image et l'infobulle*/
.nu_infobulle{
width: 100px;
padding: 0px;
position: relative;
}
/*Infobulle*/
.nu_bulle{
background: #090700;
border: 0px solid #1c1706;
color: #c4c4c4;
width: 0px;
height: 0px;
position: absolute;
top: 100px;
left: 70px;
overflow: hidden;
z-index: 20;
text-align: left;
border-radius: 10px;
-webkit-transition: all 1.5s ease;
transition: all 1.5s ease;
}
/*Apparition de l'infobulle au survol*/
.nu_infobulle:hover .nu_bulle{
width: 150px;
height: 60px;
padding: 5px;
border-width: 1px;
}
Effet Infobulle sur Transition
Exemple :
HTML :
- Code:
<div class="transition_nu"><img width="50" height="50" src="https://i.imgur.com/FHTNa3t.jpg" alt="" /><div class="nu_transition"><h3>Mon joli titre</h3><br /><span> Ici les infos qui s'afficheront au survol de l’icône <br /><a href="#profil">Profil</a> <a href="#mp">MP</a></span></div></div>
CSS:
- Code:
/*Bloc qui contient l'image et l'infobulle*/
.transition_nu {
position: relative;
width: 50px;
height: 50px;
padding: 0px;
}
/*Bloc de l'infobulle*/
.nu_transition{
background: #090700;
border: 0px solid #1c1706;
color: #dfdfdf;
width: 0px;
height: 0px;
overflow: hidden;
position: absolute;
left:50px;
top: 0px;
z-index: 999;
padding: 0px;
text-align: center;
border-radius: 10px;
-webkit-transition: all 1s ease-in;
transition: all 1s ease-in;
}
/*Apparitiond e l'infobulle au survol*/
.transition_nu:hover .nu_transition{
height: 80px;
width: 200px;
padding: 5px;
border-width: 1px;
}
/*Image*/
.transition_nu img {
position: relative;
z-index: 990;
width: 50px;
height: 50px;
left: 0px;
bottom: 0px;
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
/*Effet sur l'image au survol*/
.transition_nu:hover img {
-webkit-transition: rotate(-360deg);
transform: rotate(-360deg);
}
En espérant avoir pu vous être utile,
Xplo-sion.
PS : Sparrow style, le fondateur de Never Utopia a eu l'amabilité de créer cette section pour que l'on puisse partager avec vous nos connaissance, il serait donc normal que vous mettiez un lien sur votre forum comme quoi NU a participer à la construction du codage de votre forum.
Merci .
Dernière édition par Xplo-Sion le Mer 25 Avr 2012 - 7:28, édité 1 fois
Ce code à l'air pas mal du tout, je prends pour en voir un peu plus ! :)
