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
    Manumanu
    MasculinAge : 29Messages : 69

    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à !



    Halloween
    FémininAge : 22Messages : 9733

    le Dim 21 Sep 2014 - 19:24

    Merci Wink



    Je mets les voiles, que le vent te soit favorable matelot !
    Dark Dream
    FémininAge : 24Messages : 79

    le Lun 29 Sep 2014 - 22:00

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

    le Dim 5 Oct 2014 - 20:29

    Merci du partage! 8D
    Sentenza
    MasculinAge : 32Messages : 95

    le Mar 14 Oct 2014 - 13:32

    merci!
    Concierge
    MasculinAge : 36Messages : 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
    Neva
    FémininAge : 25Messages : 18542

    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



     
    Pelezinho
    MasculinAge : 17Messages : 72

    le Sam 18 Oct 2014 - 22:21

    cimer



    [MERCI D'INTRODUIRE SIGNATURE ORIGINALE ICI]
    Eshon
    FémininAge : 35Messages : 163

    le Dim 7 Déc 2014 - 3:03

    Merci ! ^^
    Susu-chan
    FémininAge : 26Messages : 67

    le Dim 7 Déc 2014 - 16:31

    Merci
    Isiiis
    FémininAge : 23Messages : 39

    le Lun 13 Avr 2015 - 12:11

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

    le Dim 14 Juin 2015 - 22:53

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

    le Dim 24 Jan 2016 - 16:23

    Merci !
    Kelalin
    FémininAge : 24Messages : 1401

    le Dim 24 Jan 2016 - 17:23

    Merci pour le partage ! (o´∀`o)
    Contenu sponsorisé

    Aujourd'hui à 21:18


      La date/heure actuelle est Dim 4 Déc 2016 - 21:18