Forum général.général Proposition de CSS pour DLFP

Posté par .
Tags : aucun
3
4
fév.
2009
Salut a tous,
Je viens ici et sans prétentions vous présentez ma CSS pour mon site préféré.
Elle est en grande partie basée sur la CSS de rootix : rootix-linuxfr-1.css
Mon souhait été de faire quelque chose de très simple et très épuré avec que des aplats de couleur, que des lignes droites et surtout la sobriété.
Je l'ai testé sur le css validator du w3c et grâce au très bon boulot qui a été fait sur la CSS originale, elle est parfaitement valide.


Je serai content de recevoir et/ou de lire vos commentaires à ce sujet.

Merci d'avance

Olivier


http://www.cems.uvm.edu/~olemaire/css/out-of-the-blue.css
  • # Exemple

    Posté par (page perso) . Évalué à 4.

    Vive les contributions. Malheureusement, sans un exemple concret, difficile de se faire une idée de la qualité de ton habillage CSS... Ne pourrais-tu pas donner un lien vers une copie d'écran, par exemple, pour qu'on puisse mieux s'en rendre compte ?
    • [^] # Re: Exemple

      Posté par . Évalué à 4.

      Tu peux mettre le lien fournit comme CSS par défaut à partir de tes préférences.

      Sinon je trouve que c'est un peu trop sombre et le bleu sur le noir un peu difficile à lire. La taille des fonts est très petite sur mon écran surtout pour les article.
    • [^] # Re: Exemple

      Posté par . Évalué à 2.

      C'est vrai, un petit screenshot, ça fait pas de mal.
      Ici une copie de ce post:
      http://olivierlemaire.files.wordpress.com/2009/02/csssnapsho(...)

      - Dans la vie, il faut toujours se fier aux apparences. Quand un homme a un bec de canard, des ailes de canard et des pattes de canards, c’est un canard. C’est vrai aussi pour les petits merdeux.

      • [^] # Re: Exemple

        Posté par . Évalué à 1.

        Hum, j'ai bien envie de la reprendre mais avec les couleurs de thème. Je vais tagguer le flux pour m'en souvenir de le faire.
      • [^] # Re: Exemple

        Posté par . Évalué à 3.

        erreur 404 :(
  • # pas glop :(

    Posté par (page perso) . Évalué à 1.

    C'est complètement illisible cette css... poubelle
    • [^] # Re: pas glop :(

      Posté par . Évalué à 2.

      Merci pour ton commentaire.
      Illisible dans quel sens, caractères trop petits, couleurs qui font mal aux yeux..??
      c'est un peu dur et sec comme commentaire. Je sais que je viens proposer et que je demande l'avis des lecteurs, mais sans détails, je ne peux guère faire progresser mon travail.

      Merci quand même.

      Olivier

      - Dans la vie, il faut toujours se fier aux apparences. Quand un homme a un bec de canard, des ailes de canard et des pattes de canards, c’est un canard. C’est vrai aussi pour les petits merdeux.

      • [^] # Re: pas glop :(

        Posté par (page perso) . Évalué à 2.

        Je vais essayer d'être plus constructif:

        la police de caractère est trop petit, je suis obligé de zoomer pour pouvoir lire
        Le contraste est mauvais. La couleur du texte est trop proche de la couleur du fond
        C'est trop sombre, contrairement à la majorité des sites web qui sont sur un contraste clair, passer d'un seul coup sur du tout foncé abime les yeux.
        La couleur verte flashy est trop... flashy.

        Bref, c'est très bien comme couleur pour un environnement de type terminal, mais pas du tout pour un site web.
        • [^] # Re: pas glop :(

          Posté par . Évalué à 1.

          c'était un peu l'idée: faire un style qui se rapproche d'un terminal. Pour le texte, je pourrais peut être utiliser une police de 11 ou 12px, et un gris plus clair pour ainsi augmenter le contraste, éclaircir les liens en choisissant un bleu lui aussi plus clair et pour le code je ne sais pas trop. A vrai dire le vert me semblait intéressant parce que justement c'était flashy et que ça faisait bien ressortir l'idée que c'est pas du texte "normal".

          Pour le cote sombre, moi j'aime bien les fonds sombres (parait que ça consomme moins d'énergie), mais c'est vrai que ça doit pas faire penser a une cave non plus.

          Pour la bande en haut, je pensait la faire passer de la même couleur que le fond pour le code...ça fait pas grand chose mais ça la démarque du reste du contenu.


          Olivier

          - Dans la vie, il faut toujours se fier aux apparences. Quand un homme a un bec de canard, des ailes de canard et des pattes de canards, c’est un canard. C’est vrai aussi pour les petits merdeux.

      • [^] # Re: pas glop :(

        Posté par . Évalué à 2.

        Ben moi pour ma part, je trouve en effet que les caractères sont trop petits.

        Et aussi je trouve que le bleu choisi pour les liens ne ressort pas assez (mais bon avec une taille plus grande ça va mieux quand même).

        Et une dernière critique, j'aime bien le fait que le fond du cadre des journaux/dépêches/commentaires/... soit différent du fond de la page.

        Voilà j'ai fini :) ... a non il y a aussi les boutons pour monter/descendre/fermer les boîtes qu'on ne voit presque plus mais bon comme je ne m'en sert jamais ça me gène pas.

        En tout cas j'aime bien l'idée d'un fond sombre.
  • # Moi j'aime beaucoup!

    Posté par (page perso) . Évalué à 1.

    Je trouve l'idée très bonne, que linuxfr ressemble à un terminal ça me plaît !
  • # Merci -- Modification(s)

    Posté par . Évalué à 1.

    Merci a tous pour vos commentaires et votre soutien.
    J'ai fait quelques changements par rapport a ma première proposition. Tout d'abord la première CSS que j'avais proposée se trouve maintenant a l'adresse suivante:
    http://www.cems.uvm.edu/~olemaire/css/initial-out-of-the-blu(...)
    La CSS modifiée se trouve toujours a la même adresse:
    http://www.cems.uvm.edu/~olemaire/css/out-of-the-blue.css

    Au niveau des changements:
    X La boite a droite des dépêches et maintenant plus large pour éviter que son contenu ne déborde du cadre.
    X La barre de menu (menubar) a été très légèrement modifiée: augmentation de la marge a droite, fond un peu plus clair pour la faire légèrement ressortir.
    X ajout d'une marge gauche et droite pour les commentaires pour éviter que ces derniers ne soient collés contre le cadre.
    X les titres des commentaires: fond un peu plus clair, bordures seulement gauche et bas
    X Pour la police j'ai ajouté font-size: 12px; dans la party body.
    X la couleur du texte est légèrement plus claire (pour le bleu et le gris)

    merci pour toutes autre suggestion.

    Olivier

    - Dans la vie, il faut toujours se fier aux apparences. Quand un homme a un bec de canard, des ailes de canard et des pattes de canards, c’est un canard. C’est vrai aussi pour les petits merdeux.

    • [^] # Re: Merci -- Modification(s)

      Posté par . Évalué à 1.

      Ça va mieux je trouve.
      Il y a juste que dans les titres des journaux on ne voit pas le début qui est "Journal : ". Ça le fait aussi avec les titres des sondages et pour les forums et les dépêches avec le ':' entre la catégorie et le titre.
      • [^] # Re: Merci -- Modification(s)

        Posté par . Évalué à 1.

        En effet, j'ai remarqué ça mais je n'arrive pas a le rectifier.

        - Dans la vie, il faut toujours se fier aux apparences. Quand un homme a un bec de canard, des ailes de canard et des pattes de canards, c’est un canard. C’est vrai aussi pour les petits merdeux.

Suivre le flux des commentaires

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.