• Arrondir Les Avatars Des Derniers Visiteurs

    Par Ange-54 dans CSS le 14 Septembre 2013 à 19:06

    Merci à Nagalia

    Pour avoir les avatars des derniers visiteurs plus petits et pour pouvoir (également) les arrondir, voici le code CSS à coller dans l'emplacement CSS de votre blog :

    .module_menu_type_lastvisitors img {

    max-width: 60px;

    border-radius: 40px;

    }


    votre commentaire

  • Fait Pivoter Les Avatars Des Derniers Visiteurs

    Par Ange-54 dans CSS le 14 Septembre 2013 à 19:04

    Merci à Nagalia

    Fait pivoter les avatars des derniers visiteurs , et met un coin arrondi en pivotant,

    met également une couleur de fond aux avatars transparents.

     

    Voici le code CSS :

    .module_menu_type_lastvisitors img:hover {opacity: 1;   -webkit-transition: 500ms;
       -webkit-transform: rotate(10deg); 
       border-radius: 18px 18px 18px 18px;
       background-color: #bc9739;
       }

     Vous pouvez changer le nombre de px "pixels " pour les coins " ce qui est en rouge dans le code "

    Vous pouvez modifier le code de couleur " ce qui est en orange dans le code


    votre commentaire

  • Pivotement Des Avatars Dans Le Module Des Derniers Visiteurs

    Par Ange-54 dans CSS le 14 Septembre 2013 à 19:02

    Merci à Nagalia

    Voici le code pour faire pivoter les avatars dans le module des derniers visiteurs :
    .module_menu_type_lastvisitors img:hover { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ -o-transform:rotate(7deg); /* Opera */ }


    votre commentaire

  • Créer une classe

    Par Ange-54 dans CSS le 3 Septembre 2013 à 21:53

    Merci à Nagalia

    Sisi, c'est possible. Un exemple?

    Blaaaaaablaaaaaablaaa
    J'ai créé une "boite" dans mon article. L'apparence est géré grâce au css, et je l'insert dans une page avec la balise div en html


    C'est cool non? Je vous prévient quand même, il faut un minimum de connaissance en css pour faire ça. Mais pas de panique, il suffit simplement de faire un fond, de mettre un contour... Enfin, plein de propriété que vous pouvez trouver sur ce blog ou internet ;)

    Voici le code

    .nom_du_selecteur {propriété: valeur;}

    Il n'y a pas grand chose a expliquer... Vous avez déjà du remarquer que, à part les sélecteur généraux, ils sont toujours précédé d'un point "." ou d'un dièse "#"

    Je vous explique vite fait la différence: Précédé d'un point, cet objet peut se retrouver plusieurs fois dans une page (ex: les article"). C'est une classe. Précédé d'un dièse, il ne peut y en avoir qu'un (ex: header). C'est un identifiant.
    On approfondira tout ça plus tard.

    Donc, vous mettez un point (ou un dièse) puis le nom que vous voulez donner à votre classe SANS ACCENT et SANS ESPACE. Si vous voulez séparer deux mots, utiliser le tiret de soulignement "_"
    Ensuite, vous mettez des propriété. C'est fini pour la partie css ;)

     => Utiliser cette classe avec div.


    votre commentaire

  • Pseudo-classe

    Par Ange-54 dans CSS le 3 Septembre 2013 à 21:53

    Merci à Nagalia

    Voilà quelque chose dont j'aurais du parler il y a un moment, mais ça m'était sortie de la tête... Les pseudo-classe, qu'est-ce que c'est? Ce sont d'autres élément css qui vont permettre d'affiner le style de certaines classe (d'ou leur nom).

    Pseudo-classe dynamique :

    hover => lors du survole

    sélecteur:hover {propriété: valeur}


    active => Lors du clique

    sélecteur:active {propriété: valeur}


    focus => Séléctionné avec le clic ou par tabulation

    sélecteur:focus {propriété: valeur}



    Pseudo-classe de liens
    Ne peuvent s'utiliser qu'avec des liens

    link => Lien n'ayant pas encore été visité

    sélecteur a:link {propriété: valeur}


    visited => Lien ayant été visité

    sélecteur a:visited {propriété: valeur}



    Pseudo-classe de texte
    Ne peut s'utiliser qu'avec du texte

    first-line => Applique un style spécial à la première ligne du texte

    sélecteur p:first-line {propriété_de_texte: valeur}


    first-letter => Applique un style spécial a la première lettre du texte

    sélecteur p:first-letter {propriété_de_texte: valeur}

    votre commentaire