Skip to content


Css 3, ombre sur le texte, les transformation et les ombres sur les divisions

Le rêve de tout webmaster commence à ce concrétiser. En effet les ombres et les transformations sont désormé posible (Hors IE comme d’ab)

enfin bref voici les codes:

Les ombres sur un texte :

text-shadow: 2px 2px 2px #000;

Les ombres sur les div

.shadow3{
box-shadow: -6px -6px 10px #561A0B;
-webkit-box-shadow: -6px -6px 10px #561A0B;
-moz-box-shadow: -6px -6px 10px #561A0B;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#561A0B, offX=-6, offY=-6, positive=true);
}

box-shadow: la proprété css3 elle sera géré peut etre un jour
-webkit-box-shadow: pour opéra et chrome
-moz-box-shadow: Pour mozilla
filter: pour IE

Quelques exemples  de transformation :

div.votreclasse{
background-color: #FFFFFF;/* CSS3 webkit */
-webkit-transition-property: background-color, color, border-color, paddind;
-webkit-transition-duration: .5s, .3s,.5s,.3s;

-webkit-transition-timing-function: linear, ease-out, linear, ease-out;

/* CSS3 FF */

-moz-transition-property: background-color, color, border-color, paddind;
-moz-transition-duration: .5s, .3s,.5s,.3s;
-moz-transition-timing-function: linear, ease-out, linear, ease-out;

/* CSS3 un jour peut etre */
transition-property: background-color, color, border-color, paddind;
transition-duration: .5s, .3s,.5s,.3s;
transition-timing-function: linear, ease-out, linear, ease-out;

}

Posted in Css.

Tagged with , , , .


0 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.



Some HTML is OK

or, reply to this post via trackback.