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.


    [CSS3] Catégories aux descriptions cachés derrière l'illustration

    Partagez
    MasculinAge : 31Message(s) : 31644

    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 Lun 9 Jan 2012 - 22:05
    Rappel du premier message :

    Description de la catégorie cachée sous l'image et visible au survol de celle-ci

    Derrière ce titre qui peut paraitre assez flou se trouve un petit effet réalisé uniquement en HTML & CSS3 qui consiste à mettre le texte descriptif d'une catégorie derrière l'image illustrant cell-ci, et au survol de l'image de faire apparaitre ce texte.
    Mon explication est encore plus floue que mon titre ? Bon XD Un petit aperçu aidera dans ce cas là :

    >>> lien aperçu <<<

    Plutôt sympa non ?

    Si vous voulez installer ce système sur votre forum c'est très simple, je vous donne les codes à utiliser et je vous explique comment les utiliser, mais en contre partie, j'attends de vous que vous mettiez le lien de Never-Utopia quelque part en crédit sur votre page d'accueil, et ce de façon lisible (j'entends donc pas en police 4 quoi XD).
    Je vous en remercie par avance, c'est la moindre des choses lorsque l'on utilise le travail des autres^^.


    Le code CSS

    Il est à placé dans votre feuille css de forum (Panneau d'admin > Affichage > Couleurs > (onglet) Feuille de style CSS).




    Le code HTML

    Il sera à mettre dans chaque descriptions de catégorie ou de forum où vous souhaitez mettre cet effet-là. Donc dans votre PA, lorsque vous créez/modifiez une catégorie ou un forum, c'est dans le cadre "description" qu'il faut mettre ce code. Pensez à activer l'html et non le BBcode par contre.



    L'adresse en début de code c'est bien sûr l'image, et le texte qui ressemble à du Latin c'est votre description.


    ATTENTION :
    Comme vous pourrez le constater, ce code est fait pour une image de 400x120 pixels. Mais il est évident que vous pouvez mettre une autre taille d'image (pas trop petite sinon votre description sera galère à lire...) mais il faudra changer les tailles indiquées dans le code CSS Wink

    Il va de soit que ce système peut être utilisé pour beaucoup d'autres choses, comme par exemple l'avatar du staff sur la PA qui au survol découvre la description de ce membre-là...

    Quelle que soit l'utilisation, n'oubliez pas le crédit ! Wink



    >>> postez à la suite pour voir les codes.


    Dernière édition par Sparrow-style le Jeu 28 Mar 2013 - 14:09, édité 2 fois


    MasculinAge : 18Message(s) : 39
    Ozymandias
    le Mer 17 Fév 2016 - 19:22
    Merci
    FémininAge : 26Message(s) : 51
    LOUVE ☽
    le Dim 21 Fév 2016 - 22:21
    Merci, c'est très sympa Very Happy
    FémininAge : 19Message(s) : 48
    Sapphire
    le Mer 24 Fév 2016 - 0:03
    Meerci !
    MasculinAge : 17Message(s) : 47
    KTMiz
    le Mer 24 Fév 2016 - 0:20
    merci


    FémininAge : 21Message(s) : 43
    Sophia
    le Jeu 25 Fév 2016 - 13:20
    Très utile et pratique, merci !
    FémininAge : 23Message(s) : 149
    Saya Shirayuki
    le Sam 27 Fév 2016 - 10:34
    Merci beaucoup !! :love:
    MasculinAge : 23Message(s) : 20
    Requiem
    le Dim 6 Mar 2016 - 14:05
    Merciii cheers
    MasculinAge : 18Message(s) : 16
    Hynel
    le Ven 11 Mar 2016 - 15:30
    Merci Very Happy
    FémininAge : 29Message(s) : 268
    Necrolythia
    le Sam 12 Mar 2016 - 10:41
    superrr merciiii


    Rien n'est tout noir ou blanc dans ce monde, il n'y a que des milliers de nuances grises
    MasculinAge : 19Message(s) : 71
    Banhjo
    le Dim 13 Mar 2016 - 4:06
    Bien Vu
    FémininAge : 27Message(s) : 74
    Thessia
    le Mar 15 Mar 2016 - 21:30
    Merci beaucoup depuis le temps que je cherche à faire ça ^^


    Ce n'est pas parce que tu ne le vois pas que ce n'est pas réel,
    Ce n'est pas par ce que tu n'y arrive pas que ce n'est pas possible.
    MasculinAge : 16Message(s) : 71

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Unleash
    le Lun 21 Mar 2016 - 13:34
    ty
    MasculinAge : 16Message(s) : 71

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Unleash
    le Lun 21 Mar 2016 - 13:35
    ty
    MasculinAge : 48Message(s) : 146
    Coco-Lapin02
    le Mar 22 Mar 2016 - 20:27
    Merci
    FémininAge : 26Message(s) : 158
    Kimberlay *
    le Ven 25 Mar 2016 - 15:16
    Merci
    FémininAge : 28Message(s) : 71
    Kabrina Lestrange
    le Dim 27 Mar 2016 - 15:44
    Owii je veux voir! *-*
    FémininAge : 22Message(s) : 148
    Marion Navi
    le Dim 27 Mar 2016 - 22:55
    merci
    FémininAge : 36Message(s) : 69
    Kilda
    le Mer 30 Mar 2016 - 9:41
    merci
    FémininAge : 25Message(s) : 44
    blomkvist
    le Jeu 31 Mar 2016 - 1:28
    merci du partage, je vais essayé si il est possible de faire cela non pas pour cacher une description mais pour cacher le bouton nouveau message,merciii du partage :love:


    ☆ once upon a dream ☆
    I know you, I walked with you once upon a dream. I know you, that look in your eyes is so familiar a gleam. And I know it's true that visions are seldom all they seem. But if I know you, I know what you'll do. You'll love me at once, the way you did once upon a dream. ~ byendlesslove.
    FémininAge : 16Message(s) : 51
    Wolf Valley
    le Sam 2 Avr 2016 - 22:21
    Merci
    FémininAge : 36Message(s) : 77
    Susan Storm
    le Dim 3 Avr 2016 - 21:34
    Merci !
    MasculinAge : 26Message(s) : 30
    ldavidl
    le Mar 5 Avr 2016 - 11:54
    C'est bien comme ca! MErci et bravo à toi!
    FémininAge : 21Message(s) : 90
    Ishyyn
    le Sam 9 Avr 2016 - 18:31
    Merci :3
    FémininAge : 15Message(s) : 146

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Eerie Ange's
    le Mer 13 Avr 2016 - 21:37
    Merci !
    FémininAge : 16Message(s) : 23

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    MortimerFire
    le Dim 17 Avr 2016 - 2:17
    Merci! Utile, et beau.
    Contenu sponsorisé
    Aujourd'hui à 10:45

      La date/heure actuelle est Lun 26 Sep 2016 - 10:45