AccueilRechercherS'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

    Manumanu
    Manumanu
    MasculinAge : 32Messages : 71

    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.
    Anonymous
    Invité

    le Dim 21 Sep 2014 - 19:24

    Merci Wink
    Dark Dream
    Dark Dream
    FémininAge : 27Messages : 79

    le Lun 29 Sep 2014 - 22:00

    C'est tout beau !
    Merci de faire partager ça !!
    avatar
    Gedomaru
    FémininAge : 22Messages : 70

    le Dim 5 Oct 2014 - 20:29

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

    le Mar 14 Oct 2014 - 13:32

    merci!
    Concierge
    Concierge
    MasculinAge : 39Messages : 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
    Neva
    FémininAge : 28Messages : 18565

    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
    Pelezinho
    MasculinAge : 20Messages : 91

    le Sam 18 Oct 2014 - 22:21

    cimer



    [MERCI D'INTRODUIRE SIGNATURE ORIGINALE ICI]
    Eshon
    Eshon
    FémininAge : 38Messages : 194

    le Dim 7 Déc 2014 - 3:03

    Merci ! ^^
    Susu-chan
    Susu-chan
    FémininAge : 29Messages : 80

    le Dim 7 Déc 2014 - 16:31

    Merci
    Isiiis
    Isiiis
    FémininAge : 26Messages : 39

    le Lun 13 Avr 2015 - 12:11

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

    le Dim 14 Juin 2015 - 22:53

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

    le Dim 24 Jan 2016 - 16:23

    Merci !
    Kelalin
    Kelalin
    FémininAge : 27Messages : 2085

    le Dim 24 Jan 2016 - 17:23

    Merci pour le partage ! (o´∀`o)
    ¨Lame Spirit
    ¨Lame Spirit
    FémininAge : 22Messages : 34

    le Dim 4 Juin 2017 - 22:49

    Merci !
    Soon
    Soon
    FémininAge : 32Messages : 87

    le Sam 28 Avr 2018 - 21:23

    merci
    Contenu sponsorisé


      La date/heure actuelle est Dim 17 Nov 2019 - 18:46