Table des matières
Niveau
..........
En rapport...

Créer des textes avec des ombre ou de l'outline

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.

Exemple

Voici un petit exemple :

Ceci est un test d'outline
Ceci est un test d'ombre

Vous pouvez télécharger son code ici.

Code

La méthode principale est la suivante :

javascript
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);
	};

Utilisation

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 :

Les propriétés de votre texte se déclare sous forme d'objet.
ex :

javascript
{
	padding:1, //shadow size
	shadowColor:"#33f", //shadow color
	textColor:"#f33", //text color
	fontSize:32 //text size
}

Voici un exemple d'appel :

javascript
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 –