AccueilFAQRechercherMembresGroupesS'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.


    Joli bloc ombré, simple d'utilisation

    Partagez
    avatar
    Manumanu
    MasculinAge : 30Messages : 70

    le Sam 23 Aoû 2014 - 23:40

    Rendu final




    Codes


    Tout ce que vous avez à faire est de copier ceci dans votre CSS (Administration → Affichage → Couleurs → Feuille de Style CSS) :

    Code:
    .shadow-box {
       position: relative;
       border-radius: 2px;
       background: #fff;
       padding: 15px;
       margin: 10px;
       box-shadow: 0 1px 5px rgba(0,0,0,.25), 0 0 50px rgba(0,0,0,.1) inset;
    }
    .shadow-box:before {
       content: " ";
       box-shadow: 0 0 15px rgba(0,0,0,.6);
       position: absolute;
       left: 0;
       right: 0;
       top: 10%;
       bottom: 10%;
       border-radius: 10px/100px;
       z-index: -1;
    }

    Ensuite, il suffit d'utiliser ce HTML où vous le voulez dans votre forum (templates, pa, posts...) :

    Code:
    <div class="shadow-box">Mon texte</div>

    Et voilà !



    Eh.
    avatar
    Halloween
    FémininAge : 23Messages : 9744

    le Dim 21 Sep 2014 - 19:24

    Merci Wink

    avatar
    Dark Dream
    FémininAge : 25Messages : 79

    le Lun 29 Sep 2014 - 22:00

    C'est tout beau !
    Merci de faire partager ça !!
    Gedomaru
    FémininAge : 20Messages : 69

    le Dim 5 Oct 2014 - 20:29

    Merci du partage! 8D
    avatar
    Sentenza
    MasculinAge : 33Messages : 95

    le Mar 14 Oct 2014 - 13:32

    merci!
    avatar
    Concierge
    MasculinAge : 37Messages : 67

    le Ven 17 Oct 2014 - 10:10

    Bonjour et merci pour cette astuce.
    Moi ça ne donne pas ça du tout sur mon forum,
    c'est dommage !!



    Very Happy
    avatar
    Neva
    FémininAge : 26Messages : 18564

    le Sam 18 Oct 2014 - 22:14

    @Concierge a écrit:Bonjour et merci pour cette astuce.
    Moi ça ne donne pas ça du tout sur mon forum,
    c'est dommage !!

    Salut,

    Tu peux poster ici pour obtenir de l'aide avec ce tutto



     
    avatar
    Pelezinho
    MasculinAge : 18Messages : 81

    le Sam 18 Oct 2014 - 22:21

    cimer



    [MERCI D'INTRODUIRE SIGNATURE ORIGINALE ICI]
    avatar
    Eshon
    FémininAge : 36Messages : 191

    le Dim 7 Déc 2014 - 3:03

    Merci ! ^^
    avatar
    Susu-chan
    FémininAge : 27Messages : 75

    le Dim 7 Déc 2014 - 16:31

    Merci
    avatar
    Isiiis
    FémininAge : 24Messages : 39

    le Lun 13 Avr 2015 - 12:11

    Merci du partage, c'est vraiment un chouette code ♥
    avatar
    chichite
    FémininAge : 26Messages : 3

    le Dim 14 Juin 2015 - 22:53

    Merci beaucoup! c'est tout à fait ce que je cherchais, simple mais qui correspond totalement! :)
    avatar
    CHi1565456
    MasculinAge : 17Messages : 56

    le Dim 24 Jan 2016 - 16:23

    Merci !
    avatar
    Kelalin
    FémininAge : 25Messages : 1725

    le Dim 24 Jan 2016 - 17:23

    Merci pour le partage ! (o´∀`o)
    avatar
    ¨Lame Spirit
    FémininAge : 20Messages : 26

    le Dim 4 Juin 2017 - 22:49

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Dim 17 Déc 2017 - 5:14