Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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.


    Opacité progressive en CSS3 (sans js)

    Partagez
    MasculinAge : 31Message(s) : 31698

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Dim 15 Mai 2011 - 19:02
    Rappel du premier message :

    Bonjour à tous !

    Puisque cela a été demandé, j'en profite pour faire un petit tuto' là dessus. Sachez tout d'abord que le CSS3 n'est pas encore comprit par tout les navigateurs, mais dans le cas présent rien ne buggera, l'utilisateur passera simplement d'une image à demi transparente à une image opaque sans effet de transition.

    Codage : (x)html, css3
    Niveau : facile
    Compatibilité : Firefox, Safari, Chrome, Opera, IE9 (?)


    I. Changement d'opacité au survol :

    Le principe est d'avoir une image à faible opacité comme ceci :

    et qu'au survol de la souris on obtienne ceci (image en opacité forte ou totale) :


    Evidemment, l'inverse est aussi possible et vous pouvez très bien décider de baisser l'opacité au survol au lieu de l'augmenter. Pour faire cela, nous allons procéder par ordre et tout d'abord donner une "class" (un repère pour notre css) à l'image voulue.

    Code:
    <img src="http://img4.hostingpics.net/pics/546102ICONATOR98790e67f40061d0848c487f777a9297.png" class="sparrow" />

    J'ai donc nommée mon image "sparrow" Very Happy C'est grâce à ce nom que je vais pouvoir lui appliquer du css. Je rappelle que le css sur les forum se place dans :
    PA > Affichage > Couleurs > Feuille de style CSS.

    Voici le code css permettant de modifier l'opacité sous tout navigateurs :

    Code:
    .sparrow
    {
    opacity: 0.5;
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    filter: alpha(opacity=50);
    }

    Explications rapides :
    .sparrow => nom de l'image, indique que le css s'applique sur toutes les images portant ce nom
    toutes les autres lignes font la même chose : baisser l'opacité de moitié, mais certaines lignes sont comprises par certains navigateurs et pas d'autres, d'où l'importance de les mettre toutes afin que vous utilisateurs puissent avoir l'effet quel que soit leur navigateur.

    Vous constatez que votre image a une opacité réduite de moitié. Pour qu'au survol elle retrouve tout son opacité, il faut ajouter ceci à la suite du précédent code css :

    Code:
    .sparrow:hover
    {
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    }

    Le ":hover" signifie : "au passage de la souris" en langage css.
    A vous ensuite de changer les chiffres à votre guise, les chiffres étant compris entre 0 (opacité nulle=transparence) à 1 (opacité max.) sauf pour la dernière ligne où le chiffre varie de 0 à 100.

    + Et pou un lien ?
    Pour un lien, c'est la même chose, vous pouvez parfaitement placer une "class" (nom) sur un lien, de la façon suivante :


    Code:
    <a class="lien" href="#">Lien texte</a>


    II. Faire en sorte que le changement d'opacité soit progressif :

    Ah! Nous y voilà^^
    Alors vous aurez remarquez que lorsque vous avez réalisé la première étape, le changement d'opacité est brusque. L'image passe d'une opacité réduite à son opacité normal en un instant, sans transition. Or, les transitions, c'est joli, puis ça fait classe, c'est moderne... tout ça tout ça, bref, on adore.
    Alors comment faire pour que l'opacité change en douceur sans se prendre la tête avec trois codes différents, des templates à modifier et des scripts à comprendre ? Et bien on utilise le CSS3 !

    Reprenons notre exemple de tout à l'heure, avec l'image. Si je souhaite que mon image mette 2 secondes à avoir son opacité maximale, je vais ajouter dans mon code la mention "transition" dans la partie ".sparrow :hover" :

    Code:
    .sparrow:hover
    {
    opacity: 1;
    -moz-opacity: 1;
    -khtml-opacity: 1;
    filter: alpha(opacity=100);
    transition: opacity 2s;
    -moz-transition: opacity 2s;
    -o-transition: opacity 2s;
    -webkit-transition: opacity 2s;
    -htm-transition: opacity 2s;
    }

    Même principe que tout à l'heure, il y a beaucoup de lignes mais elles s'adressent chacune à un navigateur différent...
    Observez donc (si vous avez un navigateur à jour et pas IE^^) que votre transition est plus douce. Libre à vous de modifier le temps indiqué. Si vous le trouvez vraiment trop long, cette propriété accepte les "ms" (millisecondes).

    Maintenant, la transition est douce lorsque vous mettez la souris sur l'image, mais elle est brusque lorsque vous l'enlevez... Pour corriger cela, même principe, mais cette fois appliqué sur ".sparrow" (donc l'image sans survol).

    Code:
    .sparrow
    {
    opacity: 0.5;
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    filter: alpha(opacity=50);
    transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -htm-transition: opacity 1s;
    }

    J'ai mis 1 seconde, libre à vous de modifier ce temps.


    Voilà ! J'espère que vous avez tout compris, et que cette astuce vous sera utile Wink


    Dernière édition par Sparrow-style le Mer 13 Juin 2012 - 23:33, édité 3 fois


    Invité
    le Dim 3 Juin 2012 - 17:09
    Super tuto, j'ai tout compris et le rendu est super ! =D

    Merci pour le partage. =)
    FémininAge : 21Message(s) : 13
    Sunnie
    le Ven 15 Juin 2012 - 18:45
    Merci beaucoup du partage, comme quoi le CSS3 fait des merveilles (:
    FémininAge : 21Message(s) : 37

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Celska
    le Mer 27 Juin 2012 - 15:22
    Merci ! (:


    NORTH WITCH ♒
    image de l'avatar par Fernanda Suarez (c)
    MasculinAge : 44Message(s) : 80
    servity
    le Mar 10 Juil 2012 - 22:27
    salut,et merci du partage,est ce que ont peu changé la couleur de la transition???


    FémininAge : 20Message(s) : 129

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Insane paper-plane
    le Mar 13 Mai 2014 - 20:31
    merci beaucoup ! ♥
    FémininAge : 17Message(s) : 93
    Glow
    le Mar 24 Juin 2014 - 18:17
    Merci beaucoup ♥
    Oh, et, Togira Ikonoka, si tu veux cet effet sur les profils, il y a un LS pour faire ça juste là (:
    FémininAge : 19Message(s) : 18
    Diabolik
    le Mer 20 Aoû 2014 - 11:31
    Merci ! x3
    Contenu sponsorisé
    Aujourd'hui à 5:34

      La date/heure actuelle est Sam 3 Déc 2016 - 5:34