Une démonstration de ce qui peut être réalisé via la conception basée sur CSS. Sélectionnez n’importe quelle feuille de style de la liste pour l’utiliser sur cette page.
Téléchargez les exemples HTML et CSS
Le chemin vers l’éveil
Les reliques dues aux balises spécifiques aux navigateurs, aux DOMs incompatibles, au support corrompu de CSS et aux navigateurs abandonnés, jonchent un chemin sombre et lugubre.
Aujourd’hui, nous devons nous libérer de l’esprit du passé. La véritable nature du web a été révélée grâce aux efforts continus des gens du W3C, du WaSP et des créateurs des principaux navigateurs.
Le Jardin Zen CSS vous invite à vous relaxer et méditer sur les importantes leçons des maîtres. Commencez à voir clairement. Apprenez à utiliser ces techniques consacrées dans une nouvelle méthode stimulante. Ne faites qu’un avec le web.
Alors, de quoi s'agit-il ?
Il faut sans cesse montrer la puissance de CSS. Le Jardin Zen vise à exciter, inspirer et encourager la participation. Pour commencer, regardez quelques designs présents dans la liste. Cliquer sur l’un d’eux appliquera son style sur cette page. Le code HTML reste le même, seule la feuille de style externe change. Oui, vraiment !
Les CSS permettent un contrôle total de la mise en forme d’un document hypertexte. La seule manière de le démontrer, en stimulant les gens, est de présenter ce que les créatifs peuvent concrêtement réaliser quand on leur confie les rennes. Les concepteurs et les développeurs ont contribué ensemble à la beauté du web, on peut toujours aller plus loin.
Participation
Notre objectif a toujours été de promouvoir les designs de qualité. Vous allez modifier cette page, de solides compétences en CSS sont donc nécessaires. Toutefois les fichiers d’exemple sont suffisamment commentés pour que même les novices en CSS puissent les utiliser comme point de départ. S’il vous plaît, consultez le guide de ressources CSS pour des tutoriaux avancés et des astuces sur le développement CSS.
Vous pouvez modifier la feuille de style comme bon vous semble, mais pas le code HTML. Ceci peut sembler décourageant au début si vous n’avez jamais travaillé de cette manière, mais servez-vous des liens pour en apprendre plus et utilisez les exemples pour vous guider.
Téléchargez les fichiers d’exemple HTML et CSS pour travailler sur une copie locale. Une fois que vous avez fini votre chef d’œuvre (merci de ne pas soumettre de travaux incomplets), publiez votre document CSS sur le serveur web de votre choix. Envoyez-nous un lien vers une archive contenant ce fichier et ses ressources associées, et si nous la sélectionnons, elle sera hébergée sur notre propre serveur.
Avantages
Pourquoi participer ? Pour la reconnaissance, l’inspiration et pour créer une ressource que nous pouvons tous utiliser pour promouvoir CSS. Ce site sert autant d’inspiration pour les travailleurs du web en exercice, d’outil d’apprentissage pour ceux en devenir que de gallerie des futures techniques que nous pouvons tous attendre.
Conditions
Si possible, nous aimerions surtout voir l’utilisation de CSS 1 et 2. CSS 3 et 4 devraient être uniquement limités aux techniques largement implémentées, sinon des alternatives efficaces devraient être prévues. Le Jardin Zen CSS est basé sur une approche pragmatique et fonctionnelle des CSS et non sur les dernières pratiques visibles par seulement 2 % des internautes. Notre seul vrai critère est que votre CSS soit valide.
Heureusement, concevoir de cette manière démontre comment les différents navigateurs ont maintenant bien implémenté les CSS. En respectant les conventions, vous devriez constater des résultats assez cohérents sur la plupart des navigateurs modernes. En raison du nombre important d’agents utilisateurs sur le web, surtout avec la prise en compte du mobile, les rendus ne peuvent pas être toujours précis au pixel près sur toutes les plateformes. Pas de soucis, mais faites autant de tests que possible. Votre design doit au moins être compatible avec IE 9 (et versions ultérieures) et avec les dernières versions des navigateurs Chrome, Firefox, iOS et Android (utilisés par plus de 90 % du marché).
Nous vous demandons de soumettre des créations originales, merci de respecter les droits d’auteur. S’il vous plaît, minimisez le contenu répréhensible et essayez d’inclure dans votre travail des thèmes uniques et intéressants. Nous n’avons pas besoin d’un autre design utilisant le thème du jardin.
Ceci est aussi bien un exercice d’apprentissage que de démonstration. Vous gardez les droits d’auteur de vos graphismes (à quelques exceptions près, cf. « submission guidelines »), mais nous vous demandons de publier votre fichier CSS sous une license Creative Commons identique à celle de ce site pour que d’autres personnes puissent apprendre de votre travail.
Par Dave Shea. Bande passante grâcieusement offerte par mediatemple. Le livre « The Zen of CSS Design: Visual Enlightenment for the Web » est maintenant disponible.