• Ombres et lumières

    Par Maximum 34 dans 8-Classiques CSS le 8 Septembre 2013 à 17:14

    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

     

     

     

     

     

     

    « StromaeRécupérer flux RSS pour faire page archives »
    Partager via Gmail Yahoo! Google Bookmarks

  • Commentaires

    1
    danyblue Profil de danyblue
    Jeudi 21 Novembre 2013 à 19:58
    danyblue

    COUCOU SUPER LE SITE A BIENTOT

    Répondre
    2
    Maximum 34 Profil de Maximum 34
    Jeudi 21 Novembre 2013 à 21:06
    Maximum 34

    Merci danyblue, c'est sympa de laisser un petit mot.

    je te souhaite plein de bonnes choses pour ton blog à toi...

    A bientot

    Répondre
    3
    Cat The♥Feline Profil de Cat The♥Feline
    Mercredi 24 Février 2016 à 00:49
    Cat The♥Feline

    Coucou! Ton site est SUPER beau, je reviendrais "lézarder" bientôt hihihi he Bonne continuation. BiZ♥Cat

    Répondre
    4
    Maximum 34 Profil de Maximum 34
    Jeudi 25 Février 2016 à 10:47
    Maximum 34

    Bonjour The Feline, 

    Merci pour ton passage et ton gentil mot.

    Ton blog est super aussi
    j'adore les chats cool

    BIZZZ

    Répondre
    5
    Cat The♥Feline Profil de Cat The♥Feline
    Jeudi 25 Février 2016 à 20:36
    Cat The♥Feline

    Bonsoir Maximum 34

    Merci pour ton passage et ton agréable message. Je fais des créations tous genres, à thème aussi et j'adore les chats également. Bonne soirée et A Pluche hihi. happy BiZ♥Cat

    Répondre


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl