-
Bordures, Arrondis, Ombre, Contour de texte
Voilà trois propriétés CSS: border, border-radius et box-shadow / text-shadow:
É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;
border: 2px dotted navy;
border: 2px dashed navy;
border: 3px double navy;
border: 3px ridge navy;
border: 4px groove navy;
border: 4px inset navy;
border: 4px outset navy;
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%;
border-radius: 10px 100px / 120px;
border-radius: 50% 20% / 10% 40%;
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).
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é !
Tags : Bordures, Arrondir, Ombre, border-radius
-
Commentaires
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. :)
Bonjour mais vos codes doivent être erronés j’essaye mais sa ne marche pas
Suivre le flux RSS des commentaires
Vous devez être connecté pour commenter
Codages et libre service
-
EklaFastoche (codages et tutos)
EMSIHPARG (LS et dessins)
Fantasy Graph' (codages et LS)
Je tripote au lycée (codages et tutos)
-
Créer mon blog
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!
Salut !
Pour les lignes sous les liens c'est ce tuto-ci, sauf qu'au lieu de mettre un fond tu mets une bordure en bas. (border-bottom).
Et pour ajouter un élément devant un lien c'est ce code-ci:
.module_menu_type_lastarticles a::before { content: '» ';}
Et au survol:
.module_menu_type_lastarticles a:hover::before { content: '• ';}
aww! J'ai trouvé!! Merci. Il y a juste une chose, comment on fait pour que les liens ne soit pas surlignés lorsque la souris les survol??
Enlève le background. ou mets "background: none;" je pense que ça devrait marcher.
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.
Pour mes derniers commentaires j'ai utilisé ce code-ci :
#module_menu_contenu155696098 li {
border-bottom: 1px solid #E16E36;
}
Faut juste que tu changes le numéro en rouge par le numéro de ton module. Pour les derniers sujets ce doit être la même chose, suffit de changer le sélecteur. ;)