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.


    Opacité réduite sur ombre portée (opacity sur box-shadow)

    Partagez
    avatar
    Xplo-Sion
    FémininAge : 23Messages : 266

    le Mer 25 Avr 2012 - 7:29


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide





    Bonjour Very Happy

    Donc je vous fais mon second tutoriel qui va porter sur le thème "Opacité" par rapport à l'ombre portée (box-shadow). Divers style qui vont vous permettre de décorer votre forum :)

    Exemple :

    Bonjour, je suis un bloc avec une ombre portée qui a une opacité de 50%!


    Bonjour, je suis un bloc avec une ombre portée avec opacité normale, soit 100%




    Je vais vous expliquer le but de ce tutoriel. Vous connaissez tous le box-shadow, mais le seul hic, c'est que vous ne pouvez pas changer l'opacité. Bah dans ce tuto, vous allez apprendre comment on change ce détail là. Croyez moi ce petit plus peut être extrêmement utile parfois :)


    Voici le code que l'on doit mettre dans le CSS, ou dans le HTML :)

    Code:
    box-shadow: 4px 5px 20px 2px rgba(0, 0, 0, 0.5);


    /*Exemple dans le html*/
    <div style="box-shadow: 4px 5px 20px 2px rgba(0, 0, 0, 0.5);"></div>




    Explication :


    Passons maintenant aux éléments clés, nous allons parler des chiffres :

    Le 4px correspond au positionnement horizontal de l'ombre.

    Le 5px correspond au positionnement vertical de l'ombre.

    Le 20px correspond à l'élément flou, pour faire simple, ça étale tout l'ombre pour avoir une plus grande zone d'influence :)

    Le 2px correspond à la taille de l'ombre.

    RGBA correspond au code couleur, mais il y à un petit détail à prendre en compte :

    Code:
    rgba(0, 0, 0, 0.5);

    Le 0.5 correspond à l'opacité, si l'opacité est de 50%, vous allez obligatoirement mettre 0.5, si elle est de 20%, elle sera mise à 0.2.



    Une dernière chose, nous parlons la d'ombre externe, mais je vais vous donnez le code pour avoir l'ombre interne :)
    Code:
    box-shadow:inset 2px 2px 50px 20px rgba(0, 0, 0, 0.5);


    En espérant avoir pu vous être utile,

    Xplo-sion.



    PS : Sparrow style, le fondateur de Never Utopia a eu l'amabilité de créer cette section pour que l'on puisse partager avec vous nos connaissance, il serait donc normal que vous mettiez un lien sur votre forum comme quoi NU a participer à la construction du codage de votre forum.

    Merci .





    avatar
    Invité

    le Mer 25 Avr 2012 - 12:10

    Je suuuuuis la premiiiiiiière !!!!!
    Et bien merci Xplo ♥ (;

    Tu connais déjà mon ptit' lien (:
    avatar
    Xplo-Sion
    FémininAge : 23Messages : 266

    le Mer 25 Avr 2012 - 16:18

    Mais de rien Very Happy



    avatar
    Mitsuomi Takayanagi
    Age : 25Messages : 76

    le Mer 25 Avr 2012 - 21:05

    Merci



    avatar
    CapriceK
    FémininAge : 26Messages : 254

    le Lun 18 Juin 2012 - 19:04

    Merci pour le tuto!
    avatar
    Ruby.
    FémininAge : 24Messages : 50

    le Lun 30 Juil 2012 - 7:05

    Merci pour le tutoriel!
    avatar
    Nyan-cat
    FémininAge : 18Messages : 326

    le Jeu 2 Aoû 2012 - 13:37

    merci 8D



    avatar
    Slown
    FémininAge : 22Messages : 61

    le Ven 3 Aoû 2012 - 10:55

    Mercii Very Happy
    avatar
    Barbosa
    MasculinAge : 25Messages : 22

    le Mar 9 Oct 2012 - 15:36

    Merci .



    avatar
    Electro
    FémininAge : 21Messages : 30

    le Ven 23 Nov 2012 - 14:05

    Merci
    avatar
    double-face
    FémininAge : 27Messages : 17

    le Lun 22 Avr 2013 - 19:42

    merci :)
    avatar
    woops
    MasculinAge : 24Messages : 1

    le Mar 14 Mai 2013 - 13:44

    Merci pour ce tutoriel ^^
    avatar
    Invité

    le Dim 13 Oct 2013 - 6:15

    Et bien merci Xplo-sion ♥ (;
    avatar
    Alonely
    MasculinAge : 22Messages : 43

    le Sam 2 Nov 2013 - 15:12

    Merci
    avatar
    o~°Passion HELL
    FémininAge : 29Messages : 206

    le Sam 2 Nov 2013 - 17:01

    Merci :)



    ....
    avatar
    MonsterYuki
    FémininAge : 22Messages : 22

    le Lun 13 Jan 2014 - 0:30

    TY



    avatar
    Jill.
    FémininAge : 22Messages : 22

    le Mar 14 Jan 2014 - 9:24

    Merci
    avatar
    Coco-Lapin02
    MasculinAge : 49Messages : 147

    le Sam 9 Avr 2016 - 11:20

    Merci
    avatar
    Kelalin
    FémininAge : 24Messages : 1516

    le Mer 13 Avr 2016 - 11:37

    Merci pour le partage :)
    avatar
    Pokebip
    MasculinAge : 19Messages : 69

    le Dim 15 Mai 2016 - 21:03

    merci
    avatar
    Asarigolo
    MasculinAge : 24Messages : 29

    le Mer 13 Juil 2016 - 6:22

    Merci ^^
    avatar
    Hawk Lowell
    MasculinAge : 20Messages : 110

    le Mer 21 Déc 2016 - 19:18

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 21 Juil 2017 - 22:49