• Arrondir les angles du blog

    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

    « Mes romans préférés : les comédies de Gilles LegardinierIdées cadeaux pour les fêtes ! »
    Pin It

    Tags Tags : , , , ,
  • Commentaires

    1
    Jeudi 17 Décembre 2015 à 18:10

    Merci bien pour tous ces conseils !!! Je saurai où me rendre quand je me lancerai ...

    2
    Jeudi 17 Décembre 2015 à 18:46

    En fait, on se prend vite au jeu ! Quand on commence, on n'a plus envie de s'arrêter ! ^^

    3
    Jeudi 17 Décembre 2015 à 18:59

    Merci pour ce nouveau tuyau. J'ai arrondi chez moi aussi. Et puis j'ai trouvé d'autres astuces. Viens voir mes visiteurs !!!

    4
    Jeudi 17 Décembre 2015 à 19:09

    Et hop ! ^^ Tu m'invites, je viens ! 

    J'adore le double cadre autour de tes visiteurs ! C'est super joli !

      • Jeudi 17 Décembre 2015 à 19:11

        Tu as essayé de passer le curseur dessus pour voir ???

    5
    Vendredi 18 Décembre 2015 à 09:28

    Oui, ça tourne super vite !!!!! C'est génial !!!!!!!!

    6
    Vendredi 18 Décembre 2015 à 09:33

    On s'amuse comme des gamines ! he

      • Vendredi 18 Décembre 2015 à 09:38

        Exactement ! Mais ça fait du bien ! yes

        Passe une bonne journée.

        Bises

    7
    Vendredi 18 Décembre 2015 à 09:36

    Vraiment, les filles, ça sent les vacances !!!

      • Vendredi 18 Décembre 2015 à 09:50

        Tu fais un peu de déco aussi Multik ???!!!

    8
    Vendredi 18 Décembre 2015 à 10:58

    Pas encore le temps, ça viendra...

    9
    Dimanche 20 Décembre 2015 à 18:58

    Oh c'est chouette, je crois que je vais essayer.... Merci !

      • Dimanche 20 Décembre 2015 à 19:02

        De rien !

        Merci de ta visite. Bonne soirée ! smile

    10
    Dimanche 20 Décembre 2015 à 19:09

    Ça donne envie d'essayer !

    11
    Mardi 22 Décembre 2015 à 11:22

    bonjour je fais une erreur cela me met erreur alors on copie a partir   -webkit-border-radius10px;     -moz-border-radius10px;     border-radius10px;}

    merci

    super beau ton blog et couleur comme j aime enfin plein d astuce

    j ai bien du mal a faire le mien bonne journée a toi

     

      • Mardi 22 Décembre 2015 à 11:28

        Bonjour Lilablou,

        Je n'ai pas tout compris à ton message. Il y a quelque chose que tu n'arrives pas à faire ? Normalement, les codes fonctionnent pourtant.

        Merci pour les compliments en tout cas et bon courage pour ton blog !

        A bientôt !

    12
    Mardi 22 Décembre 2015 à 12:03

    oui merci dit on fait un copier a partir de quel endroit le trait merci

    13
    Mardi 22 Décembre 2015 à 12:11

     border-radius:30px 30px 30px 30px; CELA ME MARQUE ERREUR CODE FAUX TU PEUX M AIDER

    14
    Mardi 22 Décembre 2015 à 12:16

    J AI REUSSIS LES PHOTOS ARRONDIES

    MAIS POUR LE RESTE JE NE SAIS PAS QUOI PRENDRE OU JE COMMENCE MERCI

      • Mardi 22 Décembre 2015 à 14:42

        A chaque fois, il faut prendre et copier le code en entier, avec tous les symboles. Tes modules doivent être en couleur pour que tu puisses voir les arrondis.

        Pour le dernier code CSS (le bonus), tu dois remplacer les "Codes Couleur" par le nom de la couleur que tu souhaites (en anglais, je sais que ça fonctionne), ou par un code que tu trouveras sur le site que j'ai indiqué...

        Voilà... J'espère que ça t'aide ! yes

    15
    Mardi 22 Décembre 2015 à 15:17

    MERCI  j ai réussit les photos arrondis je persiste bonne journée a toi

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :