A voir sur webdesignerwall.com, un très bon tutoriel pour décorer vos images / photos à l’aide du CSS sans avoir besoin d’éditer la source. Le principe est assez simple, il suffit d’ajouter une balise span avant l’image et de lui appliquer en background l’élément graphique que vous souhaitez en CSS^[1]. Les avantages sont nombreux en terme de flexibilité, rapidité et productivité, comme par exemple de pouvoir appliquer le même effet sur une galerie de photos.

Lire la suite du billet

Note(s)

1. L’exemple ci-dessous est peut-être plus parlant… [«]

Vu sur docslumpy, Quickmenu, un moyen assez simple et rapide pour générer un menu en css avec la possibilité de mettre des effets javascripts. Disponible en ligne ou via une petite application à télécharger (1mo), l’outil est plutôt complet et intuitif, il propose en premier de choisir son type / style de menu avant de pouvoir l’éditer plus en détail. Impressionnant!

Lire la suite du billet

Après Blog Tool Box, je continu dans la découverte de blog et je vous propose StylizedWeb. Un blog assez récent d’un jeune graphiste et développeur Serbe. En plus d’un design black and white assez sympathique^[1], j’ai trouvé sur ce blog quelques billets intéressants :

• 10 best CSS hacks : Comment aligner verticalement dans une div, tout sur le png transparent, reset CSS, etc.

• Learn CSS & xHTML : Un billet intéressant pour ceux qui souhaitent débuter avec une template dans l’apprentissage du xHTML / CSS.

• 30 Best Firefox add-ons : Des extensions pour Firefox très utiles, voir indispensables pour les graphistes et développeurs.

• Plain number feed count : Comment personnaliser son compteur Feedburner sous Worpress avec un plugin et les explications.

Note(s)

1. Je sais pas vous, mais quand un blog à un design travaillé, ça incite un peu plus à parcourir le contenu non ? [«]

Après avoir migré mon blog sous Wordpress, j’ai vérifié si il était toujours valide XHTML / CSS. Je me suis aperçu que par défaut, le widget links attribuait à la balise <li> le même id à chaque fois, ce qui forcément n’est pas valide…

Après quelques recherches, j’ai trouvé un bout de code à insérer dans le fichier functions.php du thème installé, qui permet d’avoir un nouveau widget conforme aux normes w3c. En détail, au lieu d’avoir id=”links” sur tous les liens, on a: id=”linkcat-19″, id=”linkcat-20″, etc. Voici le code à insérer :

Lire la suite du billet

• Si vous avez un service sur le web ou une boutique et que vous ne savez pas comment présenter de façon graphique vos différentes offres, voici 22 exemples de tableaux de prix.

• 35 Grunche Splash Vector Graphics. Comme l’indique le titre du billet en anglais, un package de 35 jolies planches trash design au format vectoriel à télécharger.

• Une liste de logiciels et d’outils gratuits pour les web designers. Outils d’éditions d’images, visionneuses, outils pour le flash, modélisation, illusatrions, etc.

• Un best-of tutoriels signé Smashing Magazine sur la retouche d’image, la photo, la colorisation, effets de textes, etc.

• Un exemple de menu en css où j’ai bien aimé l’effet de mise en avant du rollover avec un effet de flou sur le reste du menu.

• Pamoorama, un javascript Mootools de présentation pour vos photos panoramas avec plusieurs options et exemples.

• A voir, 32 inspirations graphiques plus belles les unes que les autres.

• Quelques “Top billets” à voir sur Speckyboy : Top 10 Resources To The Perfect Color Scheme for Web Designers - Top 25 CSS Clean Sites of 2007 - Top 25 Free Icon Resources for Web Designers - Top 10 (Web Safe) Blogging Fonts.

• Lightview, encore un lightbox à base de prototype avec quelques petits plus sympas (comme par exemple les coins arrondis, ou la possibilité de lancer un slideshow).

• Un super tutoriel mélangeant le pixel et le vectoriel à voir sur le blog de Spoon Graphics. Première partie, seconde partie.

• 27 cartes de visites originales design à voir sur Web World.

• Un comparatif des différents showcases CSS.

• PhotoshopStar, un site de tutoriels et ressources pour Photoshop.

Il existe de nombreuses adresses pour tester la validé d’un site aux normes W3C. Mais très peu permettent de tester à la fois le XHTML et le CSS. Avec XHTML-CSS Validator, c’est dorénavant possible, en seul clique. Pour ne rien gâcher je trouve le design épuré et plutôt réussi, avec pas mal d’ajax qui rende l’outil très agréable à l’utilisation. Et cerise sur le gâteau, une extension firefox est disponible.

• Un exemple de résultat avec mon blog

Ci-dessous quelques sites regroupant une sélection webdesign / CSS showcases pour vous aider si vous êtes en manque d’inspiration pour vos projets ou juste pour voir ce qui se fait ailleurs. Il y a du bon comme du moins bon, mais c’est un moyen rapide et efficace de voir ce qui se fait en matière de webdesign et CSS.

Lire la suite du billet