• Propriété CSS SHADOW

    • La propriété  text-shadow  permet d'ajouter un effet d'ombre  sur un texte.

    Text-shadow se définit selon plusieurs critères et dans un ordre précis:

    text-shadow: [décalage horizontal] [décalage vertical] [netteté / flou de l'ombre portée] [couleur du texte de l'ombre] ;

     

    Exemple d'effets sur caractères de texte:

    texte blanc, ombre grise très nette et très décalée text-shadow: 0px 15px 5px grey;

     

    texte jaune sans ombre

    texte clair, ombre foncée, floue et peu décalée text-shadow: 2px 1px 2px black;

     

    texte noir sans ombre

    texte noir, ombre jaune, floue et peu décalée text-shadow: 2px 1px 2px yellow;
     
    style néon

    Ombres multiples

    polices pleines

     

    polices en creux
     
     
    • La propriété CSS box-shadow permet de mettre  une ombre  dégradée autour d'un élément,  texte ou image ou cadre ...

    On définit l'ombre grace à plusieurs critères qui sont enregistrés dans cet ordre:

    box-shadow: [décalage horizontal] [décalage vertical] [flou de l'ombre] [étendue de l'ombre] [couleur de l'ombre] [ombre interne / externe] ;

     

    Exemples d'effets sur cadre ou image:

     

    box-shadow: 0 0 10px 4px grey;  appliqué autour d'un cadre

     

    box-shadow à l'intérieur et l'extérieur d'un cadre

    exemple ombre sur image         box-shadow: 15px 15px 10px silver;

     

    Pour visualiser les effets en ligne, générateur de box-shadow 

     

    A venir... Les utilisations pour effets au passage de la souris:

    utilisation transition survol

     

     

     

     

     

     

    Partager via Gmail Yahoo! Google Bookmarks

    5 commentaires
//script feuille de style suppl