25 techniques CSS pour être plus efficace (partie 2)

Le 9 mai 2007

Lors d’un précedent article je présentais la première partie des techniques CSS. Voici la suite avec des outils pour générer du code en ligne, valider votre site ou encore pour optimiser le code CSS.

Design

1.

Une bibliothèque de Modèle CSS open source
technique css 9
Vous pouvez utiliser un Générateur en ligne pour créer des modèles CSS. Mais je préfère l’utilisation de ce site car il offre des modèles CSS open source de très bonnes factures que nous pouvons utiliser comme fondations à tous les projets web.

2.

Une barre de menu CSS qui se chevauche
technique css 14
Une belle réalisation de menu CSS où les onglets se chevauchent les uns les autres.

3.

Rendre vos formulaires accesibles
technique css 3
Créer des formulaires graphiques et cohérents en même temps.

4.

Faire de jolis Boutons en CSS
technique css 2
Techniques pour intégrer facilement un graphique en barres horizontales.

5.

Positionnement vertical centré
technique css 5
Beaucoup de personnes cherchent encore la meilleure façon de centrer verticalement, voici une technique.

6.

Un pied de page efficace en CSS
technique css 7
A tous ceux qui ont déjà essayé de faire un pied de page fixe en CSS, le cauchemar est fini.

7.

Un site qui change de peau au fil de la journée
7 possibilités de voir le site en fonction du moment où l’on s’y connecte. Un peu de CSS et de javascript sont nécessaire pour réaliser cet effet et sont disponible en téléchargement.

8.

20 sources pour créer un diaporama (slideshow) dans votre site
technique css 15
20 scripts sont disponibles pour intégrer un slideshow en javascript et CSS dans votre site.

Gagner du temps

9.

Pour tester et calculer les tailles de ces polices
technique css 13
Une page web qui vous permet de tester la taille de vos textes ainsi que la hauteur des lignes (Baseline Height).

10.

Une page listant la plupart des polices (fontes) du web
technique css 19
Avec cette page plus besoin de perdre son temps à tester le rendu d’une police. Sur ce site vous avez toutes les polices web et vous pouvez ainsi montrer les différentes possibilités à un collaborateur ou un client.

11.

Une meilleure gestion de vos liens « plus d’informations »
technique css 16
Une alternative pour afficher du texte au passage de la souris sur le lien « plus d’information ».

12.

Accélérer le chargement de vos images
technique css 8
Une nouvelle façon d’envisager le chargement des images (icônes) en les regroupant dans une seule.

13.

Générateur de Thèmes pour WordPress
technique css 4
Ce générateur en ligne peut créer votre propre thème WordPress sans aucune connaissance en HTML, JS, PHP ou CSS.

14.

Création en ligne de vos liste
technique css 17
Grâce à ce service vous pouvez créer en ligne les listes avec leur modèle CSS en quelques clics.

Statistiques, schémas

15.

Des statistiques graphiques grâce aux CSS
technique css 10
Une solution basée sur les feuilles de style CSS pour mettre en valeur de façon élégante et simple diverses données à présenter.

17.

Des camemberts en CSS
technique css 11
Une technique pour afficher des pourcentages sous forme de camemberts.

18.

Plan plus complexe
technique css 12
Permet d’afficher un plan hiérarchique ou à la façon d’un organigramme.

19.

Reservez une chambre avec du javascript et CSS
technique css 2
Un excellent article pour démontrer une fois de plus qu’on peut rendre les interfaces plus simple à l’aide des CSS et du javascript (voici la démo).

Articles

20.

Problèmes & solutions avec les CSS
technique css 1
Les 8 solutions aux problèmes courants rencontrés avec les CSS.

21.

Les meilleurs sites proposant des galeries de sites CSS
Cet article répertorie tous les sites qui disposent d’une galerie de sites estampillés CSS. Une mine en matière d’inspiration.

22.

Des astuces pour écrire des CSS
Un très bon article sur la pratique des CSS et sur les erreurs à éviter pour être plus efficace.

23.

Des CSS plus efficaces grâce aux raccourcis
Simplifier et organiser le contenu de vos CSS.

Outils

24.

10 outils pour valider votre site
Des outils pour valider les standards XHTML, HTML, CSS, RSS et sur l’optimisation des pages.

25.

Voir simultanément votre site sous Internet Explorer et Firefox
technique css 18
CSSVista est une application gratuite destinée aux développeurs web qui veulent tester leur CSS en live sur Internet Explorer et Firefox


8 Commentaires sur "25 techniques CSS pour être plus efficace (partie 2)"

  • denis
    9 mai 2007 (9:31)

    Très intéressant tout ça, notamment le footer 😀
    Merci !

  • Joe Cool
    9 mai 2007 (12:18)

    Merci pour tous ces liens, très intéressant !

  • aiglestates
    9 mai 2007 (16:17)

    Tous des excellents services

  • Stéphane
    10 mai 2007 (18:40)

    Et voilà, dès que je viens sur ce blog je me retrouve toujours avec un nombre incroyable de sites à visiter ensuite. Merci pour cette liste David !

  • David
    11 mai 2007 (9:00)

    Je suis content que cela vous plaise d’autant que j’ai pris du plaisir à l’écrire, si un jour vous avez une demande spécifique par rapport au CSS, n’hésitez pas à me le faire savoir.

    @Stéphane, en écrivant cette liste j’avais remarqué que, toi aussi, tu avais fait une excellente liste de libraires Javascript pour AJAX. J’ai failli l’ajouter mais je me suis rendu compte que cela ne traitait du même sujet (les CSS) donc je la garde sous le coude pour une prochaine sélection de lien.

  • casp
    23 octobre 2009 (1:32)

    Pfiouuu ..
    Plein de liens intéressant trop pour moi …
    mais je marque cete page j’y reviendrai surement un jour 🙂
    Merci pour le travail de compilation.

  • kakashi
    16 mars 2010 (19:00)

    Bonjour,
    je suis intéressé par le point 18 : plan plus complexe, malheureusement les liens ne fonctionnent plus, je suis redirigé automatiquement vers l’accueil et je n’ai pas trouvé l’article sur le site
    Pourriez-vous mettre à jour le lien si possible ?

    Merci d’avance

  • David
    16 mars 2010 (23:33)

    Salut Kakashi,

    Le lien n’est plus dispo, la personne qui était derrière a du simplement enlevé le projet. Sinon il existe
    http://astuteo.com/slickmap/
    C’est à peu de chose près la même chose, je dirai même que c’est mieux ! A + David