.ombre_css{ float:left; margin:0 1% 20px 1%; width:48%; background-color:#aaa; text-align:center; } /* Ombrage externe en CSS3 n1 */ #ombre_css_1{ /* Conseil : pour la lisibilit et la maintenance du site, organiser les proprits CSS utilisant une sandbox de faon dcroissante (Merci ric) */ -webkit-box-shadow:5px 5px 5px #656565; -khtml-box-shadow:5px 5px 5px #656565; -moz-box-shadow:5px 5px 5px #656565; -ms-box-shadow:5px 5px 5px #656565; -o-box-shadow:5px 5px 5px #656565; box-shadow:5px 5px 5px #656565; /* Pour Internet Explorer 8 et infrieure : - Attribut "Color" : couleur du halo - Attribut "Strength" : taille de l'effet - Attribut "Direction" : orientation du flou en degr */ filter:progid:DXImageTransform.Microsoft.Shadow(color='#656565', Direction=135, Strength=5); zoom:1; /* Complment CSS3 pour Internet Explorer, tlcharger sur http://css3pie.com/ */ behavior:url(/PIE/PIE.htc); } /* Ombrage interne en CSS3 n2 */ #ombre_css_2{ /* Les valeurs sont dans l'ordre suivant : - Ombre intrieure (inset) ou extrieur (laissez vide) - Dcalage vers la droite - Dcalage vers le bas - Taille du dgrad - Augmentation de la taille de l'ombre par rapport l'lment de dpart - Couleur du dgrad */ /* coins arrondis pour Chrome, Safari, Android */ -webkit-box-shadow:inset 5px 5px 5px 10px #656565; /* coins arrondis pour Konqueror */ -khtml-box-shadow:inset 5px 5px 5px #656565; /* coins arrondis pour Firefox et Mozilla */ -moz-box-shadow:inset 5px 5px 5px #656565; /* coins arrondis pour Internet Explorer */ -ms-box-shadow:inset 5px 5px 5px #656565; /* coins arrondis pour Opera */ -o-box-shadow:inset 5px 5px 5px #656565; /* coins arrondis par dfaut */ box-shadow:inset 5px 5px 5px 2px #656565; behavior:url(/PIE/PIE.htc); } /* Ombrage en CSS3 n3 */ #ombre_css_3{ -webkit-box-shadow:-15px 15px 15px 10px #656565; -khtml-box-shadow:-15px 15px 15px 10px #656565; -moz-box-shadow:-15px 15px 15px 10px #656565; -ms-box-shadow:-15px 15px 15px 10px #656565; -o-box-shadow:-15px 15px 15px 10px #656565; box-shadow:-15px 15px 15px 10px #656565; behavior:url(/PIE/PIE.htc); } /* Ombrage sur les textes en CSS3 n4 */ #ombre_css_4{ background-color:#fff; -webkit-text-shadow:5px 5px 5px #656565; -khtml-text-shadow:5px 5px 5px #656565; -moz-text-shadow:5px 5px 5px #656565; -ms-text-shadow:5px 5px 5px #656565; -o-text-shadow:5px 5px 5px #656565; text-shadow:5px 5px 5px #656565; } /* Ombrage multiple sur les textes en CSS3 n5 */ #ombre_css_5{ margin-top:30px; background-color:#fff; -webkit-text-shadow:2px 2px 3px #0f0 , 8px 8px 3px #f00 , 14px 14px 3px #00f; -khtml-text-shadow:2px 2px 3px #0f0 , 8px 8px 3px #f00 , 14px 14px 3px #00f; -moz-text-shadow:2px 2px 3px #0f0 , 8px 8px 3px #f00 , 14px 14px 3px #00f; -ms-text-shadow:2px 2px 3px #0f0 , 8px 8px 3px #f00 , 14px 14px 3px #00f; -o-text-shadow:2px 2px 3px #0f0 , 8px 8px 3px #f00 , 14px 14px 3px #00f; text-shadow:2px 2px 3px #0f0 , 8px 8px 3px #f00 , 14px 14px 3px #00f; } /* Ombrage pour faire des bords en CSS3 n6 */ #ombre_css_6{ margin-top:30px; background-color:#fff; color:#fff; -webkit-text-shadow: -1px 0 0 rgba(0, 0, 0, 0.8) , 1px 0 0 rgba(0, 0, 0, 0.8) , 0 -1px 0 rgba(0, 0, 0, 0.8) , 0 1px 0 rgba(0, 0, 0, 0.8); -khtml-text-shadow: -1px 0 0 rgba(0, 0, 0, 0.8) , 1px 0 0 rgba(0, 0, 0, 0.8) , 0 -1px 0 rgba(0, 0, 0, 0.8) , 0 1px 0 rgba(0, 0, 0, 0.8); -moz-text-shadow: -1px 0 0 rgba(0, 0, 0, 0.8) , 1px 0 0 rgba(0, 0, 0, 0.8) , 0 -1px 0 rgba(0, 0, 0, 0.8) , 0 1px 0 rgba(0, 0, 0, 0.8); -ms-text-shadow: -1px 0 0 rgba(0, 0, 0, 0.8) , 1px 0 0 rgba(0, 0, 0, 0.8) , 0 -1px 0 rgba(0, 0, 0, 0.8) , 0 1px 0 rgba(0, 0, 0, 0.8); -o-text-shadow: -1px 0 0 rgba(0, 0, 0, 0.8) , 1px 0 0 rgba(0, 0, 0, 0.8) , 0 -1px 0 rgba(0, 0, 0, 0.8) , 0 1px 0 rgba(0, 0, 0, 0.8); text-shadow: -1px 0 0 rgba(0, 0, 0, 0.8) , 1px 0 0 rgba(0, 0, 0, 0.8) , 0 -1px 0 rgba(0, 0, 0, 0.8) , 0 1px 0 rgba(0, 0, 0, 0.8); }