• 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

    1
    Mercredi 22 Août à 17:56

    Salut! Je cherche deux codes depuis hier. Je sais pas si tu pourrais m'aider mais je préfère demander tout de même, on ne sait jamais.

    Je voulais savoir comment tu as fait pour mettre une ligne sous chacun des liens dans les modules & comment faire pour ajouté quelque chose devant comme un trait au survol de la souris ou bien des signes (», >, etc..) J'ai beau chercher partout, je ne trouve pas du tout de réponse à mes deux questions. 

    Merci d'avance!

    • Voir les réponses
    2
    Mercredi 22 Août à 19:19

    merci beaucoup! :)

    3
    Mercredi 22 Août à 21:07

    Non, ça ne fonctionne pas mais c'est pas grave ^w^. Avec ce que j'ai changé, ça semble pas mal. Sinon, une dernière chose, comment faire pour mettre les lignes en dessous d'un texte? parce que j'essaie de le faire avec le code que tu m'as donner mais ça ne le fait qu'en dessous des liens. J'aimerais pouvoir le faire également pour les derniers commentaires & dernier sujets mais lorsque je le fais, ça déplaces le texte et met la ligne en dessous du lien.

     

    edit: finalement avec un peu de travail, j'ai trouvé ce code: text-decoration: none, ça enlève la barre blanche en dessous des liens. :)

    • Voir les réponses
    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :