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) : 31657

    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


    FémininAge : 16Message(s) : 3929

    Les Guildes
    Guilde des Conteurs:
    1/10  (1/10)
    Guilde des Illusionnistes:
    3/10  (3/10)
    Guilde des Architectes:
    0/10  (0/10)
    Clarisse
    le Ven 15 Aoû 2014 - 14:52
    Merci !


    Coucou Invité!
    FémininAge : 28Message(s) : 212

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    louha
    le Dim 17 Aoû 2014 - 16:31
    MErci **
    FémininAge : 19Message(s) : 177
    Piratress
    le Lun 18 Aoû 2014 - 0:15
    C'est super merci !^^
    FémininAge : 16Message(s) : 98
    Heartfilia
    le Lun 18 Aoû 2014 - 22:27
    Merciiii


    YOU HELLA SAVED MY LIFE
    - chloe price
    FémininAge : 16Message(s) : 147

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Klemmeria
    le Mar 19 Aoû 2014 - 15:02
    thanks


    FémininAge : 17Message(s) : 62
    smily
    le Mer 20 Aoû 2014 - 20:09
    Merci !
    FémininAge : 18Message(s) : 15
    Chanira
    le Jeu 21 Aoû 2014 - 15:07
    Merciiii c'est ce que je cherchais (partout je ne trouvais que des fondus x) mais l'image coulissante c'est pile ce qu'il me fallait) ! <3
    FémininAge : 16Message(s) : 297

    Les Guildes
    Guilde des Conteurs:
    1/10  (1/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    1/10  (1/10)
    Merwyn Arehdel
    le Ven 22 Aoû 2014 - 14:53
    Merci ! o/ ♥


    Just want to be yours.
    FémininAge : 25Message(s) : 137
    Filou
    le Sam 23 Aoû 2014 - 22:13
    Thank you :3
    MasculinAge : 36Message(s) : 57
    Le Dévoreur de temps
    le Lun 25 Aoû 2014 - 1:11
    merci du partage
    FémininAge : 16Message(s) : 48
    Sachikou
    le Jeu 28 Aoû 2014 - 3:21
    Trop cool ! :) Merciiii !


    FémininAge : 20Message(s) : 153

    Les Guildes
    Guilde des Conteurs:
    1/10  (1/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    3/10  (3/10)
    Frosty Blue
    le Jeu 28 Aoû 2014 - 13:53
    Merci
    FémininAge : 25Message(s) : 472

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Dydy
    le Jeu 28 Aoû 2014 - 16:06
    merci du partage!


    MasculinAge : 19Message(s) : 47
    Alancar
    le Jeu 28 Aoû 2014 - 16:28
    Merci beaucoup !
    FémininAge : 20Message(s) : 80
    Rudein
    le Jeu 28 Aoû 2014 - 21:49
    Merci, c'est exactement ce que je cherchais o/
    FémininAge : 33Message(s) : 146
    missphan
    le Ven 29 Aoû 2014 - 14:34
    Ca va m'aider à bien personnaliser merci
    MasculinAge : 15Message(s) : 34
    Poké_Eievui
    le Ven 29 Aoû 2014 - 15:21
    merci
    FémininAge : 24Message(s) : 117
    Kendall
    le Dim 31 Aoû 2014 - 16:39
    Merchii =3



    FémininAge : 14Message(s) : 148

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Kau
    le Mar 2 Sep 2014 - 7:33
    Merci !!
    MasculinAge : 45Message(s) : 92

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    mikalus
    le Mar 2 Sep 2014 - 23:50
    +1


    FémininAge : 22Message(s) : 28
    ShamRock
    le Mer 3 Sep 2014 - 11:26
    Merci ~
    FémininAge : 16Message(s) : 93
    Glow
    le Mer 3 Sep 2014 - 17:39
    Merci ouo
    FémininAge : 18Message(s) : 26
    Conradus
    le Sam 13 Sep 2014 - 18:07
    Merci!
    FémininAge : 21Message(s) : 99
    ( Lou' )
    le Sam 13 Sep 2014 - 20:32
    Merci **
    FémininAge : 31Message(s) : 20
    Valeriane
    le Dim 14 Sep 2014 - 15:13
    Suuuuperbe !
    Contenu sponsorisé
    Aujourd'hui à 15:28

      La date/heure actuelle est Ven 30 Sep 2016 - 15:28