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.

Le Deal du moment : -48%
-44% sur la carte mémoire microSD SanDisk ...
Voir le deal
95.99 €

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

    Xplo-Sion
    Xplo-Sion
    FémininAge : 26Messages : 266

    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 .





    Opacité réduite sur ombre portée (opacity sur box-shadow) 121926034f5e3fbba2a48
    Anonymous
    Invité

    Mer 25 Avr 2012 - 12:10

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

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

    Mer 25 Avr 2012 - 16:18

    Mais de rien Very Happy



    Opacité réduite sur ombre portée (opacity sur box-shadow) 121926034f5e3fbba2a48
    Mitsuomi Takayanagi
    Mitsuomi Takayanagi
    Age : 29Messages : 76

    Mer 25 Avr 2012 - 21:05

    Merci



    Opacité réduite sur ombre portée (opacity sur box-shadow) Bannol1xj5
    CapriceK
    CapriceK
    FémininAge : 29Messages : 254

    Lun 18 Juin 2012 - 19:04

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

    Lun 30 Juil 2012 - 7:05

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

    Jeu 2 Aoû 2012 - 13:37

    merci 8D



    Opacité réduite sur ombre portée (opacity sur box-shadow) Nyan_cat_in_portals_by_ds_dna-d56j8yb
    Slown
    Slown
    FémininAge : 26Messages : 62

    Ven 3 Aoû 2012 - 10:55

    Mercii Very Happy
    Barbosa
    Barbosa
    MasculinAge : 29Messages : 22

    Mar 9 Oct 2012 - 15:36

    Merci .



    Opacité réduite sur ombre portée (opacity sur box-shadow) 1164232998
    Electro
    Electro
    FémininAge : 25Messages : 30

    Ven 23 Nov 2012 - 14:05

    Merci
    double-face
    double-face
    FémininAge : 31Messages : 18

    Lun 22 Avr 2013 - 19:42

    merci :)
    woops
    woops
    MasculinAge : 28Messages : 1

    Mar 14 Mai 2013 - 13:44

    Merci pour ce tutoriel ^^
    Anonymous
    Invité

    Dim 13 Oct 2013 - 6:15

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

    Sam 2 Nov 2013 - 15:12

    Merci
    o~°Passion HELL
    o~°Passion HELL
    FémininAge : 32Messages : 214

    Sam 2 Nov 2013 - 17:01

    Merci :)



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

    Lun 13 Jan 2014 - 0:30

    TY



    Opacité réduite sur ombre portée (opacity sur box-shadow) Firewo10
    Jill.
    Jill.
    FémininAge : 26Messages : 23

    Mar 14 Jan 2014 - 9:24

    Merci
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 52Messages : 167

    Sam 9 Avr 2016 - 11:20

    Merci
    Kelalin
    Kelalin
    FémininAge : 28Messages : 2455

    Mer 13 Avr 2016 - 11:37

    Merci pour le partage :)
    Pokebip
    Pokebip
    MasculinAge : 23Messages : 69

    Dim 15 Mai 2016 - 21:03

    merci
    Asarigolo
    Asarigolo
    MasculinAge : 28Messages : 29

    Mer 13 Juil 2016 - 6:22

    Merci ^^
    Hawk Lowell
    Hawk Lowell
    FémininAge : 24Messages : 134

    Mer 21 Déc 2016 - 19:18

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Lun 17 Mai 2021 - 20:34