Invité Bienvenu(e) à toi parmi nous !!!
 
AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Partagez | 
 

 [CSS] Décorer le contour des avatars

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Messages Messages : 85
Liberty'Point Liberty'Point : 3119
Age : 30

MessageSujet: [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)
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://cristal-dolls-forum.asiat-world.com/
Messages Messages : 2041
Liberty'Point Liberty'Point : 5960
Age : 17

MessageSujet: 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


Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://libertypub.topsujet.com
Messages Messages : 85
Liberty'Point Liberty'Point : 3119
Age : 30

MessageSujet: Re: [CSS] Décorer le contour des avatars   Mar 25 Juin - 16:01

J'ai édité^^


Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://cristal-dolls-forum.asiat-world.com/
Messages Messages : 2041
Liberty'Point Liberty'Point : 5960
Age : 17

MessageSujet: 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


Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://libertypub.topsujet.com
Messages Messages : 85
Liberty'Point Liberty'Point : 3119
Age : 30

MessageSujet: 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.


Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://cristal-dolls-forum.asiat-world.com/
Messages Messages : 2041
Liberty'Point Liberty'Point : 5960
Age : 17

MessageSujet: Re: [CSS] Décorer le contour des avatars   Mar 25 Juin - 17:31

je t'invite à le faire alors Smile


Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://libertypub.topsujet.com
Messages Messages : 215
Liberty'Point Liberty'Point : 3194
Age : 46
Localisation : Belgique

MessageSujet: 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 ?
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Messages Messages : 85
Liberty'Point Liberty'Point : 3119
Age : 30

MessageSujet: 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.


Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://cristal-dolls-forum.asiat-world.com/

Contenu sponsorisé


MessageSujet: Re: [CSS] Décorer le contour des avatars   

Revenir en haut Aller en bas
 

[CSS] Décorer le contour des avatars

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Contour Marron autour des avatars. Surlignement des liens en marron
» Contour ombré pour avatar.
» Contour de couleur et bord arrondi autour de l'avatar (avec template modifié)
» éliminer contour carte ?
» Avatar des invités/membres sans avatars

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: AIDES AUX FORUMS :: Tutos Codages-