Smashing Magazine : des CSS plein les yeux

smashingmagazine C’est Noël ! Et pour fêter ce moment dans la joie et la bonne humeur, je partage avec vous un site idéal à consulter entre les huîtres et la bûche pour en apprendre encore plus sur le XHTML et les CSS. Et aussi pour avoir sous les yeux des dizaines de design web qui — si vous n’y prenez garde — risquent de booster votre créativité. A consommer sans modération.

Découvert grâce à l’excellent blog de neo-ma, Smashing Magazine mérite de figurer dans votre liste de liens ou dans votre blogmarks préféré.

Vous découvrirez la crème de la crème en matière de liens vers des galeries de sites sur les CSS tous plus intéressants les uns que les autres, suivie par une liste de 50 designs web classés par ambiance : vibrant designs, dark designs et light designs.

Des sets d’icônes à télécharger librement de même que des liens vers des polices de caractère de qualité à télécharger, une galerie de formulaires CSS

Tous ceci n’est bien évidemment que la partie visible de l’iceberg tant le site est riche de liens et d’exemples.

Joyeuses fêtes à toutes et à tous 🙂

Exercice de style CSS et HTML : table vs div

sivom-nautiqueL’utilisation des CSS à la place des tableaux pour concevoir une page web fait sa place dans la boite à outils du webdesigner. Or, s’il est relativement aisé de concevoir un site «full CSS» from scratch, c’est parfois un peu plus tricky de partir d’un site existant et d’en débarrasser la table. Après la lecture de ce billet, vous saurez comment j’ai divisé par deux le poids d’une page, rendu au code HTML son teint de rose, et facilité la digestion des navigateurs… tout en conservant 99% du look d’origine…

Quelques notes sur XHTML et CSS, au fil de l’eau…

Le quotidien de l’intégrateur XHTML et CSS est parfois ponctué de vide *téléologique* concernant les bonnes balises à utiliser en fonction du type de contenu. J’ai longtemps cherché à produire un document-type pouvant servir à n’importe quelle commande. Hélas ! Chaque projet demande des réponses graphiques et structurelles ajustées. Néanmoins, je ne résiste pas au plaisir de partager avec vous, à l’occasion du 100ème jour depuis la mise en ligne de css4design, une sorte de medley mashup de quelques thèmes liés à l’intégration web. Restez vigilant : malgré toute l’attention apportée à la rédaction de ce billet, il reste encore des traces d’humour sous le tapis de souris.

Vos positions s’affaissent ? Mettez le bottom à zéro…

Je livre ma copie en réponse à un défi de Cap° concernant la mise en place d’une liste dans laquelle l’ajout d’un ou plusieurs éléments ferait remonter le texte au lieu de le faire descendre. Tout ça dans le but de garantir à notre liste une base fixe. Rien de bien fou, mais un défi est un défi 😀

CSS 3 column layout – the holy grail!?

En sortant surfer ce matin, j’ai trouvé cet article sur l’utilisation – ou non – des hacks css pour vos design web. Mais aussi, et plus malheureusement, sur le retour aux TABLE pour la mise en forme des pages. Tant pis, c’aurait pu être un très bon article. Ca reste néanmoins un point de vue intéressant, qui rejoint d’une certaine manière, l’excellent W3C go home ! d’Arno.

Background CSS avec motifs double-fond et effet d’opacité multiple sur le texte et les images

Exemple d'un background CSS avec motifs double-fond La création de motifs répétés est un plaisir de chaque instant dont je ne me lasse pas. Quelle joie de remplir un grand espace avec une image de quelques pixels… Oui, mais c’est parfois un peu… trop répétitif, tout ça. Et si nous faisions en sorte d’avoir un motif un peu plus riche pour le haut de la page, tandis qu’un autre remplirait le reste de la fenêtre en étant raccord avec le premier ?

Opacité CSS et effet de trame avec GIF/PNG transparent

Exemple d'opacité CSS et effet de trame avec GIF/PNG transparent Pour obtenir un effet d’opacité sur un élément, il existe le format d’image PNG 24 bits qui accepte jusqu’à 256 niveaux de transparence. Malheureusement Internet Explorer 6 ne prend pas en charge cette intéressante caractéristique… Je vais vous proposer une méthode full CSS et une autre permettant d’utiliser des images GIF ou PNG transparentes de manière créative avec une page d’exemples à la clé.

Commentaires conditionnels d’IE vs hacks CSS ?

Les différences de rendu entre les différents navigateurs sont le lot quotidien de l’intégrateur CSS : un léger décalage par ci, une largeur différente par là… et la tentation est grande d’envoyer paitre le dernier de la classe, au grand dam de la voix de la sagesse (souvent commerciale) qui vous prie de ne pas négliger 85% de ses clients potentiels…

got2be : gotapi ça décoiffe !

Vous connaissiez peut-être les sites htmlhelp.com, w3school.com ou encore php.net… Que ce soit le cas ou non, vous serez ravi d’apprendre que l’ensemble des références qu’ils contiennent en matière de code html, de javascript, de css, de php, et de presque tout ce qui peut nous intéresser en matière de développement web est disponible sur… tatatin…

Design de formulaire HTML avec CSS

Depuis longtemps, l’intégrateur web pressé d’aller manger, dresse la table pour mettre en forme ses formulaires. Et vas-y que je te mets du texte dans un td, un champ texte dans l’autre, et ce, jusqu’à la nausée. Désormais, plus d’excuses. Nous pouvons tous (oui, j’ai bien dit tous !) aligner des éléments de formulaires sans table. Mais pas sans les mains ni sans CSS.