-
Par Christall le 17 Décembre 2015 à 15:18
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 !
21 commentaires
Suivre le flux RSS des articles de cette rubrique
Suivre le flux RSS des commentaires de cette rubrique