Menu HTML et CSS, sliding doors et item current en PHP

Ce mini tutoriel propose une technique simple pour afficher un effet de survol sur un bouton en permutant une image en background associée à un lien et faire en sorte que cet effet de survol reste une fois le bouton cliqué, de manière à signaler la page en cours. Le tout avec une pincée de HTML, une bonne dose de CSS et un soupçon de PHP.

Templates et boutique en ligne osCSS

boutique en ligne oscss Après avoir abandonné l’idée d’adapter une charte graphique un peu funky dans osCommerce, j’ai regardé de plus près le projet osCSS. C’est une version CSS ready du projet osCommerce. La particularité d’osCSS est de fournir du code valide au regard des standards du W3C, qu’il s’agisse d’XHTML 1.0 ou 1.1. Les templates sont construits sur des fichiers CSS facilement personnalisables et interchangeables.

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 🙂

Votre palette de couleurs avec Color Palette Generator

color-palette-generator.png Le choix d’une palette de couleur est déterminant dans l’élaboration et la réussite d’une charte graphique. Pour cela, Je m’inspire souvent des couleurs d’une image en les choisissant avec la pipette de Photoshop.

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.

Utilisez le DOM et Javascript comme un chef

dom-javascript Comment remplacer les gestionnaires d’événements présents dans une page web en redéfinissant le comportement onclick, onmouseover… des éléments XHTML ? Tout simplement en utilisant la magie du DOM et de Javascript. Généralement, lorsqu’on veut appliquer une fonction sur un élément XHTML (ouvrir un popup lorsqu’on clique sur une image, par exemple), on utilise une fonction popup() déclenchée par un événement onclick placé dans la balise comme ici : <img src= »/img1.gif » onclick= »popup() » />. C’est parait simple, efficace et rapide… Or, ça peut vite devenir compliqué, inefficace et lent…

Internet Explorer Developer Toolbar

Vous en avez rêvé ? ILS l’ont fait. Bon, pas de quoi se taper le c.. par terre, mais cet ensemble de fonctions rendra quelques services à ceux qui vont transpirer devant leur écran cet été en s’arrachant les cheveux pour comprendre les raisons qui ont poussé les développeurs d’IE à trainer la patte quand il s’agissait d’implémenter correctement ce que d’autres avaient conçu avec intelligence.

Parmis les fonctions apportées — et contrairement à ce qu’on peut lire parfois sur le sujet — il est possible de modifier les CSS à la volée via cette barre d’outils. C’est beaucoup moins pratique qu’avec la Developper Toolbar de Firefox, mais ça a le mérite d’exister.

Pour tester, faites un tour chez l’amicrosoft (et non, je n’irais pas jusqu’à leur faire de la pub) et n’oubliez pas : Sortez couvert.

Info trouvée sur le blog de siddh.

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.