AccueilFAQRechercherMembresGroupesS'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.


    Opacité progressive en CSS3 (sans js)

    Partagez
    Okhmhaka
    FémininAge : 31Messages : 31725

    le Dim 15 Mai 2011 - 19:02

    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



    Douce Heure
    FémininAge : 19Messages : 48

    le Dim 15 Mai 2011 - 20:38

    Juste une chose, ne faudrait-il donc pas refermer la balise "}" ?
    Parce que sa me fait une différence d'ouverture/fermeture chez moi >.<"
    Okhmhaka
    FémininAge : 31Messages : 31725

    le Dim 15 Mai 2011 - 20:42

    Euh... si il faut la refermer^^ Faute de frappe, désolé, et merci de me l'avoir dit^^



    Douce Heure
    FémininAge : 19Messages : 48

    le Dim 15 Mai 2011 - 21:13

    De rien :)
    Moi j'ai trouvé le moyen de le mettre dans tous mes noms de forum sans passer par "
    Code:
    <div class= " ... " >
    Very Happy
    Margii
    FémininAge : 18Messages : 84

    le Dim 15 Mai 2011 - 21:25

    Merci du partage, le code marche ;D !
    Okhmhaka
    FémininAge : 31Messages : 31725

    le Dim 15 Mai 2011 - 21:38

    Douce heure : oui par extension c'est ce qu'il faut faire de toute façon, mais méfies toi quand même car l'appliquer à une div te mettra aussi le contenu (texte, image, fond...) de ta div' en transparence ^^ Du coup c'est un très bon moment pour certaines div, mais ça le sera pas pour toutes en fait Wink



    Douce Heure
    FémininAge : 19Messages : 48

    le Lun 16 Mai 2011 - 18:02

    C'est pour sa que j'ai incrusté le code dans le .forumlink Very Happy
    Margii
    FémininAge : 18Messages : 84

    le Lun 16 Mai 2011 - 19:02

    Finalement j'ai un petit problème avec le code.
    Hier j'ai testé la première partie du code (donc celle qui est brusque). Aujourd'hui je teste la deuxième partie, et je pense m'être trompée quelque part car sur l'image, rien ne change.

    Edit : j'ai réglé mon problème seule, c'est bon.
    Le rendu est superbe ♥ !
    Okhmhaka
    FémininAge : 31Messages : 31725

    le Lun 16 Mai 2011 - 23:02

    Douce Heure : yep, parfait^^

    Margii : nickel alors^^



    Hypnos
    MasculinAge : 20Messages : 43

    le Lun 16 Mai 2011 - 23:12

    Perfecto ! Merci beaucoup en tous cas Very Happy



    Okhmhaka
    FémininAge : 31Messages : 31725

    le Lun 16 Mai 2011 - 23:22

    Avec plaisir Wink



    Miyashi
    MasculinAge : 26Messages : 745

    le Sam 4 Juin 2011 - 13:41

    Super Tuto





    Atlantis Member


    Invité, fait moi un cadeau ?
    Shiryû
    MasculinAge : 24Messages : 24

    le Dim 5 Juin 2011 - 12:08

    Merci beaucoup pour le tuto ! Depuis le temps que je cherchais une alternative au JS.
    Drickeem
    MasculinAge : 23Messages : 46

    le Dim 19 Juin 2011 - 13:13

    Merci infiniment ! C'est sublime *o*

    En plus j'ai trouvé le moyen de l'appliquer aussi sur le texte, les couleurs et même le text-shadow ! *O*



    Trend
    MasculinAge : 21Messages : 9

    le Sam 25 Juin 2011 - 15:12

    j'ai voulu l'appliquer au nom des forums (a.forumlink) mais ca n'a pas marché Sad

    peut être, étant sur un theme hitskin, il y avais déjà des modification qui annulent celles-ci ?
    Drickeem
    MasculinAge : 23Messages : 46

    le Sam 25 Juin 2011 - 15:19

    Si c'est la couleur du texte que tu veux modifier ce n'est pas l'opacité que tu dois modifier mais la couleur, tu ne dois mettre que les transitions pour ça sachant que ce n'est pas "opacity" cette fois mais "color" comme ceci :
    Code:
    transition: color 1s;



    Trend
    MasculinAge : 21Messages : 9

    le Sam 25 Juin 2011 - 17:12

    je veux un opacité progressive pour mes forums
    Romantic_Lucky
    FémininAge : 21Messages : 13

    le Mar 5 Juil 2011 - 15:01

    Premièrement, merci beaucoup pour ce tuto.
    Deuxièmement, comment on fait pour l'appliquer à toutes les images du forum ?
    (Je suis désolée, je ne suis pas très bonne avec les codes :uyu47: )



    BlueLife
    Swiff
    FémininAge : 22Messages : 24

    le Mar 5 Juil 2011 - 17:32


      Merci pour ce code Very Happy l'opacité marche très bien par contre la transition pour la couleur des liens ne marche pas chez moi :s je suppose qu'il ne faut pas seulement changer "opacity" par "color" ?...

      edit: hm non en fait ça ne marche que sur un seul de mes liens.. Ô.o
    Ectra
    MasculinAge : 24Messages : 13

    le Mer 27 Juil 2011 - 13:42

    Vraiment merci beaucoup! =D
    Ca faisait un petit moment que je voulais savoir faire cette opacité progressive! XD

    Edit: par contre, une idée pour l'appliquer sur un background-image?
    Drickeem
    MasculinAge : 23Messages : 46

    le Lun 1 Aoû 2011 - 17:20

    Pour le background-image je ne sais pas désolé. Par contre tu peux appliquer ça sur un background-color uniquement, car parfois dans une div il y a du texte mais lorsque l'on fait un opacity le texte se retrouve aussi opaque. Il faut donc appliquer ceci en css :

    Code:
    background-color: rgba(255,255,255,0.7);

    C'est donc le 0.7 qui représente l'opacité que vous pouvez modifier de 0.1 à 1. Avec ça vous aurez donc un fond transparent uniquement.



    Nico Robin
    FémininAge : 27Messages : 45

    le Mer 16 Nov 2011 - 0:22

    Merci beaucoup pour ce tuto ! =)
    Vive le CSS3 n'empêche !

    Sinon, comme 2 secondes étaient une durée trop importante (des petites images), j'ai mis un temps de transition plus bref. ^^



    Togira Ikonoka
    MasculinAge : 17Messages : 132

    le Mar 27 Mar 2012 - 2:58

    Merci beaucoup ! Comment on applique ça sur les avatars des profils ? :)



    Okhmhaka
    FémininAge : 31Messages : 31725

    le Mar 27 Mar 2012 - 16:48

    Il te faut modifier le template "viewtopic_body" en ajoutant un bloc qui entoure ton avatar puis mettre en css les codes donnés^^



    Togira Ikonoka
    MasculinAge : 17Messages : 132

    le Mer 28 Mar 2012 - 1:38

    Ah je suis nul en Templates T^T

    Merci quand même xD



    Contenu sponsorisé

    Aujourd'hui à 1:13


      La date/heure actuelle est Dim 11 Déc 2016 - 1:13