Pour représenter de manière graphique un pourcentage sour la forme d'un camembert, la page Have a Slice explique une technique d'affichage très simple à mettre en oeuvre, qui utilise uniquement CSS.
Odelia>Technologiesbeta
CSS
Afficher une date avec du style CSS
Soumis par odelia technologies le Mer, 22/08/2007 - 19:36 CSSSi vous êtes observateur, vous avez certainement rencontré sur différents blogues, des billets marqués avec une date affichée sous la forme d'un feuillet de calendrier, comme ci-dessous :
Menu animé en images
Soumis par odelia technologies le Sam, 18/08/2007 - 06:32 CSS | JavaScript | mootools | PhatfusionImage Menu de Phatfusion est un élégant menu animé à base d'images, utilisant la librairie mootools. Pour fonctionner, une page web doit inclure dans son en-tête les fichiers JavaScript imageMenu.js et mootools.js, ainsi que le fichier CSS imageMenu.css.
Le menu doit être défini dans la page au moyen d'une liste HTML contenant autant d'éléments LI que nécessaire : chaque élément LI déclare l'attribut class avec la valeur kwick opt<n>, où
En effet, le fichier imageMenu.css définit des sélecteurs CSS pour les classes opt1, opt2, ..., opt5 et permet ainsi d'associer une image pour chaque élément du menu.
Voici Image Menu en action avec trois éléments de menu :
- Lanscapes
- People
- Nature
Dans cet exemple, le click sur une image est détectée et une fonction JavaScript est appelée, permettant ainsi l'affichage d'un message utilisateur.
Si vous souhaitiez provoquer la navigation vers une URL particulière, vous pouvez avoir recours à l'objet JavaScript window, comme ceci :
window.location.href = 'http://www.odelia-technologies.com/';
Le fichier attaché à cet article contient les sources de cette démonstration.
Avec un nuage de balise ?
Soumis par odelia technologies le Ven, 09/03/2007 - 23:16 CSSMark Norman Francis explique dans son billet Marking Up a Tag Cloud, différentes approches possibles pour afficher un nuage de balise dans une page web ; l'une d'elles emploie le langage CSS.
Un nuage de balise est tout simplement un ensemble de lien HTML, chacun ayant une taille dépendant de l'importance qui lui est donnée.
Valider facilement des formulaires web avec style
Soumis par odelia technologies le Mer, 07/03/2007 - 22:49 CSS | JavaScript | Prototype | ScriptaculousAndrew Tetlaw décrit dans le billet Really easy field validation de son blog DEXAGOGO, une librairie JavaScript permettant de valider facilement les champs d'un formulaire web.
L'idée principale est d'associer des classes CSS particulières aux contrôles d'entrée HTML, pour que la librairie puisse en valider le contenu.
Par exemple, si vous souhaitez que dans une zone d'édition du formulaire, l'utilisateur saisisse obligatoirement une adresse électronique valide, vous utiliserez les classes CSS prédéfinies required et validate-email, comme ceci :
Au moment de la validation (par défaut au moment de la soumission du formulaire), si une donnée saisie se révèle invalide, la librairie fait apparaître un message d'erreur prédéfini ou bien celui que vous avez indiqué.
Ce message apparaît avec un effet de type "fade-in", si vous avez référencé la librairie effects.js de Scriptaculous dans l'en-tête de la page HTML.
Voici un exemple de formulaire web très simple utilisant cette librairie en version 1.5.4.1, avec l'option qui demande la validation d'un champ lorsque celui-ci perd le focus :