[Résolu] Text-shadow... Une bizarrerie ???

Bonjour à tous,

Alors voilà un truc qui me surprend....
Il semble impossible de surcharger la propriété text-shadow....

*{
 text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

.avecOmbre
{
 text-shadow: 1px 1px 2px rgba(0,0,0,0.75);
}

ben la classe avecOmbre marche pô ....
Le plus drôle, c'est que chrome dans les outils de dev me dit pourtant que la propriété sur "*" est bien surchargée... mais non, il faut que je la décoche à la main...

Purée.... Quelqu'un à un retour la dessus ???

Merci.

J'ai vraiment compris ce que tu entendais par surcharger la propriété text-shadow, mais si tu sous entend le fait d'avoir plusieurs ombre à tes textes il suffit de faire de la manière suivante :

text-shadow: 1px 1px 1px rgba(0,0,0,0.004), 1px 1px 2px rgba(0,0,0,0.75); //séparation des différentes ombres par une virgule

Car dans ta méthode tu écrase ta propriété * par celle de la class avecombre.
Modifié par thej8 (04 Apr 2014 - 13:41)

En fait, je ne veux pas mettre 2 ombres, je voudrais que l'une remplace l'autre....
Or...
Dans mon exemple je pensais justement que .avecOmbre remplacerait la propriété fixée par défaut...
mais non, en fait elle ne la remplace pas...
même si je mets la classe avecOmbre j'ai

 text-shadow: 1px 1px 1px rgba(0,0,0,0.004);

C'est ça qui est vraiment chelou...
C'est que moi ou alors d'autres on ca ?

Le terme CSS veut dire : fueilles de style en cascade.

Donc en (très très) gros, les dernières propriétés écrase les précédentes. Après il faut aussi comprendre que selon la "puissance" du sélecteur utilisé une propriété va ou ne va pas être (tel est la question) écrasé par la nouvelle instance.

Cependant pour faire un parallélisme, avec les cartes pokémon, le sélecteur * a moins de "PV" que le sélecteur .avecOmbre, car ce dernière est plus sélectif que le très généraliste *.

[Au faite : je ne suis pas sur que niveau performance utilisé * soit très bon]

Donc ton erreur est assez bizarre, car à mon sens illogique.
Peut tu mettre ta page en ligne ou au moins l'intégralité de ton css pour que l'on puisse voir. Et vérifie que tu n'est pas une autre définition de text-shadow plus loin dans ton css.
Modifié par thej8 (04 Apr 2014 - 14:20)

Est-ce que ton problème ne correspondrait pas au cas de figure suivant?

<style>
* {
  text-shadow: none;
}
.avecOmbre {
  text-shadow: 1px 1px 2px blue;
}
</style>
<p class="avecOmbre">Du texte</p>
<p class="avecOmbre">Du texte <span>et un span</span> dedans</p>
<p class="avecOmbre"><span>Tout le texte dans un span</span></p>

Dans le troisième paragraphe, le texte n'aura pas d'ombre. La valeur de text-shadow pour le paragraphe est bien celle avec une ombre bleue, mais la valeur de text-shadow pour le SPAN à l'intérieur est "none", donc pas d'ombre affichée.

fvsch c'est exactement ça.
Bien vu.

En fait oui, il y a aussi un span dans mon contexte.

@thej8
C'est la première fois que j'utilise la propriété

1px 1px 1px rgba(0,0,0,0.004)

sur le sélecteur *.

C'est sensé améliorer la lisibilité du texte, surtout sous chrome avec des animations.
Bon, je dois avoué que je ne suis pas très convaincu... Mais j'ai pas trop la possibilité de tester.

Merci pour vos réponses.

Résolu