[CSS] Décorer le contour des avatars

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 :

[CSS] Décorer le contour des avatars Screen22

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

peut tu mettre un rendu histoire de voir ce que cela donne

J'ai édité^^

merci peut tu expliquer les lignes à changer pour mettre les images voir autre

J'ai commenté certaines lignes, je ne peux pas faire plus, à moins de faire un autre tuto pour les bases du CSS.

je t'invite à le faire alors Smile

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 ?

C'est vrai que les bordures sont pareilles des quatre côtés, j'avais oublié qu'on pouvait raccourcir le code.

» [phpBB2] Mettre tous les avatars a la même taille

[CSS] Décorer le contour des avatars

[CSS] Décorer le contour des avatars

Sujets similaires

Sujets similaires