Cassandra.
Messages : 85 Liberty'Point : 8059 Age : 37
| Sujet: [CSS] Décorer le contour des avatars Mar 25 Juin - 6:04 | |
| Voici un tuto simple pour embellir les avatars, c'est uniquement du CSS. Ceci ne fonctionne que dans les sujets, et non en regardant un profil. Le code : - Code:
-
.postdetails.poster-profile a img /* Décoration des avatars */ { -webkit-border-radius: 10px; /* Préfixe vendeur */ -ms-border-radius: 10px; -o-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /* Arrondi de la bordure */ border-bottom: 3px #ff8595 solid; /* Bordure du bas, épaisseur, couleur et forme de la bordure */ border-top: 3px #ff8595 solid; /* Bordure du haut, etc */ border-left: 3px #ff8595 solid; border-right: 3px #ff8595 solid; } Le rendu : (c'est moi sur l'avatar) Vous êtes libres de modifier le code à votre guise^^ Si vous avez une question demandez-moi, je ne mords pas.
Dernière édition par Cassandra. le Mar 25 Juin - 16:00, édité 1 fois (Raison : Recommandation de Manon88) |
|
Manon88
Messages : 2041 Liberty'Point : 10900 Age : 24
| Sujet: Re: [CSS] Décorer le contour des avatars Mar 25 Juin - 8:37 | |
| peut tu mettre un rendu histoire de voir ce que cela donne |
|
Cassandra.
Messages : 85 Liberty'Point : 8059 Age : 37
| Sujet: Re: [CSS] Décorer le contour des avatars Mar 25 Juin - 16:01 | |
| |
|
Manon88
Messages : 2041 Liberty'Point : 10900 Age : 24
| Sujet: Re: [CSS] Décorer le contour des avatars Mar 25 Juin - 17:02 | |
| merci peut tu expliquer les lignes à changer pour mettre les images voir autre |
|
Cassandra.
Messages : 85 Liberty'Point : 8059 Age : 37
| Sujet: Re: [CSS] Décorer le contour des avatars Mar 25 Juin - 17:31 | |
| J'ai commenté certaines lignes, je ne peux pas faire plus, à moins de faire un autre tuto pour les bases du CSS. |
|
Manon88
Messages : 2041 Liberty'Point : 10900 Age : 24
| Sujet: Re: [CSS] Décorer le contour des avatars Mar 25 Juin - 17:31 | |
| je t'invite à le faire alors |
|
SkySky
Messages : 215 Liberty'Point : 8134 Age : 53 Localisation : Belgique
| Sujet: Re: [CSS] Décorer le contour des avatars Jeu 18 Juil - 13:30 | |
| Bonjour, Voici le code CSS décortiqué pour tout débutant : - Code:
-
.postdetails.poster-profile a img /* Décoration des avatars */ { -webkit-border-radius: 10px; /* Préfixe vendeur */ -ms-border-radius: 10px; -o-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /* Arrondi de la bordure */ border-bottom: 3px #ff8595 solid; /* Bordure du bas, épaisseur, couleur et forme de la bordure */ border-top: 3px #ff8595 solid; /* Bordure du haut, etc */ border-left: 3px #ff8595 solid; border-right: 3px #ff8595 solid; } Allez c'est parti :
- .postdetails.poster-profile a img : Il s'agit du code CSS qui agit sur l'image de l'avatar
- -webkit-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; : On utilise plus cela car cela prend de la place et le CSS3 offre plus de possibilité ...
Donc on va juste mettre : border-radius: 10px; Ce code permet d'arrondir les angles d'un cadre ou d'une image
- border-bottom: 3px #ff8595 solid; border-top: 3px #ff8595 solid; border-left: 3px #ff8595 solid; border-right: 3px #ff8595 solid; : on utilise plus non plus pour les mêmes raisons cité plus haut ...
Donc le bon code sera : border:3px #ff8595 solid; Il s'agit de l'encadrement 3 px c'est la largeur du cadre #ff8595 c'est le code couleur du cadre solid est le fait d'avoir un cadre en ligne continu
Donc en CSS3 (fonctionne sur tout les navigateurs sauf IE version inférieurs a 9), le code sera celui ci : - Code:
-
.postdetails.poster-profile a img { border-radius: 10px; border: 3px #ff8595 solid; } Vous ne trouvez pas que ce code est plus digeste du coup ? |
|
Cassandra.
Messages : 85 Liberty'Point : 8059 Age : 37
| Sujet: Re: [CSS] Décorer le contour des avatars Ven 19 Juil - 11:27 | |
| C'est vrai que les bordures sont pareilles des quatre côtés, j'avais oublié qu'on pouvait raccourcir le code. |
|
| Sujet: Re: [CSS] Décorer le contour des avatars | |
| |
|