Pastel Shadow : plugin jquery pour afficher un ombrage de texte (css3 text-shadow) sur internet explorer
- 06-04-2010
- Posté dans css . jQuery
- Écrire un commentaire
Pastel Shadow est un plugin jquery permettant d'afficher un ombrage des textes sur internet explorer (version < 9 car cette propriété est enfin intégrée), similaire à l'ombrage text-shadow css3.
Principe de fonctionnement
lorsqu'on applique le plugin à un élément (ex : <span>mon texte</span>), si on est sur IE < v9 on clone ce texte et on affiche son clone dessous, dans une position décalée et de façon floue (propriété DXImageTransform.Microsoft.Blur) ; pour les autres navigateurs, on ne fait qu'ajouter la propriété text-shadow à cet élément.
Utilisation
<html><body>
<p class="pastelShadow">mon texte ombré</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="PastelShadow.js"></script>
<script type="text/javascript">
jQuery(window).ready(function(){
jQuery(".pastelShadow").PastelShadow(
{
x: 3,
y: 3,
blur: 5,
color: "#333"
}
);
});
</script>
</html></body>
Exemple
mon texte ombré
Téléchargement
Télécharger le plugin PastelShadow.js
Compatibilité
Tous les navigateurs sauf Safari version < 2, Opera version < 9.4 et Firefox version < 3.0

Ca a marché direct, très simple d'utilisation, merci !
cfvjhgfjgjkgjkgvjhjkgjkhkjhkj
jhjhgkjgkjkjgkjBizarrement, chez moi ça fonctionne sur tous les navigateurs, sauf sur Internet Explorer 9 !!! Alors que la balise css text-shadow est censée être prise en charge depuis IE9…
Et encore plus bizarre, l'aperçu affiché dans cet article fonctionne parfaitement bien, y compris dans IE9, alors que si je copie/colle le code que vous donnez pour l'aperçu (mise à part le problème d'inversion des balises html/body) ça ne fonctionne plus sur IE9… Qu'avez-vous sur cette page de si particulier pour que le text-shadow fonctionne bien ici et nulle part ailleurs ?!?!