[Débutant] - Critique de http://ermitearodez.blogspot.fr/

Bonjour,
Je me mets activement au CSS depuis quelque temps car j'ai décidé de créer un blog alakon. Enfin bref, du coup je voulais un design personnalisé, je me suis donc attelé à la tâche. Ce n'est pas encore totalement fini pour le moment, les deux aspects qui me dérangent le plus dans cette mouture sont les couleurs d'arrieres plans (des articles et des widgets sur la droite) ainsi que les couleurs des textes.

Pour ce qui est des textes je pense finir par trouver mais je suis ouvert à toute suggestions ou critiques sur le reste

Ermite a Rodez

<pub> mention spéciale à l'amie qui a réalisé le background </pub>

Merci

NB : Bien évidemment, le HTML hors des articles n'est pas de mon fait. Pour ce qui est du CSS, vous ne voyez surement pas le fichier que j'ai chez moi mais pour le moment c'est un sale gloubi boulga, j'essaie de trouver un bon design en même temps que j'essaie de comprendre le fonctionnement de Blogger


EDIT : Ajout du CSS suivi de la définition des variables

Feuille CSS (en lien parce que trés conséquente): http://dl.dropbox.com/u/56951442/blog/blogCSS.css


Définitions des variables :

<!-- Variable definitions
   ==================== -->

   <Variable name="keycolor" description="Main Color" type="color" default="#c0a154" value="#000000"/>

   <Group description="Page Text" selector="body">
     <Variable name="body.font" description="Font" type="font"
         default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px Molengo"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#333333" value="#1d1d1d"/>
   </Group>

   <Group description="Backgrounds" selector=".main-inner">
     <Variable name="body.background.color" description="Outer Background" type="color" default="#c0a154" value="#77ccee"/>
     <Variable name="footer.background.color" description="Footer Background" type="color" default="transparent" value="#331100"/>
   </Group>

   <Group description="Links" selector=".main-inner">
     <Variable name="link.color" description="Link Color" type="color" default="#cc3300" value="#cc3300"/>
     <Variable name="link.visited.color" description="Visited Color" type="color" default="#993322" value="#993322"/>
     <Variable name="link.hover.color" description="Hover Color" type="color" default="#ff3300" value="#ff3300"/>
   </Group>

   <Group description="Blog Title" selector=".header h1">
     <Variable name="header.font" description="Title Font" type="font"
         default="normal normal 60px Georgia, Utopia, 'Palatino Linotype', Palatino, serif" value="normal normal 60px Georgia, Utopia, 'Palatino Linotype', Palatino, serif"/>
     <Variable name="header.text.color" description="Title Color" type="color" default="#ffffff"  value="#5e725a"/>
   </Group>

   <Group description="Blog Description" selector=".header .description">
     <Variable name="description.text.color" description="Description Color" type="color"
         default="#997755"  value="#5588aa"/>
   </Group>

   <Group description="Tabs Text" selector=".tabs-inner .widget li a">
     <Variable name="tabs.font" description="Font" type="font"
         default="normal normal 20px Georgia, Utopia, 'Palatino Linotype', Palatino, serif" value="normal normal 20px Georgia, Utopia, 'Palatino Linotype', Palatino, serif"/>
     <Variable name="tabs.text.color" description="Text Color" type="color" default="$(link.color)" value="#cc3300"/>
     <Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#000000" value="#000000"/>
   </Group>

   <Group description="Tabs Background" selector=".tabs-outer .PageList">
     <Variable name="tabs.background.color" description="Background Color" type="color" default="transparent" value="transparent"/>
     <Variable name="tabs.separator.color" description="Separator Color" type="color" default="$(body.background.color)" value="#77ccee"/>
   </Group>

   <Group description="Date Header" selector="h2.date-header">
     <Variable name="date.font" description="Font" type="font"
         default="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 18px Georgia, Utopia, 'Palatino Linotype', Palatino, serif"/>
     <Variable name="date.text.color" description="Text Color" type="color" default="#997755" value="#bdb6b3"/>
   </Group>

   <Group description="Post" selector="h3.post-title, .comments h4">
     <Variable name="post.title.font" description="Title Font" type="font"
         default="normal normal 30px Georgia, Utopia, 'Palatino Linotype', Palatino, serif" value="normal normal 30px Georgia, Utopia, 'Palatino Linotype', Palatino, serif"/>
     <Variable name="post.background.color" description="Background Color" type="color" default="transparent" value="transparent"/>
     <Variable name="post.border.color" description="Border Color" type="color" default="#ccbb99"  value="transparent"/>
   </Group>

   <Group description="Post Footer" selector=".post-footer">
     <Variable name="post.footer.text.color" description="Text Color" type="color" default="#997755" value="#332b2b"/>
   </Group>

   <Group description="Gadgets" selector="h2">
     <Variable name="widget.title.font" description="Title Font" type="font"
        default="normal normal 20px Georgia, Utopia, 'Palatino Linotype', Palatino, serif" value="normal normal 20px Georgia, Utopia, 'Palatino Linotype', Palatino, serif"/>
     <Variable name="widget.title.text.color" description="Title Color" type="color" default="#000000" value="#bbbbbb"/>
     <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#777777" value="#eceff2"/>
   </Group>

   <Group description="Footer" selector=".footer-inner">
     <Variable name="footer.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#ffffff"/>
     <Variable name="footer.widget.title.text.color" description="Gadget Title Color" type="color" default="$(widget.title.text.color)" value="#ffffff"/>
   </Group>

   <Group description="Footer Links" selector=".footer-inner">
     <Variable name="footer.link.color" description="Link Color" type="color" default="$(link.color)" value="#ffdd99"/>
     <Variable name="footer.link.visited.color" description="Visited Color" type="color" default="$(link.visited.color)" value="#eecc77"/>
     <Variable name="footer.link.hover.color" description="Hover Color" type="color" default="$(link.hover.color)" value="#ffffcc"/>
   </Group>

   <Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) url(//www.blogblog.com/1kt/watermark/body_background_birds.png) repeat scroll top left" value="$(color) url(http://4.bp.blogspot.com/-Ig6kJ7JklwQ/UIBv6FD5-3I/AAAAAAAAAI8/W5L48elBA9U/s1600/background.png) repeat scroll top left"/>
   <Variable name="body.background.overlay" description="Overlay Background" type="background" color="$(body.background.color)"
       default="transparent url(//www.blogblog.com/1kt/watermark/body_overlay_birds.png) no-repeat scroll top right" value="transparent none no-repeat scroll center center"/>
   <Variable name="body.background.overlay.height" description="Overlay Background Height" type="length" default="121px" value="0"/>

   <Variable name="tabs.background.inner" description="Tabs Background Inner" type="url" default="none" value="none"/>
   <Variable name="tabs.background.outer" description="Tabs Background Outer" type="url" default="none" value="none"/>
   <Variable name="tabs.border.size" description="Tabs Border Size" type="length" default="0" value="0"/>
   <Variable name="tabs.shadow.spread" description="Tabs Shadow Spread" type="length" default="0" value="0"/>

   <Variable name="main.padding.top" description="Main Padding Top" type="length" default="30px" value="0"/>
   <Variable name="main.cap.height" description="Main Cap Height" type="length" default="0" value="100px"/>
   <Variable name="main.cap.image" description="Main Cap Image" type="url" default="none" value="url(//www.blogblog.com/1kt/watermark/main_cap_flower.png)"/>
   <Variable name="main.cap.overlay" description="Main Cap Overlay" type="url" default="none" value="url(//www.blogblog.com/1kt/watermark/main_overlay_flower.png)"/>
   <Variable name="main.background" description="Main Background" type="background"
       default="transparent none no-repeat scroll top left" value="#66bb33 url(//www.blogblog.com/1kt/watermark/body_background_flower.png) repeat scroll top center"/>

   <Variable name="post.background.url" description="Post Background URL" type="url"
       default="url(//www.blogblog.com/1kt/watermark/post_background_birds.png)" value="url(//www.blogblog.com/1kt/watermark/post_background_birds.png)"/>
   <Variable name="post.border.size" description="Post Border Size" type="length" default="1px" value="1px"/>
   <Variable name="post.border.style" description="Post Border Style" type="string" default="dotted" value="dotted"/>
   <Variable name="post.shadow.spread" description="Post Shadow Spread" type="length" default="0" value="0"/>

   <Variable name="footer.background" description="Footer Background" type="background"
       color="$(footer.background.color)" default="$(color) url(//www.blogblog.com/1kt/watermark/body_background_navigator.png) repeat scroll top left" value="$(color) url(//www.blogblog.com/1kt/watermark/body_background_navigator.png) repeat scroll top left"/>

   <Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string"
       default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/>

   <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left"/>
   <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>

Modifié par Carval (19 Oct 2012 - 14:18)

Carval

a écrit :
les deux aspects qui me dérangent le plus dans cette mouture sont les couleurs d'arrieres plans (des articles et des widgets sur la droite) ainsi que les couleurs des textes

Houla ! C'est exact. Un header foncé sur fond sombre, des textes noirs et un titre et des liens rouges sur fond gris foncé semi-transparent sur une background-image sombre, et idem pour les widgets... l'ensemble n'est pas lisible.
Modifié par thierry (19 Oct 2012 - 12:39)

Ouep, pour les couleurs je sais, j'y réfléchis en ce moment. Ce que je n'arrive pas à trouver c'est quelle couleur utiliser pour remplacer le fond gris :x Il me faut bien quelque chose. Pour ce qui est des textes, tu suggères des couleurs claires ?

petit up pour dire que j'ai ajouté le code CSS avec les définitions des variables correspondantes

Même remarque que thierry : ce n'est pas lisible.

Sur un fond blanc (sans transparence) ce serait beaucoup mieux. Le problème c'est si tu tiens absolument à ce que l'on voit ton image de fond.

L'effet de changement de contraste au survol je n'aime pas du tout, pour moi c'est inutile. En plus il baisse le contraste dans la partie contenu alors qu'il l'augmente dans la colonne ce qui n'est pas logique.

bzh a écrit :
L'effet de changement de contraste au survol je n'aime pas du tout, pour moi c'est inutile. En plus il baisse le contraste dans la partie contenu alors qu'il l'augmente dans la colonne ce qui n'est pas logique.

Oui hum... Effectivement, ça c'est quand je l'ai créé, j'ai découvert les effets de transition et je trouvais ça cool donc je voulais absolument le voir -_- Je vais l'enlever dés que possible.

Sinon oui, j'aimerais qu'on puisse voir le background quand même.

Je vais donc enlever ce changement d'opacity et je mettrais quand même un peu transparent.

EDIT : J'ai enlevé et remis tel que c'était à l'origine, il faut maintenant que je trouve du mieux. Je reviendrais vers vous quand j'aurais réussi à le rendre plus lisible
Modifié par Carval (19 Oct 2012 - 14:51)

Han, c'est parfait ! Merci beaucoup !

Bon...

Pour .post-outer (ligne 312) il faut faire sauter l'opacity : un effet de transparence qui s'applique à tout les éléments contenus dans la div principale. Absolument pas souhaitable pour ce cas précis.

D'autant plus que l'effet de transparence n'est pas d'abord géré par ce code, mais par une image de 10X10px (post_background_birds.png).

Je propose de la supprimer au profit de ce code :

.post-outer {
    /* mettre ici le code css déjà présent, puis: */
    background: #fff; //ça c'est pour IE = ou > à 8... donc, pas d'effet de transparence.
    background: rgba(255,255,255,.8); //ça, c'est pour le reste du monde... .8 veut dire 80% d'opacité, à rèlger
}

Ce sera déjà beaucoup mieux.
Modifié par Olivier C (22 Oct 2012 - 18:56)