• CSS || Derniers visiteurs

    CODES CSS

    ARRONDIR LES AVATARS

    .module_menu_type_lastvisitors img {
    border-top-left-radius: Xpx; /*en haut à gauche*/
    border-top-right-radius: Xpx; /*en haut à droite*/
    border-bottom-right-radius: Xpx; /*en bas à droite*/
    border-bottom-left-radius: Xpx; /*en bas à gauche*/
    }

    → Remplacez les X par une valeur chiffrée (50 pour être rond).

     

    CHANGER LA TAILLE DES AVATARS

    .module_menu_type_lastvisitors img {
    max-height: Xpx; /*hauteur maximale*/
    max-width: Xpx; /*largeur maximale*/
    margin-left: Xpx; /*marge extérieure à gauche de chaque avatar*/
    margin-bottom: Xpx; /*marge extérieure en bas de chaque avatar*/
    padding: Xpx Xpx Xpx Xpx; /*marge intérieure de chaque avatar*/}

    → Remplacez les X par une valeur chiffrée.

     

    BORDURE DES AVATARS

    .module_menu_type_lastvisitors img {
    border: Xpx solid #couleur;}

    → Remplacez X par une valeur chiffrée (taille de la bordure) et couleur par une couleur sous cette forme : #D35A9F.

     

    OPACITÉ DES AVATARS

    .module_menu_type_lastvisitors img{opacity: X;}

    → Remplacez X par une valeur ≤0.

     

    ROTATION DES AVATARS

    .module_menu_type_lastvisitors img:hover {
    -webkit-transform
    : rotate(Xdeg);
    -moz-transform: rotate(Xdeg);
    -o-transform: rotate(Xdeg);
    transform: rotate(Xdeg);
    -webkit-transition: Xs;
    -moz-transition: Xs;
    -o-transition: Xs;
    transition: Xs;}

    → Remplacez X par une valeur ≤360 (c'est le degrés de rotation) et X par une valeur chiffrée (à savoir que c'est le temps en secondes et que 5s c'est long).

     

    AVATARS EN NOIR ET BLANC

    Pour que les avatars soient en noir et blanc.

    .module_menu_type_lastvisitors img {
          -webkit-filter: grayscale(1);
          -moz-filter: grayscale(1);
          -o-filter: grayscale(1);
          filter: grayscale(1);
    }

    Pour que les avatars soient en couleur au survol.

    .module_menu_type_lastvisitors img:hover {
          -webkit-filternone;
          -moz-filter: none;
          -o-filter: none;
          filter: none;
    }

     

    DÉPLACER LE MENU

    .module_menu_type_lastvisitors{
              position: absolute;
              top: Xpx; /*espace entre le haut et le menu*/
              left: Xpx; /*espace entre la gauche et le menu*/
              min-widthXpx; /*largeur minimale*/
              max-widthXpx;} /*largeur maximale*/

    → Remplacez  absolute par fixed si vous voulez que le menu sois toujours à se place quand vous descendez) et X par une valeur chiffrée. min-width et max-width permettent d'avoir le menu toujours de même taille.


    J'espère que ça servira à certains ! Si vous avez un problème n'hésitez pas.


    Tags Tags :
  • Commentaires

    1
    Jeudi 31 Décembre 2015 à 17:36

    Merci pour cet article, je suis certaine que sa en aidera plus d'un, donc moi ! :) 

    Je voulais te demander, comment tu arrive à écrire un peu "flou", genre ça: 

    ARRONDIR LES AVATARS ou J'espère que ça servira à certains ! Si vous avez un problème n'hésitez pas.

    Dans l'article, il est un peu flou ou alors il y a une ombre mais j'aimerais bien savoir comment tu fais ça? ^^

    Merci ♥ 

    LesPipellettes

    • Voir les réponses


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :