Bordures, Arrondir, Ombre  Évidemment, à la place de #selecteur, vous mettez votre sélecteur.

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 violet : votre sélecteur. (à changer !)
- En rose : épaisseur de votre trait.
- En orange : le style de trait. (voir plus bas pour voir les styles de traits existants)
- 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). 

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

 

Arrondit :

Pour arrondir une image ou un module :

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

Vous pouvez également donner un arrondi différent pour chaque coin.

#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.
Le 4ème X correspond au côté en bas à gauche. 

Attention, pour les images, n'oubliez pas d'ajouter "img" à votre sélecteur.

.module_menu_type_lastvisitors img {border-radius: Xpx;}

 

Pour un peu plus de spécifier :

border-radius: 10% / 50%;

border-radius: 10px 100px / 120px;

border-radius: 50% 20% / 10% 40%;

 

border-radius: 10% / 50%;

Bordures, Arrondir, Ombre

border-radius: 10px 100px / 120px;

Bordures, Arrondir, Ombre

border-radius: 50% 20% / 10% 40%;

Bordures, Arrondir, Ombre

Ombres :

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).

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

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

 

Contour texte

À l'aide d'un générateur, vous avez aussi la possibilité de créer un contour autour de votre texte avec text-shadow. 

Exemple :

Texte avec un épais contour orange foncé !

→ Allez sur le générateur.

Retour à l'accueil