• Bordures, Arrondir, Ombre

    Bordures, Arrondir, Ombre

     

    Voilà trois propriétés CSS: border, border-radius et box-shadow / text-shadow:

     Bordures:

     

    Ajouter une bordure à un module, une image ou autres:

    #sélecteur {border: 1px style #color;}

    Ou vous pouvez faire côté par côté avec top, bottom, left et right:

    #sélecteur {border-bottom: 1px style #color;}

    - En rose: épaisseur de votre trait.
    - En vert: la couleur de la bordure, soit vous utilisez le code HTML de la couleur, soit le nom de la couleur en anglais (ex: #FF0000 ou red).
    - En orange: le style de trait.

    Il existe plusieurs styles de trait:

     border: 2px solid navy;

    Bordures

     border: 2px dotted navy;

    Bordures

     border: 2px dashed navy;

    Bordures

     border: 3px double navy;

     border: 3px ridge navy;

    Bordures

     border: 4px groove navy;

    Bordures

     border: 4px inset navy;

    Bordures

    border: 4px outset navy;
    Bordures

     

     Arrondir:

    Pour arrondir une image ou un module:

    #sélecteur {border-radius: Xpx;}

    Vous pouvez également arrondir 1,2 ou 3 côtés sur 4.

    #sélecteur {border-radius: Xpx Xpx Xpx Xpx;}

    Le 1er X correspond au côté en haut à gauche.
    Le 2ème X correspond au côté en haut à droite.
    Le 3ème X correspond au côté en bas à droite.
    Et le 4ème X correspond au côté en bas à gauche. 

     

     Ombre:

    Ajouter une ombre à un élément (un module, une image ou autres):

    #sélecteur {box-shadow: Xpx Xpx Xpx #color;}

    Le 1er Xpx est l'ombre horizontale vers la gauche.
    Le 2er Xpx est l'ombre verticale vers le bas.
    Le 3ème Xpx, plus le chiffre sera grand, plus votre ombre sera "élargie" et floutée.

    En vert: la couleur de l'ombre, soit vous utilisez le code HTML de la couleur, soit le nom de la couleur en anglais (ex: #FF0000 ou red).

    Attention ! Pour mettre une ombre à du texte il faut utiliser non pas box-shadow mais text-shaodw.

    #sélecteur {text-shadow: Xpx Xpx Xpx #color;}


  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :