2 résultats trouvés pour auteur_Xplo-Sion

Exemple :







Je vais vous expliquer le but de ce tutoriel. Vous connaissez tous le box-shadow, mais le seul hic, c'est que vous ne pouvez pas changer l'opacité. Bah dans ce tuto, vous allez apprendre comment on change ce détail là. Croyez moi ce petit plus peut être extrêmement utile parfois :)


Voici le code que l'on doit mettre dans le CSS, ou dans le HTML :)

Code:

box-shadow: 4px 5px 20px 2px rgba(0, 0, 0, 0.5);


/*Exemple dans le html*/
<div style="box-shadow: 4px 5px 20px 2px rgba(0, 0, 0, 0.5);"></div>

Passons maintenant aux éléments clés, nous allons parler des chiffres :

Le 4px correspond au positionnement horizontal de l'ombre.

Le 5px correspond au positionnement vertical de l'ombre.

Le 20px correspond à l'élément flou, pour faire simple, ça étale tout l'ombre pour avoir une plus grande zone d'influence :)

Le 2px correspond à la taille de l'ombre.

RGBA correspond au code couleur, mais il y à un petit détail à prendre en compte :

Code:

rgba(0, 0, 0, 0.5);

Le 0.5 correspond à l'opacité, si l'opacité est de 50%, vous allez obligatoirement mettre 0.5, si elle est de 20%, elle sera mise à 0.2.



Une dernière chose, nous parlons la d'ombre externe, mais je vais vous donnez le code pour avoir l'ombre interne :)

Code:

box-shadow:inset 2px 2px 50px 20px rgba(0, 0, 0, 0.5);

En espérant avoir pu vous être utile,

Xplo-sion.

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);
}

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);
}

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;
}

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.