Des exemples de CSS3 au service du graphisme...

Les ombres portées...

Sur une Image...

La régle CSS pour l'ombrage :
.ombrageImage {
/* UNE BORDURE AUTOUR DU LOGO*/
border: 1px solid #fff;
/* spécification CSS3>*/
box-shadow: 5px 5px 2px #000;
/*La propriété doit être préfixée sur des versions antérieures par
-moz- pour Firefox <4
-webkit- pour Chrome <10, Safari <5.1 et Android ainsi que Safari Mobile <5.0*/
-moz-box-shadow: 5px 5px 2px #000;
-webkit-box-shadow: 5px 5px 2px #000;
}

Et le code pour Internet Explorer...
<!--[if lte IE 8]>
<style type="text/css">
.ombrageImage {
filter:progid:DXImageTransform.Microsoft.Shadow(color='#000',Direction=135,Strength=2);
zoom: 1;
}
</style>
<![endif]-->

Sur du texte... ForImage

Fonctionne sur Chrome, Safari 3, Firefox 3.1 et Opera 9.5.
Ne fonctionne pas sur IE6, IE7, IE8

La régle CSS correspondante :
.ombrageTexte {
font-size: 48px;
line-height: 80px;
text-shadow: 4px 4px 2px #000;
}

Sur du texte... ForImage

Fonctionne sur Chrome, Safari 3, Firefox 3.1 et Opera 9.5.
Ne fonctionne pas sur IE6, IE7, IE8

La régle CSS correspondante :
.ombrageTexte2 {
color: #000;
font-size: 48px;
line-height: 80px;
text-shadow:0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;