• Propriété: Les ombres

    Voici le code à utiliser pour ajouter une ombre autour de n'importe quel élément de type "boite" :

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



    Expliquons tout ça:

    box-shadow


    Box = Boite et Shadow = Ombre

    Jusque là, tout va bien

    Xpx Xpx Xpx

    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)
    • Le deuxième à droite ou à gauche (positif = droit. négatif = gauche).
    Si vous voulez que l'ombre entoure totalement votre élément, mettez 0.

    la troisième valeur indique l'étendu de l'ombre. Plus le nombre est grand, plus l'ombre sera large.

     

    #COULEUR

    Remplacez "COULEUR" par un code de couleur hexa ou remplacez "#COULEUR" par le nom de la couleur en anglais. Vous pouvez également utiliser le système rgb ou rgba.

    Ombre Interne



    Pour mette l'ombre à l'intérieur de l'élément, rajoutez "inset" au début des valeurs

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

     

    Texte



    Pour mettre des ombres autour du texte :

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



    On a juste remplacé "box" par "text".
    /!\ Vous ne pouvez pas mettre d'ombre interne à un texte.

    Ombres Multiples


    Enfin, sachez que vous pouvez mettre plusieurs ombres à un élément, ce qui vous permet par exemple de mettre une ombre interne et un ombre externe, de varier les tailles et les couleurs...

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

    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 à 10:52

    Nombre positif? Nombre négatif? Dézolée je ne pige pas là ...

    Ps: Il y a un code comme pour les boites?

    14
    Vendredi 4 Novembre 2011 à 11:00

    Oublie pour le code htlm j'ai compris en faite ^^

    15
    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

    16
    Vendredi 4 Novembre 2011 à 16:15

    Ok

    17
    Mardi 22 Novembre 2011 à 23:51

    Merci pour cette astuce aussi

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

    et comment un ombre dans les menus ??

    19
    Mercredi 23 Novembre 2011 à 20:14

    Menu? Titre? Attend

    Titres des menus: .module_menu_titre {box-shadow: Xpx Xpx Xpx;}

    Une ombre pour le fond des menus: #menu1 {box-shadow: Xpx Xpx Xpx;}

                                               #menu2 {box-shadow: Xpx Xpx Xpx;}

    Texte des menus:  #menu1 {text-shadow: Xpx Xpx Xpx #Kouleur ;}

     #menu2 {text-shadow: Xpx Xpx Xpx #Kouleur ;}

    Voilà :3

    Faut juste mettre le bon selekteur! xD Voilà tout :)

     

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

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

    21
    Mercredi 23 Novembre 2011 à 20:39

    Tu peux me montrer ton code?

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

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

    23
    Mercredi 23 Novembre 2011 à 20:44

    Ben oui ;)

    24
    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

    25
    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 =)

    26
    Mercredi 23 Novembre 2011 à 20:55

    J'oublie tjr la kouleur moi ...Menu1 = Gaushe ; Menu2 = Droite

    Oui enkoore et enkore le problème du klavier 

    27
    Mercredi 23 Novembre 2011 à 20:56

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

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

    le code ca marche pas x.x

    chez pas quekil a

    29
    Mercredi 23 Novembre 2011 à 21:05

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

    Tu a mis quoi comme couleur?

    30
    Claude Beacons Profil de Claude Beacons
    Mercredi 23 Novembre 2011 à 21:06

    black

    31
    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; } 

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

    Sa marche *Q*

    33
    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...

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

    35
    Mercredi 23 Novembre 2011 à 21:29

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

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

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

    37
    Mercredi 23 Novembre 2011 à 21:33

    Ah bah ja sais pas alors ^^'

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

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

    c'est l'essentiel Ôô

    39
    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

    40
    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}

    41
    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 ^^'

    42
    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

    43
    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;}

    44
    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...

    45
    Mercredi 7 Décembre 2011 à 16:46

    C'est normal qu'ils deviennent vert ;)

    Tu peux me montrer ton code?

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

    47
    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 ;) 

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

    ca fonctionne pas non plus lol! grrrr

    49
    Mercredi 7 Décembre 2011 à 17:35

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

    50
    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. 

    51
    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...

     

    52
    garbawi Profil de garbawi
    Mercredi 7 Décembre 2011 à 17:46
    53
    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 ^^'

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

    55
    Mercredi 7 Décembre 2011 à 18:07

    Gabawi U_u

    Peut être que toi aussi tu bug komme moi ...

    Parfois pour moi ça ne marshe pas ! Bon je rekommense le kode puis au bout de kelkes temps :) Tadaah sa marshe :)

    56
    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 --')

    57
    Mercredi 7 Décembre 2011 à 18:19

    Faut pas prendre les vieux Navigateurs ...

    58
    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 ^^

    59
    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

     

    60
    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 ^^'

    61
    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

    62
    Vendredi 30 Décembre 2011 à 19:02

    Tu peux me montrer ton code?

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

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

    >.<

    64
    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 

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

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

    66
    Vendredi 30 Décembre 2011 à 19:21

    De rien =)

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

    67
    Yuun Profil de Yuun
    Vendredi 30 Décembre 2011 à 19:24

    ^ .^

    68
    Vendredi 30 Décembre 2011 à 20:08

    Merci beaucoup .

     

    69
    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

    70
    Mercredi 18 Janvier 2012 à 13:31

    Euh ... Bonne question T.T Moi ça marche très bien

    71
    Mercredi 18 Janvier 2012 à 17:14

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

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

    mozila firefox normal

    73
    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 ;)

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

    merci sa marche bien merci beaucoup

    75
    Mercredi 18 Janvier 2012 à 18:06

    De rien =)

    76
    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 ?

    77
    Jeudi 19 Janvier 2012 à 12:14

    #background p {text-shadow: 5px 5px 5px black;
    -moz-box-shadow: 5px 5px 5px black;
    -webkit-box-shadow: 5px 5px 5px black;
    -o-box-shadow: 5px 5px 5px black; }

    Voilà le code

    Enfin je crois :3

    78
    fairytal
    Jeudi 19 Janvier 2012 à 12:32

    oh merci mimille je vais essayer ;)

    79
    Jeudi 19 Janvier 2012 à 12:35

    :)

    80
    fairytal
    Jeudi 19 Janvier 2012 à 13:44

    sa marche pas :( aussi

    81
    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?

    82
    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

    83
    fairytal
    Vendredi 20 Janvier 2012 à 15:04

    si tu veut bien ?

    84
    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 ?

    85
    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 ?

    86
    Jeudi 9 Février 2012 à 16:36

    Je sais que tu as demandé à Nagalia, x-manga-love-x mais voilà peut être les réponses à tes questions ...

     

    Montre ton code ... Je vais voir ce que tu as mis

    Le code pour les ombres interne sur tous les textes du blog est:

    .p {text-shadow: inset Xpx Xpx Xpx #Couleur;}

    Non le CSS ne s'efface pas si on en met trop, j'ai une tonne de CSS et ça ne s'est pas effacé ... Et si tu veux être sûre va sur le forum de EklaBlog !

    87
    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 ^^' 

    88
    Jeudi 9 Février 2012 à 18:57

    C'est vrai que ça ne se verra pas -_- Ca se met sur les Classes, les titres, les menu, même le Menubar //Euh? :D//

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

    merci les fille ;)

    90
    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)

    91
    Jeudi 23 Février 2012 à 10:39

    Je refais comme pour les transitions. C'est à peu près ce qu'à mis Nagalia si je ne me trompe pas.

    .module_titre {color: black;
       text-shadow: 0px 0px 1px green;
       -webkit-transition-duration: 1s;
       -moz-transition-duration: 1s;
       -transition-duration: 1s;} 

    .module_titre:hover {color: green;
       -webkit-transition-duration: 1s;
       -moz-transition-duration: 1s;
       -transition-duration: 1s;   
       text-shadow: 0px 0px 1px black;}

     

    .module_menu_titre {color: black;
       text-shadow: 0px 0px 1px green;
       -webkit-transition-duration: 1s;
       -moz-transition-duration: 1s;
       -transition-duration: 1s;} 

    .module_menu_titre:hover {color: green;
       -webkit-transition-duration: 1s;
       -moz-transition-duration: 1s;
       -transition-duration: 1s;
       text-shadow: 0px 0px 1px black;}

     

    En rouge c'est la couleur du texte non au survol.
    En bleu la couleur de l'ombre non au survol.
    En orange c'est la couleur du texte au survol.
    En vert la couleur des ombres au survol.

     

    Voilà donc le code à changer:

    .module_titre {color: black;
       text-shadow: 0px 0px 1px green;
       -webkit-transition-duration: 1s;
       -moz-transition-duration: 1s;
       -transition-duration: 1s;} 

    .module_titre:hover {color: green;
       -webkit-transition-duration: 1s;
       -moz-transition-duration: 1s;
       -transition-duration: 1s;   
       text-shadow: 0px 0px 1px black;}

     

    .module_menu_titre {color: black;
       text-shadow: 0px 0px 1px green;
       -webkit-transition-duration: 1s;
       -moz-transition-duration: 1s;
       -transition-duration: 1s;} 

    .module_menu_titre:hover {color: green;
       -webkit-transition-duration: 1s;
       -moz-transition-duration: 1s;
       -transition-duration: 1s;
       text-shadow: 0px 0px 1px black;}

     

     J'ai fait à ce que ça fasse comme Nagalia.

    Pour ce qui est en bleu, remplace par la même couleur.
    Pour ce qui est en rouge, remplace par la même couleur.

    Si tu veux je te fais le code mais il faut me dire les couleurs.

    (Remplace le CSS que je t'ai mis par celui que tu auras fait. Ca va marcher) 

    92
    Jeudi 23 Février 2012 à 10:42

    J'y suis arriver merci !!^^

    93
    Jeudi 23 Février 2012 à 10:48

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

    94
    Jeudi 23 Février 2012 à 10:49

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

    95
    Jeudi 23 Février 2012 à 10:50

    xd C'est que moi je m'ennuis, et appelle moi plutôt Mimi. C'est plus court :)

    96
    Jeudi 23 Février 2012 à 10:52

    Alors ???

    97
    Jeudi 23 Février 2012 à 10:52

    xd C'est que moi je m'ennuis, et appelle moi plutôt Mimi. C'est plus court :)
    Shymi comme tu veux :)

    98
    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 ??

    99
    Jeudi 23 Février 2012 à 20:13

    Elle supprime les marges ... :|

    100
    Jeudi 23 Février 2012 à 20:16

    Ou sa ?

    101
    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?

    102
    Jeudi 23 Février 2012 à 20:36

    #menubar {color: COULEUR;}

    #menubar:hover {color: COULEUR;
            text-shadow: 0px 0px 3px AUTRE COULEUR;} 

     

    Remplace ce qui est en rouge par la couleur du texte sur le menubar.
    Remplace ce qui est en bleu par la couleur de la lumière.

    103
    Jeudi 23 Février 2012 à 20:37

    ok mercci !!!

    104
    Jeudi 23 Février 2012 à 20:47

    ok

    105
    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 ?

    106
    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 ;)

    107
    Jeudi 15 Mars 2012 à 20:21
    Ok, merci de m'avoir dit, je vais essayer. ^^
    108
    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 :).

    109
    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...

    110
    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 *~* . #

    111
    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 ;)

    112
    Mercredi 30 Mai 2012 à 21:46

    Aucun de fonctionnent !!! T^T

    113
    Jeudi 31 Mai 2012 à 09:15

    Déjà un alors ^^

    114
    Jeudi 31 Mai 2012 à 17:17

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

    115
    Jeudi 31 Mai 2012 à 17:29

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

    celui-ci, déjà ^^'

    116
    Jeudi 31 Mai 2012 à 17:32

    Au tout début, il ne faut pas mettre { mais . !

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

    117
    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

    118
    Jeudi 31 Mai 2012 à 17:44

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

    119
    Jeudi 31 Mai 2012 à 17:48

    Les liens? OK.

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

    (color: # COULEUR est la couleur des liens)

    120
    Jeudi 31 Mai 2012 à 18:35

    Désolé je corrige ^^

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

    121
    Jeudi 31 Mai 2012 à 22:38

    Hhm oui désolée..
    Je suis vraiment fatiguée. J'ai une tonne de devoirs...

    122
    Vendredi 1er Juin 2012 à 08:07

    Owh, ça marche !! Merci beaucoup :D

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

    124
    Samedi 2 Juin 2012 à 12:03

    Pratique ça!

    Je peux mettre un lien vers ta page?

    125
    Samedi 16 Juin 2012 à 21:41

    Ah ! Du chinois ! x)

    126
    Samedi 16 Juin 2012 à 21:46

    ?
    Noisettella, tu devrais dire Aligato à Nagalia. 

    127
    Samedi 16 Juin 2012 à 21:52

    Nagalia : Aligato ! :)

    Mais ça veut dire quoi ?

    128
    Samedi 16 Juin 2012 à 22:07

    Merci en Japonnais ou en Chinois. x)

    129
    Samedi 16 Juin 2012 à 22:19

    Arigato -> Japonais ;)

    130
    Samedi 16 Juin 2012 à 22:26

    Oui.

    131
    Samedi 16 Juin 2012 à 22:27

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

    132
    Samedi 16 Juin 2012 à 22:46
    133
    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. :)

    134
    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).

    135
    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;

    136
    Jeudi 21 Juin 2012 à 12:39

    Ah, d'accord, merci beaucoup ! :D

    137
    Jeudi 21 Juin 2012 à 12:41

    De rien :)

    138
    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>
    139
    Shuchu Profil de Shuchu
    Vendredi 20 Juillet 2012 à 14:20

    Merci beaucoup :}

    140
    Vendredi 20 Juillet 2012 à 17:41

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

    141
    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?

    142
    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...

    143
    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

    144
    Vendredi 20 Juillet 2012 à 18:52

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

    145
    Vendredi 20 Juillet 2012 à 19:02

    Ca ne marche toujours pas...

    146
    Shuchu Profil de Shuchu
    Vendredi 20 Juillet 2012 à 19:04
    Tu peux passer le code?
    147
    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)

    148
    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.

    149
    Shuchu Profil de Shuchu
    Vendredi 20 Juillet 2012 à 19:14
    Ca marche :)
    150
    Vendredi 20 Juillet 2012 à 19:17

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

    151
    ©Choco Profil de ©Choco
    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 :(

    152
    ShuchuDeco
    Dimanche 22 Juillet 2012 à 02:32

    Parceque tu as oublier un espace:

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

    153
    ©Choco Profil de ©Choco
    Dimanche 22 Juillet 2012 à 02:49

    Ha d'accord merci *w*

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

    155
    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

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

    Ok encore merci tu me sauve encore la vie :)

    157
    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

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

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

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

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

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

    ok merci sauveuse de vie :)

    161
    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.

    162
    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 !) 

    163
    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

     

    164
    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 

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

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

    166
    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 ó.ò

    167
    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;}

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

    merci

    169
    Mardi 4 Septembre 2012 à 18:22

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

    170
    Mardi 4 Septembre 2012 à 18:27

    Les ombres externes sont sur tout les côtés, quand tu mets:

    #sélecteur {box-shadow:  0px 0px Xpx;}

    (Remplace ce qui est en rouge)

    171
    Mardi 4 Septembre 2012 à 18:40

    ok merci beaucoup :D

    172
    Dimanche 23 Septembre 2012 à 20:38

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

    173
    Lundi 24 Septembre 2012 à 21:41

    Je pense que c'est:

    img {box-shadow: Xpx Xpx Xpx #COULEUR;}

    ou

    .module_contenu {box-shadow: Xpx Xpx Xpx #COULEUR;}
    #menu1 img {box-shadow: Xpx Xpx Xpx #COULEUR;}
    #menu2 img {box-shadow: Xpx Xpx Xpx #COULEUR;}

    174
    Samedi 6 Octobre 2012 à 18:21

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

    je fais comment???

    175
    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 ^^''''

    176
    Mercredi 10 Octobre 2012 à 16:02

    merci

    177
    Yurusu Profil de Yurusu
    Mardi 30 Octobre 2012 à 18:02

    C'est bien expliqué!

    178
    Kymmi
    Jeudi 1er Novembre 2012 à 22:34

    Ca marche c'est vachement beau !

    179
    Samedi 3 Novembre 2012 à 14:59

    *w*

    180
    Jeudi 15 Novembre 2012 à 15:37

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

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

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

    182
    Jeudi 15 Novembre 2012 à 15:59

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

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

    De rien ^^

    184
    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  ;)

    185
    Jeudi 28 Février 2013 à 15:28

    moi sa marche pas...T^T 

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

    186
    Jeudi 28 Février 2013 à 15:45

    Tu dois mettre:

    p {text-shadow: 1px 1px 3px blue;}

    187
    Jeudi 28 Février 2013 à 15:46

    ah d'accord merci !!^^

    mais sa marche toujours pas !!^^"

    188
    Jeudi 28 Février 2013 à 15:47

    Hhm, rajoute un "." devant le "p" ?

    189
    Jeudi 28 Février 2013 à 15:48

    d'acc je vais essayer !! 

    190
    Jeudi 28 Février 2013 à 15:50

    mais sa marche toujours pas !! :/ 

    {text-shadow1px 1px 3px blue;}

    191
    Jeudi 28 Février 2013 à 15:54

    Je viens de comprendre. è.é

    Tu dois mettre un autre sélecteur que "p" comme "module_contenu" par exemple.

    Ce qui donnerai:

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

    192
    Jeudi 28 Février 2013 à 15:56

    ah d'accord ! 

    merki !! :3

    193
    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) ?

    194
    Mardi 23 Avril 2013 à 13:28

    Non, mais tu peux modifier la couleur de l'ombre, pour qu'elle soit moins lumineuse ou sombre, par exemple si tu trouves que le noir est trop sombre, tu mets du gris. *w*

    195
    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;}

    196
    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 :/

    197
    Dimanche 21 Juillet 2013 à 18:23

    Coucou. Donc oui, on peut faire de l'ombre sous la menubar.
    Le code:

    #menubar {box-shadow: Xpx Xpx Xpx #COULEUR;}

    Voilà~

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

    Merci. :)

    200
    Mardi 8 Avril à 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 ? :)

    201
    Mardi 8 Avril à 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 .

    Suivre le flux RSS des commentaires de cet article


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :