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.

anipassion.com

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

    Partagez
    MasculinAge : 31Message(s) : 31652

    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
    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 : 103Message(s) : 595
    Darkyfrite
    le Lun 9 Jan 2012 - 22:07
    Preums ! Merci beaucoup c'est très utile Very Happy


    MasculinAge : 31Message(s) : 31652

    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 Mar 10 Jan 2012 - 0:31
    Avec grand plaisir Wink


    MasculinAge : 21Message(s) : 2288

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Taktiik
    le Mar 10 Jan 2012 - 12:47
    Merci Cap'tain ;D !

    Taktiik.
    MasculinAge : 27Message(s) : 125
    yaya-kun
    le Mar 10 Jan 2012 - 20:20
    merci
    FémininAge : 19Message(s) : 30
    Perle
    le Mer 11 Jan 2012 - 17:00
    Merci !!
    MasculinAge : 21Message(s) : 872
    Valar Morghulis
    le Mer 11 Jan 2012 - 17:33
    Amazing captain ! Tanks !


    FémininAge : 26Message(s) : 98
    Lou'
    le Mer 11 Jan 2012 - 21:37
    Roh! J'adore l'exemple! Hâte de voir ce que ça donne!
    Merciiii du tuto ^^
    FémininAge : 37Message(s) : 18
    coeurdelait
    le Jeu 12 Jan 2012 - 13:11
    merciiiiiii ham2
    MasculinAge : 43Message(s) : 14
    greg27
    le Jeu 12 Jan 2012 - 15:59
    hello,

    pas mal ça peu maider je suis juste en trin de retravailler mes descriptions . Very Happy

    merci

    je viens de l'installer mais au passage c'est le forum qui s'agrandit que faire merci
    MasculinAge : 31Message(s) : 31652

    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 Jeu 12 Jan 2012 - 17:20
    Adapte la taille des images peut-être, comme je l'explique. Si tu n'as rien modifié au code ça devrait fonctionner normalement^^


    MasculinAge : 43Message(s) : 14
    greg27
    le Jeu 12 Jan 2012 - 17:29
    voici le code

    Code:
    <div class="cate"><div class="cate_img"><img src="http://i41.servimg.com/u/f41/14/41/84/13/pppppp10.jpg" /></div><div class="cate_description"><font style="color: DarkRed;" size="3"><span style="font-family: Times New Roman;">Visiteurs ,membres , vous avez un probléme quelconque avec le forum , alors n'hésitez pas a venir poser vos questions</span></font><br><br><br><br><br><br><br><span style="font-family: Times New Roman; color: DarkRed;" class="genmed"><font style="color: DarkRed; font-family: Times New Roman;" size="3"><span class="genmed"></span></font></span><br></div></div><div style="clear: both;"></div>

    le css je n'ai rien touché
    MasculinAge : 31Message(s) : 31652

    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 Jeu 12 Jan 2012 - 17:41
    y'a beaucoup de
    et de balise "font" qui ne servent à rien... Gardes le code pur si tu n'es pas à l'aise en codage^^ et au pire demande juste un coup de main pour changer les couleurs dans la section "un problème en codage".


    MasculinAge : 43Message(s) : 14
    greg27
    le Jeu 12 Jan 2012 - 17:45
    le code pur ne fonctionne pas non plus il agrandit le forum , je croix plutôt probléme css ,avec le mien.
    MasculinAge : 21Message(s) : 14
    Dr. Karlos
    le Ven 13 Jan 2012 - 4:36
    Génial!
    FémininAge : 21Message(s) : 112
    Wanted
    le Ven 13 Jan 2012 - 5:45
    P'tit peu curieuse. :')
    Merci beaucoup ! ♥
    MasculinAge : 24Message(s) : 843
    Ziktaon
    le Ven 13 Jan 2012 - 14:18
    Merci capitaine pour cette astuce Wink





    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    MasculinAge : 55Message(s) : 44
    Nardco
    le Mar 6 Mai 2014 - 16:36
    Merci , c'est sympa !
    FémininAge : 23Message(s) : 142
    Rodeuse
    le Jeu 8 Mai 2014 - 15:01
    Merci.
    MasculinAge : 38Message(s) : 273

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Deed01
    le Ven 9 Mai 2014 - 5:50
    merci Very Happy
    FémininAge : 20Message(s) : 64
    Natsumi13
    le Dim 11 Mai 2014 - 17:52
    Merci encore >o<
    MasculinAge : 27Message(s) : 100
    Albator
    le Mer 14 Mai 2014 - 17:33
    Trop de beauté en toi Sparrow !  :captain: 
    MasculinAge : 13Message(s) : 57
    Titou2302
    le Mer 14 Mai 2014 - 18:46
    Merci ! Very Happy
    FémininAge : 19Message(s) : 82
    Rara
    le Mer 14 Mai 2014 - 19:37
    Merci Wink
    MasculinAge : 20Message(s) : 14
    Epoxy
    le Jeu 15 Mai 2014 - 0:26
    Merci
    Contenu sponsorisé
    Aujourd'hui à 1:54

      La date/heure actuelle est Jeu 29 Sep 2016 - 1:54