-
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-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
#menu2 .module_menu_titre{
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
2 - Pour arrondir les modules titres des articles
.module_titre{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
3 - Pour arrondir la bande du header
div#header {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}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{ opacity: 1; -webkit-box-shadow: 0px 0px 15px Code Couleur;
box-shadow: 0px 0px 50px Code Couleur;
}
.module_contenu img:hover {opacity: 2; -webkit-transition: 500ms; border-radius: 25px 25px 25px 25px;
}
.module_menu_contenu img:hover{
opacity: 1;
-webkit-box-shadow: 0px 0px 15px Code couleur;
box-shadow: 0px 0px 50px Code couleur;
}
.module_menu_contenu img { -webkit-border-radius: 30px;
border-radius: 30px;
-webkit-transition: 0.4s linear;
transition: 0.4s linear;
}Et maintenant, à vous de jouer !
Tags : arrondir, angles, menu, blog, lueur
-
Commentaires
Merci pour ce nouveau tuyau. J'ai arrondi chez moi aussi. Et puis j'ai trouvé d'autres astuces. Viens voir mes visiteurs !!!
bonjour je fais une erreur cela me met erreur alors on copie a partir -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
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
-
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 !
-
Ajouter un commentaire
Merci bien pour tous ces conseils !!! Je saurai où me rendre quand je me lancerai ...