• Arrondir les angles du blog

    Sur mon blog, comme je commençais à me lasser des menus et des images rectangulaires, j'ai cherché des codes qui me permettraient d'arrondir et d'adoucir les angles. ^^

    La bonne nouvelle, c'est qu'on n'a pas besoin d'avoir activé le javascript pour y parvenir !

    Il suffit d'aller dans "Apparence", "Modifier le thème" et "Ajouter du CSS".

    Si vous êtes intéressé(e), voici mes codes :

    1 - Pour arrondir les modules titres des menus

    #menu1 .module_menu_titre{
        -webkit-border-radius10px;     -moz-border-radius10px;     border-radius10px;}
    #menu2 .module_menu_titre{
        -webkit-border-radius10px;     -moz-border-radius10px;     border-radius10px;}
     

    2 - Pour arrondir les modules titres des articles

    .module_titre{    -webkit-border-radius10px;     -moz-border-radius10px;     border-radius10px;}
     

    3 - Pour arrondir la bande du header

    div#header {
    -webkit-border-radius15px;
    -moz-border-radius15px;
    border-radius15px;
    }

    4 - Pour arrondir toutes les images du blog

    .module_contenu img border-radius:30px 30px 30px 30px;}
    .module_menu_contenu img {border-radius:30px 30px 30px 30px;}

     

    BONUS : Voici le code pour mettre un halo coloré autour des images lorsque l'on passe le curseur dessus (comme c'est le cas en haut de l'article). A vous de déterminer la couleur que vous préférez à l'aide du code correspondant, à trouver ici.

    #content img:hover{   opacity1;   -webkit-box-shadow0px 0px 15px Code Couleur;
       box-shadow0px 0px 50px Code Couleur;
       }
     .module_contenu  img:hover {opacity2;   -webkit-transition500ms;  border-radius25px 25px 25px 25px;
        }
    .module_menu_contenu img:hover{
      opacity1;
      -webkit-box-shadow0px 0px 15px Code couleur;
      box-shadow0px 0px 50px Code couleur;
      }
     .module_menu_contenu img {  -webkit-border-radius30px;
      border-radius30px;
      -webkit-transition0.4s linear;
      transition0.4s linear;
    } 

     Et maintenant, à vous de jouer ! cool

    Pin It

    21 commentaires


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique