• Avoir les mêmes visiteurs que moi (apparence )

    On se retrouve pour un petit tutoriel qui va vous aider à faire des avatars visiteurs comme les miens ( oui, les mêmes ! Avec l'opacité, les coins arrondi, la rotation et la position :) )

    J'espère que sa va vous plaire ^^

    Tout sa est à coller dans le css, je vous éclaire :

    Dans la barre en haut de votre blog Apparence < Modifier le thème < Ajouter le CSS ( descendez tout en bas )

     

    Le code pour les visiteurs opaques ( si vous voulez que sa reste intact ) :

    .module_menu_type_lastvisitors a img,.module_menu_type_lastvisitors a:link img  { opacity: 0.4;
    filter:alpha(opacity=40);
    -moz-opacity: 4.0;
    }

    Le code pour les visiteurs opaques 2 ( si vous voulez qu'ils changent au survol de la souris )

    .module_menu_type_lastvisitors a:hover img  {
    opacity: 1;
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    }

    Note : vous devez coller les 2 codes si vous voulez que sa change au survol !

    Pour la position :

    .module_menu_type_lastvisitors{position: absolute;
                         top: 230px;
                         margin-left: 80px;}

     

    Ce que j'ai mis en violet foncé, vous pouvez le changer, sachant que top, c'est pour la hauteur et margin-left, c'est... pour la position horizontale.

     

    Pour faire tourner les avatars :

     .module_menu_type_lastvisitors img:hover {
            opacity: 1;
            -webkit-transition: 1000ms;
            -webkit-transform: rotate(20deg);
            }

     Vous pouvez encore une fois changer les valeurs qui sont en foncés ( sachant que pour le truc (20deg), vous pouvez mettre 360 et il fera un tour complet ;) )

    Pour les coins arrondis comme les miens :

     .module_menu_type_lastvisitors img {  -webkit-border-radius: 30px;
          border-radius: 30px;
          -webkit-transition: 0.4s linear;
          transition: 0.4s linear;
        }

     Voilà ^^

     

     


  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :