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

    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 : 26Message(s) : 93
    Oror
    le Jeu 12 Juin 2014 - 16:55
    merci !!! =)


    MasculinAge : 19Message(s) : 59
    Hashirama
    le Jeu 12 Juin 2014 - 19:29
    thx
    FémininAge : 23Message(s) : 17
    Hatawai
    le Jeu 12 Juin 2014 - 19:44
    Merci pour le tuto.
    Simple et pratique.
    FémininAge : 24Message(s) : 31
    Tsuki27
    le Ven 13 Juin 2014 - 20:09
    Oh mercii je voulais trop ça ! ♥



    - Joueuse RP sur MMORPG -
    FémininAge : 18Message(s) : 106

    Les Guildes
    Guilde des Conteurs:
    1/10  (1/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    0/10  (0/10)
    Liberty Grim
    le Ven 13 Juin 2014 - 20:24
    Merci !!! **
    FémininAge : 23Message(s) : 18
    Licmac.
    le Sam 14 Juin 2014 - 2:00
    merci (:
    FémininAge : 25Message(s) : 49
    Amiko
    le Sam 14 Juin 2014 - 15:18
    Merci une fois encore !
    MasculinAge : 27Message(s) : 132
    Hop80
    le Dim 15 Juin 2014 - 16:21
    super utile merci
    FémininAge : 25Message(s) : 58

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    LittleChan
    le Lun 16 Juin 2014 - 6:21
    Thanks Wink


    FémininAge : 22Message(s) : 32
    Summeryoid
    le Lun 16 Juin 2014 - 11:34
    Merci pour ce tuto o/


    FémininAge : 20Message(s) : 34
    Petite soeur
    le Lun 16 Juin 2014 - 17:59
    Merci pour le code ^^


    FémininAge : 21Message(s) : 35
    Aïda
    le Mer 18 Juin 2014 - 13:27
    merci
    FémininAge : 27Message(s) : 107

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Zélya
    le Jeu 19 Juin 2014 - 11:26
    bonjour, j'adore cette forme, je te remercie de mettre ce codage pour tous.
    Je me permets de le prendre


    FémininAge : 19Message(s) : 41
    Itachi28
    le Ven 20 Juin 2014 - 13:57
    Merci!
    FémininAge : 39Message(s) : 278

    Les Guildes
    Guilde des Conteurs:
    1/10  (1/10)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Ethernia
    le Sam 21 Juin 2014 - 12:54
    Merci d'avance
    MasculinAge : 17Message(s) : 5
    ewin
    le Dim 22 Juin 2014 - 0:38
    Genialisime Very Happy
    MasculinAge : 17Message(s) : 5
    ewin
    le Dim 22 Juin 2014 - 0:39
    Genialisime Very Happy
    FémininAge : 17Message(s) : 157
    Kyandi
    le Dim 22 Juin 2014 - 14:20
    Merci !





    FémininAge : 18Message(s) : 81
    elsa2607
    le Dim 22 Juin 2014 - 22:10
    Parfait juste ce que je cherchais merci !


    MasculinAge : 33Message(s) : 409
    P'tit loup
    le Mar 24 Juin 2014 - 16:07
    re merciiii ^^


    Age : 27Message(s) : 55
    Enko
    le Ven 27 Juin 2014 - 17:32
    Je suis curieuse de voir la technique que tu utilise pour cela. J'ai mon idée mais je suis curieuse :)
    FémininAge : 31Message(s) : 120
    Asaliah
    le Ven 27 Juin 2014 - 18:57
    Merci !


    FémininAge : 26Message(s) : 147
    Inoue Musaki
    le Sam 28 Juin 2014 - 18:53
    merci
    MasculinAge : 21Message(s) : 72
    skaera22
    le Dim 29 Juin 2014 - 17:39
    ouah :)
    FémininAge : 23Message(s) : 934

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    2/10  (2/10)
    Guilde des Architectes:
    0/10  (0/10)
    Bruleciel
    le Lun 30 Juin 2014 - 17:02
    Un grand merci pour ce libre service, dont je pense qu'il va m'être utile  Very Happy 


    Je brûle le ciel
    Contenu sponsorisé
    Aujourd'hui à 8:58

      La date/heure actuelle est Mar 27 Sep 2016 - 8:58