-
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 interneboite_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 : ombre, xpx, couleur, box, text
-
Commentaires
oui je pense, mais ça me met : Le code CSS comporte une erreur, merci de le corriger avant d'enregistrer.
c'est énervant.
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 ;)
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.
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
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
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 =)
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; }Nikel =)
Je pensais que ça irais sans les préfixes les ombres, mais apparement non ^^' J'ai plus qu'a corriger cet article...
Non, c'est un problème de navigateur. Tu dois avoir une vieille version de chrome ou mozilla
-Edit- Je me suis auto-répondu à mes questions xD donc je remercierais juste pour ce blog fabuleux <3333333
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}
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 ^^'
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
As-tu utilisé le bon sélecteur? Celui du titre du blog c'est:
#titre_header {text-shadow: Xpx Xpx Xpx #COULEUR;}
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...
#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 !!
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 ;)
Sinon, rajoute ça:
-moz-text-shadow: Xpx Xpx Xpx COULEUR;
-webkit-text-shadow: Xpx Xpx Xpx COULEUR;Les valeurs doivent être les même.
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...
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!
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 --')
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 ^^
De rien =)
Si tu veux modifier des truc, le dernier code est pour IE
color='#000000', Direction=110, Strength=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 ^^'
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
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 ;)
=> Couleursa marche sa #menu2 {box-shadow: 5px 5px 5px white;} merci mais sa .module_contenu {box-shadow: 5px 5px 5px white;} sa marche pas prq
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 ;)
68fairytalJeudi 19 Janvier 2012 à 10:52slt 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 ?
69fairytalJeudi 19 Janvier 2012 à 12:3270fairytalJeudi 19 Janvier 2012 à 13:44@Mimille511 : C'est pour le texte son problème, donc "text", pas "box" ;)
p {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?
72fairytalVendredi 20 Janvier 2012 à 08:11merci 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
73fairytalVendredi 20 Janvier 2012 à 15:04sa marche pas :( dit nagalia esqu'ils ya un code pour faire un ombre interne sur toute les texte du blog ?
et aussi esque tu aurai entendu parler que quand on mets baucoup trop de ccs apres tout le ccs s'efface ses vrai ?
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 ^^'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)
ok
Comment tu fait pour que les infos sur l'auteur soit coller au titre de l'article , et que ce soit a gauche ??
comment on fai pour ke lors du survol de la barre eklablog,,et qon clic le text soit lumineux?
Tu pourrais écrire ici ce qu'il faut mettre comme CSS pour faire une ombre blanche derrière le texte des articles ?
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 ;)
Ok, merci de m'avoir dit, je vais essayer. ^^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...
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 *~* . #
@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 ;)
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
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 !
Direction blabla pour le flood ;)
=> http://fanstasy-graph.eklablog.net/blabla-n-2-a46874589#comment-14697457Nagalia, 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. :)
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 {
border: 2px solid white;
box-shadow: 10px 10px 15px #0A0014 ;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 30px;
box-shadow: 0 0 10px #0A0014;
border: none;
box-shadow: inset 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).
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;
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>
Si, "apparence => Modifier le thème => Ajouter du css"
Si ça ne marche pas, tu peux me montrer ton code?
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...
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-a5092805Ensuite, 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-a28204421C'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)
Bah, tu t'es trompée sur tout //PAF//
Essaye:.module_contenu {text-shadow: 4px 4px 8px green;}
Je vais teser ton code.
Bonsoir j'ai un soucis dans mon code :
.module_contenu{box-shadow : 0px 0px 30px #a9937d;}
Rien ne s'affiche :(
129ShuchuDecoDimanche 22 Juillet 2012 à 02:32coucou 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 --'
#menu1 {box-shadow: 0px 0px 1px #BLACK;}
Ne met jamais selecteur et Valeur dans un code, capiche? 8DDMoi 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 !)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}
Il faut les séparer par une virgule:
sélecteur {box-shadow: Xpx Xpx Xpx #COULEUR, inset Xpx Xpx Xpx #COULEUR;}
145komachi~Samedi 1er Septembre 2012 à 20:32saluut :) jaimerais savoir comment on fait pour mettre de lombre externe partout (dans tout les coter) ^^
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 ^^''''
153KymmiJeudi 1er Novembre 2012 à 22:34Salut !
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 ;)
Salut Nagalia :). J'aimerais savoir si il est possible de régler l'opacité de l'ombre (ombre plus sombre, ou moins sombre) ?
166MishiikoSamedi 15 Juin 2013 à 21:10Moi ca marche pas on peut m'aider s'il vous plait ^^'
.module_contenu {text-shadow: 1px 1px 3px black;}
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 :/
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 ? :)
#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 .
sa m'énerve j'ai mis ça :
sélecteur {text-shadow: 3px -2px 5px black;}
et ça ne marche pas...
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
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 ?
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
Ajouter un commentaire
Arigato Gozaïmasu.