• Propriété: Les ombres

    Vous pouvez appliquer une ombre portée à vos éléments block et vos éléments inline.

    box-shadow

    La propriété box-shadow s'applique sur un bloc, c'est à dire que la "boite" contenant l'élément ciblé aura une ombre.

    selecteur {
         box-shadow : Xpx Xpx Xpx Xpx #COLOR inset;
    }

    Décortiquons ceci :

    Le premier Xpx indique le décalage horizontal vers la gauche de l'ombre 
    Le deuxième Xpx indique le décalage vertical vers le bas
    Le troisième permet de gérer le flou.
    Le quatrième correspond à la taille de l'ombre.
    #COLOR indique bien évidemment la couleur de l'ombre
    inset est une valeur optionnel permettant de définir si l'ombre est externe ou interne

    boite_jaune {
         box-shadow: -4px 1px 2px -1px black;
    }

    .

    Dans l'exemple ci-dessus, j'ai appliqué une ombre portée à mon objet "boite_jaune".
    En appliquant une valeur négative pour le décalage horizontal, mon ombre se place à droite. Si vous voulez que l'ombre aille vers le haut, il faut appliquer une valeur négative au décalage vertical.

    boite_jaune {
         box-shadow: -4px 1px 2px -1px black inset;
    }

    .

    Même exemple, en rajoutant cette fois la valeur inset pour que l'ombre se trouve à l'intérieur de la boite. Vous remarquez que l'emplacement de mes ombres sont inversé par rapport à mon premier exemple, gardez cela en tête lorsque vous utilisez des ombres internes et des ombres externes.

    text-shadow

    La propriété text-shadow ressemble beaucoup à box-shadow

    selecteur {
         text-shadow : Xpx Xpx Xpx #COLOR;
    }

    Comme son nom l'indique, cette propriété s'adresse au texte. L'ombre portée suivra les contours des lettres.

    texte_ombre {
         box-shadow: -1px -1px 0px black;
    }

    Du texte avec une ombre

    Cette propriété est très utile pour donner un effet de relief à vos textes.

    Ombres multiples

    Vous pouvez appliquer plusieurs ombres à un élément. Il suffit simplement de les séparer par des virgules :

    selecteur {
         box-shadow : Xpx Xpx Xpx #COLOR, Xpx Xpx Xpx #COLOR;
    }


    Tags Tags : , , , ,
  • Commentaires

    1
    EtoileSosso Profil de EtoileSosso
    Lundi 29 Août 2011 à 09:48

    Arigato Gozaïmasu.

    2
    Lundi 29 Août 2011 à 10:08

    De rien =)

    3
    Dimanche 4 Septembre 2011 à 10:07

    ça marche pas pour moi. :'(

    4
    EtoileSosso Profil de EtoileSosso
    Dimanche 4 Septembre 2011 à 10:07

    T'es sûr d'avoir mis un bon sélecteur  ?

    5
    Dimanche 4 Septembre 2011 à 10:13

    oui je pense, mais ça me met : Le code CSS comporte une erreur, merci de le corriger avant d'enregistrer.

    c'est énervant.

    6
    Dimanche 4 Septembre 2011 à 10:16

    Quand ça met "Le code CSS comporte une erreur, merci de le corriger avant d'enregistrer" c'est que tu as oublié une accolade. Relis ton code ;) 

    7
    Dimanche 4 Septembre 2011 à 10:17

    ah ok je vais essayer.

    Mais on doit mettre de mot "selecteur"?

    8
    Dimanche 4 Septembre 2011 à 10:21

    Non non. Le "sélecteur" c'est l'élément auquel tu veux appliquer ta propriété, par exemple le texte. Si tu veux mettre une ombre sous un texte, tu écris (par exemple):

    p {text-shadow : 1px 1px 3px white}

    Ce qui qui fait que tout les textes de ton blog auront une ombre blanche. Va voir les sélecteur généraux ou les sélecteur eklablog si tu les connais pas.

    9
    Dimanche 4 Septembre 2011 à 10:28

    ah ok c'est pour ça que ça marchait pas! Je mettait le mot "selecteur" XD

    10
    Dimanche 4 Septembre 2011 à 10:30

    MEEEEEERCIIIII  !!!!

    ça marche!

    11
    Dimanche 4 Septembre 2011 à 10:33

    XD de rien

    12
    Mardi 4 Octobre 2011 à 19:13

    EDIT pour les ombre interne (ma trouvaille du jour XD)

    13
    Vendredi 4 Novembre 2011 à 15:15

    exemple:

    sélecteur {text-shadow: 3px -2px 5px black;}

    Si j'écrit ça, j'aurais une ombre noire 3px en dessous et 2px à droite du texte

    14
    Mardi 22 Novembre 2011 à 23:51

    Merci pour cette astuce aussi

    15
    Claude Beacons Profil de Claude Beacons
    Mercredi 23 Novembre 2011 à 20:03

    et comment un ombre dans les menus ??

    16
    Claude Beacons Profil de Claude Beacons
    Mercredi 23 Novembre 2011 à 20:27

    je voix pas l'ombre qu'on je le met x.x

    17
    Mercredi 23 Novembre 2011 à 20:39

    Tu peux me montrer ton code?

    18
    Claude Beacons Profil de Claude Beacons
    Mercredi 23 Novembre 2011 à 20:41

    c'est a moi que tu parle ?? x.x

    19
    Mercredi 23 Novembre 2011 à 20:44

    Ben oui ;)

    20
    Claude Beacons Profil de Claude Beacons
    Mercredi 23 Novembre 2011 à 20:48

    Desolé 'tete en l'air'

    le voila: #menu1 {box-shadow: 5px 5px 5px;}

                                               #menu2 {box-shadow: 5px 5px 5px;}

    au debut j'en ai mis 10 mais voila j'ai remis 5

    21
    Mercredi 23 Novembre 2011 à 20:51

    Tu as oublié la couleur ;)

    #menu1 {box-shadow: 5px 5px 5px #COULEUR;}
    #menu2 {box-shadow: 5px 5px 5px #COULEUR;} 

    Remplace COULEUR par un code couleur hexa ou #COULEUR par le nom anglais de la couleur que tu veux =)

    22
    Mercredi 23 Novembre 2011 à 20:56

    J'avais pas vu que tu l'avais oublié ^^'

    23
    Claude Beacons Profil de Claude Beacons
    Mercredi 23 Novembre 2011 à 20:57

    le code ca marche pas x.x

    chez pas quekil a

    24
    Mercredi 23 Novembre 2011 à 21:05

    Ben... Chez moi il marche ^^''

    Tu a mis quoi comme couleur?

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    25
    Claude Beacons Profil de Claude Beacons
    Mercredi 23 Novembre 2011 à 21:06
    26
    Mercredi 23 Novembre 2011 à 21:13

    Donc tu as mis:

    #menu1 {box-shadow: 5px 5px 5px black;}
    #menu2 {box-shadow: 5px 5px 5px black} 

    Et ça marche pas? Bizarre...
    Essaie comme ça:

    #menu1 {box-shadow: 5px 5px 5px black;
                    -moz-box-shadow: 5px 5px 5px black;
                    -webkit-box-shadow: 5px 5px 5px black;}

    #menu2 {box-shadow: 5px 5px 5px black;
                     -moz-box-shadow: 5px 5px 5px black;
                     -webkit-box-shadow: 5px 5px 5px black; } 

    27
    Claude Beacons Profil de Claude Beacons
    Mercredi 23 Novembre 2011 à 21:14

    Sa marche *Q*

    28
    Mercredi 23 Novembre 2011 à 21:17

    Nikel =)

    Je pensais que ça irais sans les préfixes les ombres, mais apparement non ^^' J'ai plus qu'a corriger cet article...

    29
    Claude Beacons Profil de Claude Beacons
    Mercredi 23 Novembre 2011 à 21:21

    Ah oui ^^

    chez pas pk sa n'a pas marcher au debut

    peux etre mon blog est fou u_u''

    30
    Mercredi 23 Novembre 2011 à 21:29

    Non, c'est un problème de navigateur. Tu dois avoir une vieille version de chrome ou mozilla

    31
    Claude Beacons Profil de Claude Beacons
    Mercredi 23 Novembre 2011 à 21:32

    Ah... euhh j'en ai pas la vieille xwx

    32
    Mercredi 23 Novembre 2011 à 21:33

    Ah bah ja sais pas alors ^^'

    'fin, au moins, ça marche maintenant =)

    33
    Claude Beacons Profil de Claude Beacons
    Mercredi 23 Novembre 2011 à 21:34

    c'est l'essentiel Ôô

    34
    Jeudi 24 Novembre 2011 à 01:36

    -Edit- Je me suis auto-répondu à mes questions xD donc je remercierais juste pour ce blog fabuleux <3333333

    35
    Jeudi 24 Novembre 2011 à 06:52

    Ah zut me revoilà :x Ce serait pour te demander Nagalia, si par hasard tu connaitrais le nom du sélecteur du menu de l'en-tête ? parce que j'ai mis un ombrage blanc sous mes liens mais maintenant il apparait aussi sous les liens invisibles sous l'entête et cela fait visuellement une boule blanche qui apparait sous les menus urm urm xD je pensais à donner une propriété aux liens en-tête pour lui dire de pas prendre en compte d'éventuels effet....?


    Trouvé! xD Bon pas le selecteur du menu de l'en-entête mais en modifiant celui des articles avec,

    .module_contenu a:hover{text-shadow 1px 1px 3px white}

    36
    Jeudi 24 Novembre 2011 à 18:20

    Le menu de l'en tête c'est tout simplement

    #menu {propriété: valeur;}

    J'ai pas tout compris ton problème par contre ^^'

    37
    garbawi Profil de garbawi
    Mercredi 7 Décembre 2011 à 16:28

    Bonjour, je souheterais mettre une ombre au titre de mon blog qui se trouve dans le header, seulement aucun des codes pour les ombres ne veulent fonctionner...une idée?

     

    cordialement,

    Garbawi

    38
    Mercredi 7 Décembre 2011 à 16:37

    As-tu utilisé le bon sélecteur? Celui du titre du blog c'est:

    #titre_header {text-shadow: Xpx Xpx Xpx #COULEUR;}

    39
    garbawi Profil de garbawi
    Mercredi 7 Décembre 2011 à 16:44

    j'ai mis ca, mais quand je remplace les X par des chiffres, ces derniers qui étaient violet deviennent alors vert. Et l'ensemble ne marche pas... aucunes ombres...

    40
    Mercredi 7 Décembre 2011 à 16:46

    C'est normal qu'ils deviennent vert ;)

    Tu peux me montrer ton code?

    41
    garbawi Profil de garbawi
    Mercredi 7 Décembre 2011 à 16:52

    #titre_header {text-shadow: 15px 0px 40px #black;} aprés les chiffres ont aléatoires, car aucuns ne marche pourtant j'ai suivi le tuto !!

    42
    Mercredi 7 Décembre 2011 à 17:24

    Les chiffres sont juste, c'est la couleur qui bug ;)

    Il y a deux possibilité pour les couleur:

    soit en mettant le nom de la couleur en anglais. Dans ce cas, on écrit simplement black, sans le #
    soit en utilisant les couleur hexa, ou il faut érire #000000

    ça revient au même, mais on n'a plus de choix de nuance avec les couleur hexa ;) 

    43
    garbawi Profil de garbawi
    Mercredi 7 Décembre 2011 à 17:31

    ca fonctionne pas non plus lol! grrrr

    44
    Mercredi 7 Décembre 2011 à 17:35

    Euh... bizarre là... Réduit le 40px à 10-15 pour y voir quelque chose.

    45
    Mercredi 7 Décembre 2011 à 17:43

    Sinon, rajoute ça:

    -moz-text-shadow: Xpx Xpx Xpx COULEUR;
    -webkit-text-shadow: Xpx Xpx Xpx COULEUR; 

    Les valeurs doivent être les même. 

    46
    garbawi Profil de garbawi
    Mercredi 7 Décembre 2011 à 17:44

    rien non plus ... :s , je t'ai permis d'aller sur mon blog si tu veux aller voir ( pour le coup j'ai supprimé le code )... grrr...

     

    47
    garbawi Profil de garbawi
    Mercredi 7 Décembre 2011 à 17:46
    48
    Mercredi 7 Décembre 2011 à 17:47

    Je vais voir ça alors

    EDIT: hm... il me faut la perm 3 pour changer le thème ^^'

    49
    garbawi Profil de garbawi
    Mercredi 7 Décembre 2011 à 17:57

    je te fais ca... essaye de voir le probléme du code et si yen a un qui marche ( qui fait une ombre derriére le titre du header) laisse le, je modiferais alors selon mes gouts! thanks!

    50
    Mercredi 7 Décembre 2011 à 18:12

    C'est bon.

    Si ça marche pas cette fois, je comprend pas... Testé avec Chrome, Firefox, Safari, Opera et IE

    Si tu utilise IE, ce n'est pas du tout la même chose pour faire les ombres... (navigateur qui veut pas faire comme tout le monde et qui a ses code spécifique --')

    51
    Mercredi 7 Décembre 2011 à 18:21

    avec les préfixe -webkit -moz et -o, ça fonctionne avec les vieux normalement (bon, pas la première version non plus XD)

    Mais le mieux c'est d'utiliser les dernières versions de chrome, firefox ou safari quand même ^^

    52
    garbawi Profil de garbawi
    Mercredi 7 Décembre 2011 à 18:24

    merci beaucoup Nagalia, et oui c'est que j'ai IE ( bouh je sais) !!!!! merci merci

     

    53
    Mercredi 7 Décembre 2011 à 18:29

    De rien =)

    Si tu veux modifier des truc, le dernier code est pour IE

    color='#000000'Direction=110Strength=9

    je sais pas si ça marche avec le nom de la couleur en anglais pour la couleur ^^'

    direction: valeur comprise entre 0 et 360, c'est la direction dans laquelle est projeté l'ombre

    strength: pour la taille de l'ombre

    Même avec ça, le rendu n'est pas le même que sur les autre navigateur ^^'

    54
    Yuun Profil de Yuun
    Vendredi 30 Décembre 2011 à 18:49

    Je n'arrive pas a mettre ce CSS, bon c'est vrai que je suis nul,  j'ai bien tout lut mais cela ne marche pas TwT

    55
    Vendredi 30 Décembre 2011 à 19:02

    Tu peux me montrer ton code?

    56
    Yuun Profil de Yuun
    Vendredi 30 Décembre 2011 à 19:05

    sélecteur {box-shadow2px 2px 0px #black;}

    >.<

    57
    Vendredi 30 Décembre 2011 à 19:16

    Merci de lire l'introduction

    Bon... Il y a deux problème dans ton code:

    1- Il faut que tu remplace "sélecteur" par le nom de l'élément auquel tu veux appliquer l'effet

    Sélecteur Généraux ou Sélecteur EklaBlog

    2- Sois tu met le nom de la couleur en anglais, auquel cas tu enlève le #
        sois tu met un code couleur hexa, mais pas les deux en même temps ;)
    => Couleur 

    58
    Yuun Profil de Yuun
    Vendredi 30 Décembre 2011 à 19:17

    Merci >.< Je suis vraiment trop BAKA ! Pardon du dérangement !! 

    59
    Vendredi 30 Décembre 2011 à 19:21

    De rien =)

    T'inquiète, c'est fait pour ça les com' ;)

    60
    Yuun Profil de Yuun
    Vendredi 30 Décembre 2011 à 19:24
    61
    Vendredi 30 Décembre 2011 à 20:08

    Merci beaucoup .

     

    62
    x-manga-love-x Profil de x-manga-love-x
    Mercredi 18 Janvier 2012 à 12:11

    sa marche sa #menu2 {box-shadow: 5px 5px 5px white;} merci mais sa .module_contenu {box-shadow: 5px 5px 5px white;} sa marche pas prq

    63
    Mercredi 18 Janvier 2012 à 17:14

    A première vu, ça devrait marcher... Tu utilise quoi comme navigateur?

    64
    x-manga-love-x Profil de x-manga-love-x
    Mercredi 18 Janvier 2012 à 17:39

    mozila firefox normal

    65
    Mercredi 18 Janvier 2012 à 18:01

    Bizarre, j'ai testé, ça marche ^^'

    Essaie comme ça:

    #menu2 {box-shadow: 5px 5px 5px white;
    -moz-box-shadow: 5px 5px 5px white;
    -webkit-box-shadow: 5px 5px 5px white;
    -o-box-shadow: 5px 5px 5px white; }

    .module_contenu {box-shadow: 5px 5px 5px white;
    -moz-box-shadow: 5px 5px 5px white;
    -webkit-box-shadow: 5px 5px 5px white;
    -o-box-shadow: 5px 5px 5px white; }

    Pour les vieilles versions de firefox, chrome, safari et opera ;)

    66
    x-manga-love-x Profil de x-manga-love-x
    Mercredi 18 Janvier 2012 à 18:06

    merci sa marche bien merci beaucoup

    67
    Mercredi 18 Janvier 2012 à 18:06

    De rien =)

    68
    fairytal
    Jeudi 19 Janvier 2012 à 10:52

    slt nagalia moi j'arrive pas je voudrai un ombre noir a tout les texte ( phrase) j'ai essayer sa mais sa marche pas :     p {text-shadow : 5px 5px 5px black}   prq ?

    69
    fairytal
    Jeudi 19 Janvier 2012 à 12:32

    oh merci mimille je vais essayer ;)

    70
    fairytal
    Jeudi 19 Janvier 2012 à 13:44

    sa marche pas :( aussi

    71
    Jeudi 19 Janvier 2012 à 18:20

    @Mimille511 : C'est pour le texte son problème, donc "text", pas "box" ;)

    {text-shadow 5px 5px 5px black;
    -moz-text-shadow: 5px 5px 5px black;
    -webkit-text-shadow: 5px 5px 5px black;
    -o-text-shadow: 5px 5px 5px black;  
    }

    ça marche comme ça fairytal?

    72
    fairytal
    Vendredi 20 Janvier 2012 à 08:11

    merci enormemant nagalia tes la championne en graph et ccs moi chui pas du tout douée pour le ccs et html ;) bsx a+ ( j'aimerait beaucoup devenir ta partenaire si ses possible ) bye

    73
    fairytal
    Vendredi 20 Janvier 2012 à 15:04

    si tu veut bien ?

    74
    x-manga-love-x Profil de x-manga-love-x
    Jeudi 9 Février 2012 à 12:25

    sa marche pas :( dit nagalia esqu'ils ya un code pour faire un ombre interne sur toute les texte du blog ?

    75
    x-manga-love-x Profil de x-manga-love-x
    Jeudi 9 Février 2012 à 12:26

    et aussi esque tu aurai entendu parler que quand on mets baucoup trop de ccs apres tout le ccs s'efface ses vrai ?

    76
    Jeudi 9 Février 2012 à 18:23

    Je ne sais pas ce que tu appelle "beaucoup trop de css", mais t'inquiète, ça ne s'efface pas ;)

    Bon code mimille511 ^^
    Mais je ne vois pas trop l'intéret de mettre une ombre interne sur du texte ^^' 

    77
    x-manga-love-x Profil de x-manga-love-x
    Dimanche 12 Février 2012 à 19:27

    merci les fille ;)

    78
    Jeudi 23 Février 2012 à 10:07

    Comment on mes une ombre sur un text lors du survol ???

    Et Nagalia , c'est quoi ton code pour le titre des rubrique ??(texte noir ombre verte , lors du survol c'est vert...etc)

    79
    Jeudi 23 Février 2012 à 10:42

    J'y suis arriver merci !!^^

    80
    Jeudi 23 Février 2012 à 10:48

    Merci pour l'explication mimille =)
    (plus besoin de bosser sur ce blog moi XD)

    81
    Jeudi 23 Février 2012 à 10:49

    xD !!^^Est-ce que je devrais ajouter des trucs a mon blog ??(Celui sur Les Légendaires )

    82
    Jeudi 23 Février 2012 à 10:52

    Alors ???

    83
    Jeudi 23 Février 2012 à 12:02

    ok

    Comment tu fait pour que les infos sur l'auteur soit coller au titre de l'article , et que ce soit a gauche ??

    84
    Jeudi 23 Février 2012 à 20:16

    Ou sa ?

    85
    Jeudi 23 Février 2012 à 20:33

    comment on fai pour  ke lors du survol de la barre eklablog,,et qon clic le text soit lumineux?

    86
    Jeudi 23 Février 2012 à 20:37

    ok mercci !!!

    87
    Jeudi 23 Février 2012 à 20:47
    88
    Jeudi 15 Mars 2012 à 12:49

    Tu pourrais écrire ici ce qu'il faut mettre comme CSS pour faire une ombre blanche derrière le texte des articles ?

    89
    Jeudi 15 Mars 2012 à 20:08

    Je ne te donne pas le code parce que le but de ce blog est de vous apprendre à coder ;)

    Ombre derrière le texte, on utilise text-shadow

    sélecteur {text-shadow: Xpx Xpx Xpx #COULEUR;}

    Ensuite, le sélecteur des articles est .module_contenu

    .module_contenu {text-shadow: Xpx Xpx Xpx #COULEUR}

    Modifie les Xpx et pour la couleur, lis cet article. Si tu n'as toujours pas compris, pose des questions ;)

    90
    Jeudi 15 Mars 2012 à 20:21
    Ok, merci de m'avoir dit, je vais essayer. ^^
    91
    Choukett Profil de Choukett
    Dimanche 1er Avril 2012 à 02:29

    Merci pour les codes, ça m'a beaucoup servi pour mon blog !

    Je re-passerai :).

    92
    Vendredi 18 Mai 2012 à 11:59

    Déjà, merci beaucoup pour tout ces codes *w*

    Et ensuite : j'ai un problème.

    Quand je met les codes, j'ai bien rempli tout est nickel, je fais enregister, et il me semble qu'il n'y ait pas de problème. SEULEMENT les effets ne s'affichent pas ^o^ ~♫ aucun des codes que j'ai mis n'a changé quoi que ce soit q_q...

    93
    Mercredi 30 Mai 2012 à 21:12

    Je sens qu'il y a beaucoup de choses à apprendre ici. Merci beaucoup ça va vraiment aider, moi en tout cas . :]

    Enfin je vais pouvoir mettre des ombres *~* . #

    94
    Mercredi 30 Mai 2012 à 21:25

    @kaiko: tu peux me montrer tes codes qui ne marche pas?

    @LullaBaby: Il n'y a pas beaucoup de chose à apprendre. Il faut juste comprendre la structure, après, c'est juste des effets à bidouiller pour avoir ce que tu veux ;)

    95
    Mercredi 30 Mai 2012 à 21:46

    Aucun de fonctionnent !!! T^T

    96
    Jeudi 31 Mai 2012 à 09:15

    Déjà un alors ^^

    97
    Jeudi 31 Mai 2012 à 17:17

    Pour info -> text-shadow ne fonctionne pas sur internet explorer

    98
    Jeudi 31 Mai 2012 à 17:29

    {text-shadow: Xpx Xpx Xpx #COULEUR;} 

    celui-ci, déjà ^^'

    99
    Jeudi 31 Mai 2012 à 17:39

    mimille, il n'est pas bon le code que tu donnes

    il faut:

    .uneclasse
    {
    text-shadow: Xpx Xpx Xpx #COULEUR;
    }

    ou alors

    #uneid
    {

    text-shadow: Xpx Xpx Xpx #COULEUR;
    }

    Tout dépend de ce sur quoi tu veux l'appliquer kaiko

    100
    Jeudi 31 Mai 2012 à 17:44

    En fait, ce serait pour ombrer les liens...

    101
    Jeudi 31 Mai 2012 à 18:35

    Désolé je corrige ^^

    a {text-shadow: Xpx Xpx Xpx COULEUR;}
         color: #COULEUR;} 

    102
    Vendredi 1er Juin 2012 à 08:07

    Owh, ça marche !! Merci beaucoup :D

    103
    Samedi 2 Juin 2012 à 11:59

    Pour éviter de jongler, j'ai fait un générateur ici -> http://le-blog-facile.ek.la/generateur-de-code-css-p285703

    Vous aurez automatiquement le sélecteur et le code css

    Enjoy !

    104
    Samedi 2 Juin 2012 à 12:03

    Pratique ça!

    Je peux mettre un lien vers ta page?

    105
    Samedi 16 Juin 2012 à 21:41

    Ah ! Du chinois ! x)

    106
    Samedi 16 Juin 2012 à 21:52

    Nagalia : Aligato ! :)

    Mais ça veut dire quoi ?

    107
    Samedi 16 Juin 2012 à 22:19

    Arigato -> Japonais ;)

    108
    Samedi 16 Juin 2012 à 22:27

    Ah okay ! :) Sinon vous aimez mon blog ? :o

    109
    Samedi 16 Juin 2012 à 22:46
    110
    Lundi 18 Juin 2012 à 17:19

    Nagalia, je viens de voir ton post n°124. Bien évidemment tu peux mettre un lien vers la page. Ou si tu préfères, je peux te donner le code du générateur et tu crées un nouvel article. C'est comme tu veux. :)

    111
    Jeudi 21 Juin 2012 à 11:00

    Bonjour ! Depuis tout à l'heure j'essaie de mettre un code d'ombre extérieure + intérieur pour ma page de blog. Bien entendu je n'y arrive pas vu que je suis une vraie buse x'D. Voilà mon code de départ qui ne marche pas : 

    #background {

    border2px solid white;
    box-shadow10px 10px 15px  #0A0014 ;
    margin-top20px;
    margin-bottom20px;
    border-radius30px;
    box-shadow10px #0A0014;   
    bordernone;
    box-shadowinset 10px 10px 13px  #0A0014 }

     J'ai essayé n'importe comment, en mettant le code inset carrément côté de l'autre, enfin bref du grand n'importe quoi x).

    112
    Jeudi 21 Juin 2012 à 12:38

    Tu peux mettre plusieurs ombre, mais il faut les séparer par des virgules ;)

    box-shadow: 0 0 10px #0A0014, inset 10px 10px 13px  #0A0014;

    113
    Jeudi 21 Juin 2012 à 12:39

    Ah, d'accord, merci beaucoup ! :D

    114
    Jeudi 21 Juin 2012 à 12:41

    De rien :)

    115
    skygraff Profil de skygraff
    Jeudi 19 Juillet 2012 à 00:09

    salut,

    je suis un gros noob   pour ce qui est du CCS et je n'ai pas trouvé les réponses a mes questions ds ton explication.

    je voudrais installer ce code pour modifier mon curseur ms j'ai beau tt essayer le msg est tjrs le même "corriger avant d'enregistrer..."  

    merci d'avance pour ton aide  

    <code><style type="text/css"> body {cursor: url(http://www.rw-designer.com/cursor-extern.php?id=24911);} </style> <a href="http://www.rw-designer.com/cursor-set/minecraft-diamond-edition" title="Get free cursors for your web.">Minecraft - Diamond Edition Cursors</a></code>
    116
    Shuchu Profil de Shuchu
    Vendredi 20 Juillet 2012 à 14:20

    Merci beaucoup :}

    117
    Vendredi 20 Juillet 2012 à 17:41

    Où est-ce qu'on met ce code CSS ? Pas dans Ajouter du CSS ? Ca marche pas...

    118
    Vendredi 20 Juillet 2012 à 18:28

    Si, "apparence => Modifier le thème => Ajouter du css"

    Si ça ne marche pas, tu peux me montrer ton code?

    119
    Vendredi 20 Juillet 2012 à 18:31

    C'est celui que tu as donné : sélecteur {text-shadow: Xpx Xpx Xpx #green;}

    Ils annoncent qu'il y a une erreur dans le code...

    120
    Vendredi 20 Juillet 2012 à 18:48

    Je reprend les bases ;)

    sélecteur {propriété: valeur;}

    Le sélecteur, c'est l'élément auquel tu veux appliquer un effet (le text, les articles...)
    Les propriété, ce sont les effet (ici, l'ombre)
    Et la valeur indique comment dois ce comporter la propriété

    Le code que tu as mis n'est pas complet.
    Il faut déjà que tu indique à quel élément tu veux mettre une ombre (à la place du sélecteur). Regarde la liste ici:
    => http://fanstasy-graph.eklablog.net/selecteur-eklablog-a5092805 

    Ensuite, comme je l'ai expliqué dans l'article:
    "Il faut remplacer le "X" par un nombre de pixel. Les deux première valeur indiquent la direction de l'ombre. Le premier en haut ou en bas (un nombre positif = vers le bas. Un nombre négatif = vers le haut) et le deuxième à droite ou à gauche (positif = droit. négatif = gauche). Si vous voulez faire un style "lueur externe" mettez 0. 
    La troisième valeur indique l'étendu de l'ombre. Plus le nombre est grand, plus l'ombre sera floue." 

    Enfin, pour la couleur, si tu choisis de mettre le nom en anglais, il faut enlever le #
    Regarde cet article pour plus d'info:
    =>  http://fanstasy-graph.eklablog.net/couleur-a28204421

    121
    Vendredi 20 Juillet 2012 à 18:52

    Ah d'accord. Je suis nulle ! Bon je vais regarder ce que tu m'as dit.

    122
    Vendredi 20 Juillet 2012 à 19:02

    Ca ne marche toujours pas...

    123
    Shuchu Profil de Shuchu
    Vendredi 20 Juillet 2012 à 19:04
    Tu peux passer le code?
    124
    Vendredi 20 Juillet 2012 à 19:10

    C'est ça :  .module_contenu {{text-shadow: 4px 4px 8px #vert;};}

    J'ai essayé en supprimmant les accolades, en remplaçant vert par green, en elevant le #...

    (Les valeurs et couleurs, je les ai mises au hasard, juste pour tester)

    125
    Shuchu Profil de Shuchu
    Vendredi 20 Juillet 2012 à 19:12

    Bah, tu t'es trompée sur tout //PAF//
    Essaye:

     .module_contenu  {text-shadow: 4px 4px 8px green;}
      

    Je vais teser ton code.

    126
    Shuchu Profil de Shuchu
    Vendredi 20 Juillet 2012 à 19:14
    Ca marche :)
    127
    Vendredi 20 Juillet 2012 à 19:17

    ah j'avais des accolades en trop ! Merci beaucoup !!

    128
    lunarr Profil de lunarr
    Dimanche 22 Juillet 2012 à 02:15

    Bonsoir j'ai un soucis dans mon code :

    .module_contenu{box-shadow : 0px 0px 30px #a9937d;}

    Rien ne s'affiche :(

    129
    ShuchuDeco
    Dimanche 22 Juillet 2012 à 02:32

    Parceque tu as oublier un espace:

    .module_contenu {box-shadow : 0px 0px 30px #a9937d;}

    130
    lunarr Profil de lunarr
    Dimanche 22 Juillet 2012 à 02:49

    Ha d'accord merci *w*

    131
    ripitchi2806 Profil de ripitchi2806
    Dimanche 5 Août 2012 à 17:22

    coucou et désoler de te déranger

    Moi j'ai mis sa :

    #menu1 sélecteur {box-shadow: 0px 0px 0px #BLACK;} comme je veux que sa soit sur le menu 1


    mais il y a une erreur --'

    132
    Shuchu Profil de Shuchu
    Dimanche 5 Août 2012 à 17:24

    #menu1 {box-shadow: 0px 0px 1px #BLACK;}
    Ne met jamais selecteur et Valeur dans un code, capiche? 8DD

    133
    ripitchi2806 Profil de ripitchi2806
    Dimanche 5 Août 2012 à 17:26

    Ok encore merci tu me sauve encore la vie :)

    134
    ripitchi2806 Profil de ripitchi2806
    Dimanche 5 Août 2012 à 17:29

    --' en fait j'ai mis le code et ça a pas mis d'erreur sauf que ça reste comme c'etait

    135
    Shuchu Profil de Shuchu
    Dimanche 5 Août 2012 à 18:17

    #menu1 {box-shadow: 0px 0px 10px #BLACK;}

    136
    Shuchu Profil de Shuchu
    Dimanche 5 Août 2012 à 18:18

    #menu1 {box-shadow: 0px 0px 10px black;}

    137
    ripitchi2806 Profil de ripitchi2806
    Dimanche 5 Août 2012 à 20:18

    ok merci sauveuse de vie :)

    138
    Shuchu Profil de Shuchu
    Dimanche 5 Août 2012 à 20:53

    Mais non, c'est Nagalia la sauveuse, je n'ai fait que t'aider.

    139
    Mercredi 15 Août 2012 à 21:46

    Moi en fait je voudrais simplement savoir le selecteur de l'image d'un article pour pouvoir lui faire un effet d'ombre, car lorsque je met "img" en sélecteur et que après je suis vos indications et bah c'est toutes les images du blog qui ont une ombre x)
    Je voudrais simplement savoir faire comme ici http://phantasy-world.fr.nf/saint-seiya-omega-episode-05-a46099992 aidez moi svp, sinon vous aurez un suicide sur le dos :D (à prendre au second degrés hein !) 

    140
    Shuchu Profil de Shuchu
    Mercredi 15 Août 2012 à 22:06

    Je crois qu'il faut utiliser les pseudo classe (a)
    Je vais voir :3

     

    141
    Jeudi 16 Août 2012 à 14:12

    Haha c'est bon j'ai été plus rapide que vous :p, avec un peu d'effort on arrive à tout !
    Donc je le dis pour ceux qui sont dans le même cas que moi:

    Pour que les images de vos articles aient l'effet d'ombre mettez ceci dans "ajoutez du CSS": .article_text img {box-shadow: Xpx Xpx Xpx COULEUR QUE VOUS VOULEZ 

    142
    Shuchu Profil de Shuchu
    Jeudi 16 Août 2012 à 15:06

    Mercipourcesélecteur.
    PS: espacebug donc...8D

    143
    Aikya Profil de Aikya
    Dimanche 19 Août 2012 à 19:32

    Je n'arrive pas à mettre une ombre interne et externe en même temps ó.ò

    144
    Lundi 20 Août 2012 à 23:33

    Il faut les séparer par une virgule:

    sélecteur {box-shadow: Xpx Xpx Xpx #COULEUR, inset Xpx Xpx Xpx #COULEUR;}

    145
    komachi~
    Samedi 1er Septembre 2012 à 20:32

    merci

    146
    Mardi 4 Septembre 2012 à 18:22

    saluut :) jaimerais savoir comment on fait pour mettre de lombre externe partout (dans tout les coter) ^^

    147
    Mardi 4 Septembre 2012 à 18:40

    ok merci beaucoup :D

    148
    Dimanche 23 Septembre 2012 à 20:38

    Salut, moi je voudrais faire un ombrage pour les images, connais tu le code?

    149
    Samedi 6 Octobre 2012 à 18:21

    bonjour j'ai essayé votre code mais il marche pas

    je fais comment???

    150
    yume-world Profil de yume-world
    Mercredi 10 Octobre 2012 à 16:01

    la :Voici le code à utiliser pour ajouter une ombre sur n'importe quel élément autre que du texte: sélecteur {box-shadow: Xpx Xpx Xpx #COULEUR;}


    j pige rien xd ^^''''

    151
    Mercredi 10 Octobre 2012 à 16:02
    152
    Yurusu Profil de Yurusu
    Mardi 30 Octobre 2012 à 18:02

    C'est bien expliqué!

    153
    Kymmi
    Jeudi 1er Novembre 2012 à 22:34

    Ca marche c'est vachement beau !

    154
    Samedi 3 Novembre 2012 à 14:59
    155
    Jeudi 15 Novembre 2012 à 15:37

    Moi sa marche pas TT.TT Il faut bien mettre la couleurs en anglais ?!

    156
    Aikya Profil de Aikya
    Jeudi 15 Novembre 2012 à 15:57

    Tu as pensé à retirer le "#" devant le nom de la couleur :3 ?

    157
    Jeudi 15 Novembre 2012 à 15:59

    x) Non... merci pour l'info !!!

    158
    Aikya Profil de Aikya
    Jeudi 15 Novembre 2012 à 16:23

    De rien ^^

    159
    Samedi 1er Décembre 2012 à 19:12

    Salut !

    Je n'arrive pas a mettre des ombes sur e titre des rubrique sur la page (c'est compliquer^^)

    en clair je trouve  pas le bon selecteur !!

    ce n'est pas un aticle c une rubrique  ;)

    160
    Jeudi 28 Février 2013 à 15:28

    moi sa marche pas...T^T 

    mon code : {text-shadow 1px 1px 3px blue }

    161
    Jeudi 28 Février 2013 à 15:46

    ah d'accord merci !!^^

    mais sa marche toujours pas !!^^"

    162
    Jeudi 28 Février 2013 à 15:48

    d'acc je vais essayer !! 

    163
    Jeudi 28 Février 2013 à 15:50

    mais sa marche toujours pas !! :/ 

    {text-shadow1px 1px 3px blue;}

    164
    Jeudi 28 Février 2013 à 15:56

    ah d'accord ! 

    merki !! :3

    165
    Kealsea Profil de Kealsea
    Mardi 23 Avril 2013 à 09:16

    Salut Nagalia :). J'aimerais savoir si il est possible de régler l'opacité de l'ombre (ombre plus sombre, ou moins sombre) ?

    166
    Mishiiko
    Samedi 15 Juin 2013 à 21:10

    Moi ca marche pas on peut m'aider s'il vous plait ^^'

    .module_contenu {text-shadow1px 1px 3px black;}

    167
    Dimanche 21 Juillet 2013 à 17:42

    Bonjour ! J'ai une question !

    Est-ce que l'on peut faire de l'ombre sous la menubar ? Car je pense que ça rendrait mieux sur mon blog mais je ne sais pas comment faire >.<

    Merci d'avance !

    @Mishiiko : Le code marche chez moi :/

    168
    Dimanche 21 Juillet 2013 à 19:55
    Merci beaucoup ! Je le teste de ce pas :D
    169
    Mercredi 2 Octobre 2013 à 18:00

    Merci. :)

    170
    Mardi 8 Avril 2014 à 18:30

    Bonjour ! J'aimerais enlever l'ombre du titre d'un seul module dans mon menu, mais je ne trouve ni le sélecteur ni la valeur à mettre...

    J'ai essayé : .module_menu_titre109425647{box-shadow : none;}, mais ça ne marche pas; auriez vous d'autres propositions ? :)

    171
    Mardi 8 Avril 2014 à 21:08

    #module_menu_titre109425647{box-shadow : none;}

    Si tu parles d'un module n particulier, il s'agit d'un ID, le sélecteur commence donc par un #. A l'inverse, pour un groupe d'élément (tous les modules du blog), c'est une class, dont le sélecteur commence par un .

    172
    Lundi 21 Avril 2014 à 07:49

    sa m'énerve j'ai mis ça :

    sélecteur {text-shadow: 3px -2px 5px black;}

    et ça ne marche pas...

    173
    Lundi 21 Avril 2014 à 16:04

    Il faut indiquer quel est ce sélecteur ;) (le nom de l'élément en CSS)

    Tu veux mettre une ombre sous tout le texte, uniquement les titre, uniquement les articles, uniquement les menus...

    => http://papasti.info/MediaWiki/index.php?title=Les_S%C3%A9lecteurs

    174
    Vendredi 30 Mai 2014 à 12:07

    Merci beaucoup ! :D

    175
    Lundi 30 Juin 2014 à 19:30

    Bibizour ^^

    J'ai une image de fond pour un élément en dehors de la page (enregistrée en png) et j'aimerais beaucoup lui appliquer une ombre, mais je n'y arrive pas, ça ne marche que pour l'élément entier (Et donc ça fait une ombre carrée au lieu d'une ombre en pointe :/) ?

    Tu peux m'aider s'il te plaît ?

    176
    Mardi 1er Juillet 2014 à 21:10

    Ce n'est pas possible ;)

    Une image est un rectangle de pixel. Dans le cas d'une image détourée, les pixel invisibles existent bien, c'est pourquoi on obtient toujours une ombre carrée 

    177
    Mardi 1er Juillet 2014 à 21:17

    Ok, pas grave, je vais me débrouiller avec Paint ^^

    Au moins j'ai appris un truc *^*

    178
    Lundi 21 Juillet 2014 à 15:04
    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :