AccueilDernières imagesRechercherS'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.

Le Deal du moment : -50%
-50% Baskets Nike Air Huarache Runner
Voir le deal
69.99 €

    Images en noir et blanc qui s'affichent en couleur au survol

    Skitty
    Skitty
    FémininAge : 27Messages : 50

    Jeu 4 Sep 2014 - 0:49

    Ma demande



    Bonsoir !
    Alors, le tutoriel que je souhaiterais avoir concerne les images d'un forum. J'aimerais savoir comment mettre une image quelconque en noir et blanc sur notre forum, et qu'en passant son curseur sur celle-ci, les couleurs apparaissent !

    Exemple. Je vois cette image :
    Images en noir et blanc qui s'affichent en couleur au survol 970310LieuxAlentoursforumNB

    Je passe mon curseur dessus, et je vois :
    Images en noir et blanc qui s'affichent en couleur au survol 885583LieuxAlentoursforum

    Si possible, avec l'opacité qui monte. Pour donner un exemple plus clair, je vais donner le lien d'un forum.
    Ici:
    Tout en bas, dans les partenaires. Et aussi comme dans la PA. C'est ce que je veux !

    Et voilà. Je ne pense pas que ça soit quelque chose de très complexe, mais ça reste quelque chose d'intéressant à savoir !

    Merci d'avance !

    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Jeu 4 Sep 2014 - 1:05

    Re-bonsoir,

    Je vais te faire ça du coup, ça ne devrais pas prendre trop de temps, mais pas sûr que je poste cette nuit, peur de dire une connerie avec la fatigue toussa :hum: A défaut, cherche toujours dans les tutos déjà existent du côté des infosbulles voir si tu n'arrives pas à adapter toi-même et à faire ce que tu veux, en attendant au moins, si tu es impatiente Razz



    Skitty
    Skitty
    FémininAge : 27Messages : 50

    Jeu 4 Sep 2014 - 1:13

    Merci beaucoup de prendre le temps de faire ça ! *-*
    Je pense pouvoir attendre demain, ne t'en fais pas xD D'autant plus que j'ai déjà de la chance d'avoir une réponse si rapide...
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 4 Sep 2014 - 1:35

    Bouh!

    Si je peux me permettre de m'incruster, il y a ce tuto qui devrait t'aider à comprendre la notion de "hover" et "d'opacité".

    Pour ce qui est de faire passer l'image "noir et blanc" à "couleur" en utilisant une seule image, c'est possible avec une nouvelle fonctionnalité de CSS3 : les filtres. Plus précisémment, c'est l'utilisation du filtre "grayscale". D'ailleurs, ce serait peut-être mieux de juste faire un tuto sur les filtes (grayscale, blur, saturate, sepia, hue rotate, invert, brightness, contrast et opacity) puisque que le tuto de Sparrow est assez explicatif pour l'hover et l'opacité

    Il y a juste un petit bémol à savoir avant de s'embarquer dans les filtres :
    - L'opacité est la seule qui est acceptée par tous les navigateurs.
    - Pour ce qui est des autres filtres (incluant le "grayscale" que primsver utilise), ils ne sont pas supportés par Firefox et Explorer. Donc à utiliser avec une petite retenue peut-être.

    L'autre façon, c'est d'utiliser deux images différentes (donc obligation de grapher un peu), mais Alzufen en a déjà fait le tuto pendant que j'écrivais XD
    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Jeu 4 Sep 2014 - 2:12

    Que veux-tu, je suis trop rapide pour toi ! Je suis... Flash (MacQueen) XD

    Bref, j'avais pas songé aux filtres, faut avouer que j'ai pas l'habitude de m'en servir, il y a encore quelques notions en CSS3 que j'ignore, je comptais poster une version alternative de mon Tuto adapté à tous les navigateurs (mais ce demain) pour un effet progressif de transition.

    Sinon, pour ce qui est du tuto sur les filtres et tout, pourquoi pas, si ça dérange personne je le ferais peut-être demain aussi, je suis assez motivé, et ça me permettrais à moi aussi de découvrir plus en détail ce petit joujou Wink



    Skitty
    Skitty
    FémininAge : 27Messages : 50

    Jeu 4 Sep 2014 - 2:55

    Merci beaucoup alors !
    Si je peux apprendre les filtres en détail et m'aider dans ce que je souhaite obtenir, tant mieux :3
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Jeu 4 Sep 2014 - 3:51

    Rebouh!

    Bah en fait, j'ai parlé des filtres parce que c'était la façon utilisée sur primsvier, qui était l'exemple, mais même si c'est aussi simple que l'opacité, cela ne reste malheureusement pas supporté partout (comme ta première façon de faire dans ton tuto), alors ce n'est pas étonnant que cela soit plutôt méconnu u_u
    Je déclare officiellement qu'il faut convertir plus de gens à Chrome ! *lance des roches à son frère qui utilise encore IE* /sort

    Bref, hum, j'ai déjà commencé à faire un tuto sur les filtres, alors tu pourras le lire demain matin et me donner des commentaires Mister McQueen Razz

    Sinon, j'ai une petite idée de ce que tu vas écrire comme version alternative, mais j'ai quand même hâte de voir ^^

    Skitty: Tant mieux si tu aimes, c'est le but XD En plus, comme ça, tu pourras même choisir ta façon préférée de fonctionner ^^
    Alzufen
    Alzufen
    MasculinAge : 28Messages : 2103

    Sam 6 Sep 2014 - 0:43

    Bonsoir,

    Du coup c'est fini ici ? On peut archiver ? ^^



    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 16 Sep 2014 - 7:12

    Bonsoir,

    Le sujet est-il toujours d'actualité? N'oublie pas de mettre le crochet vert si c'est terminé ^^
    Le sujet sera archivé d'ici 9 jours s'il n'y a pas de nouvelles ~
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Lun 29 Sep 2014 - 0:02

    Bon eh bien comme cela fait longtemps qu'on a pas de nouvelles, j'archive ~



    Contenu sponsorisé


      La date/heure actuelle est Jeu 2 Mai 2024 - 14:00