• Ombres

    Pour en mettre sur les fenêtres, les titres....

    RAPPELS :
    - Vous pouvez cliquer sur TOUTES les images pour les voir en plus grand
    - Le code CSS est à placer ici :

    Installer une police et l'utiliser

              T E X T E          

    Premièrement, voici comment mettre des ombres sur du texte.
    Vous choisissez votre sélecteur, puis mettez ce code :

     


    sélecteur{text-shadow:1px 1px 1px #COULEUR;}

    sélecteur : vous mettez le sélecteur de votre choix, par exemple "body, a"...
    COULEUR : champ à modifier.
    text-shadow : c'est la propriété qui vous permet de mettre de l'ombre à votre texte. Il y a quatre choses à modifier.

    1px : ce premier est pour mettre de la distance verticale. Plus vous mettez une valeur grande, plus la distance entre le texte et l'ombre sera grande.
    1px : ce second est pour mettre de la distance verticale. Plus vous mettez une valeur grande, plus la distance entre le texte et l'ombre sera grande.
    1px : l’épaisseur de l'ombre. Plus vous mettez une valeur grande, plus l'ombre sera floue.

    Prenons ce code :
    #body{text-shadow:2px 2px 1px #F15175;}

    Rendu sans le code Rendu avec le code

     

                B O X            

    Ce code est pour les contenus. Par exemple, pour mettre de l'ombre au contenu du menu. Ou des ombres aux fenêtres. Et bien ce code fonctionne exactement de la même manière que le premier à un détail près, ce n'est pas text-shadow mais box-shadow :


    sélecteur{box-shadow:1px 1px 1px #COULEUR;}

    sélecteur : vous mettez le sélecteur de votre choix, par exemple " module_contenu "...
    COULEUR : champ à modifier.
    box-shadow : c'est la propriété qui vous permet de mettre de l'ombre à votre boîte. Il y a quatre choses à modifier.

    1px : ce premier est pour mettre de la distance verticale. Plus vous mettez une valeur grande, plus la distance entre le texte et l'ombre sera grande.
    1px : ce second est pour mettre de la distance verticale. Plus vous mettez une valeur grande, plus la distance entre le texte et l'ombre sera grande.
    1px : l’épaisseur de l'ombre. Plus vous mettez une valeur grande, plus l'ombre sera floue.

    Prenons ce code :
    .module_contenu{box-shadow:0px 0px 5px #000;}

    Rendu sans le code Rendu avec le code

     

              I N T E R I E U R          

    Pour mettre l'ombre vers l’intérieur, il suffit de rajouter la valeur inset.


    sélecteur{box-shadow:1px 1px 1px #COULEUR inset ;}

    Prenons ce code :
    .module_contenu{box-shadow:0px 0px 5px #000 inset;}

    Rendu sans inset Rendu avec inset

     


  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :