AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


2 résultats trouvés pour auteur_Xplo-Sion

Opacité réduite sur ombre portée (opacity sur box-shadow) - Mer 25 Avr 2012 - 7:29


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





Bonjour Very Happy

Donc je vous fais mon second tutoriel qui va porter sur le thème "Opacité" par rapport à l'ombre portée (box-shadow). Divers style qui vont vous permettre de décorer votre forum :)

Exemple :

Bonjour, je suis un bloc avec une ombre portée qui a une opacité de 50%!


Bonjour, je suis un bloc avec une ombre portée avec opacité normale, soit 100%




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>





Explication :


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.



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 .


Xplo-Sion

Effet Transition - Infobulle, Rotation et Agrandissement - Ven 20 Avr 2012 - 4:28


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




Bonjour Very Happy

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 :
Tag auteur_xplo-sion sur Never Utopia - graphisme, codage et game design FHTNa3t

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 :
Tag auteur_xplo-sion sur Never Utopia - graphisme, codage et game design FHTNa3t

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 :
Tag auteur_xplo-sion sur Never Utopia - graphisme, codage et game design FHTNa3tIci les infos qui s'afficheront au survol de l'image
Profil MP


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 :
Tag auteur_xplo-sion sur Never Utopia - graphisme, codage et game design FHTNa3t

Mon joli titre


Ici les infos qui s'afficheront au survol de l’icône
Profil MP


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 .



Revenir en haut

La date/heure actuelle est Ven 21 Jan 2022 - 8:58