En CSS, il n'existe pas nativement de méthode multi-navigateur pour faire de l'outline ou des ombre sur du texte.
Voici donc une fonction javascript qui fera tous ça pour vous…
Sur le principe, l'ombre est une duplication de l'objet principal avec 2px (ou plus) de décalage horizontaux et verticaux.
L'outline lui est plus complexe. il s'agit de 4 copies de l'objet principal décalés respectivement de 1px (ou plus) vers la gauche, droite, haut et bas.
Voici un petit exemple :
La méthode principale est la suivante :
var outliner = function(obj,outline,props) { /** * @exemple : * var properties= { * padding:2, //outline size * shadowColor:"#564", //outline color * textColor:"#999", //text color * fontSize:12 //text size * }; */ this._outlineOrShadow = function(props) { var span=[]; span[0]= document.createElement("span"); span[1]= document.createElement("span"); if (!props.shadow) { span[2]= document.createElement("span"); span[3]= document.createElement("span"); } span[4]= document.createElement("span"); span[5]= document.createElement("span"); span[0].innerHTML = props.content; span[1].innerHTML = props.content; if (!props.shadow) { span[2].innerHTML = props.content; span[3].innerHTML = props.content; } span[4].innerHTML = props.content; span[5].innerHTML = props.content; span[0].style.fontSize = props.fontSize+"px"; span[1].style.fontSize = props.fontSize+"px"; if (!props.shadow) { span[2].style.fontSize = props.fontSize+"px"; span[3].style.fontSize = props.fontSize+"px"; } span[4].style.fontSize = props.fontSize+"px"; span[5].style.fontSize = props.fontSize+"px"; span[0].style.color=props.shadowColor; span[1].style.color=props.shadowColor; if (!props.shadow) { span[2].style.color=props.shadowColor; span[3].style.color=props.shadowColor; } span[4].style.color=props.textColor; span[0].style.position="absolute"; span[1].style.position="absolute"; if (!props.shadow) { span[2].style.position="absolute"; span[3].style.position="absolute"; } span[4].style.position="absolute"; span[5].style.visibility="hidden"; if (!props.shadow) { span[0].style.marginLeft="-"+props.padding+"px"; span[1].style.marginTop="-"+props.padding+"px"; span[2].style.marginLeft="+"+props.padding+"px"; span[3].style.marginTop="+"+props.padding+"px"; } else { span[0].style.marginLeft="+"+props.padding+"px"; span[0].style.marginTop="+"+props.padding+"px"; span[1].style.marginLeft="+"+props.padding+"px"; span[1].style.marginTop="+"+props.padding+"px"; } span[5].style.lineHeight=props.fontSize + (props.padding *2) + "px"; props.obj.innerHTML=""; props.obj.appendChild(span[0]); props.obj.appendChild(span[1]); if (!props.shadow) { props.obj.appendChild(span[2]); props.obj.appendChild(span[3]); } props.obj.appendChild(span[4]); props.obj.appendChild(span[5]); }; var properties= { 'obj' : obj, 'content': obj.innerHTML, shadow : !outline, padding:2, shadowColor:"#564", textColor:"#999", fontSize:12 }; for (var i in props) properties[i] = props[i]; this._outlineOrShadow(properties); };
Commencez par placer le code ci-dessus entre les balide <head> et </head> de votre page.
Ensuite, appelez la fonction outliner en lui passant 3 paramètres :
{ padding:1, //shadow size shadowColor:"#33f", //shadow color textColor:"#f33", //text color fontSize:32 //text size }
Voici un exemple d'appel :
outliner(document.getElementById("outline"),true,{ padding:1, //shadow size shadowColor:"#33f", //shadow color textColor:"#f33", //text color fontSize:32 //text size });
20/08/2007 14:13 -
iDo – 
Discussion