Tutoriels CSS

Boutons CSS

Le bouton élegant qui change d'aspect au passage de la souris est très utilisé sur les pages web. Longtemps, la majorité de ces boutons étaient animés par un javascript ou pire (car plus lourd) par un applet java.

Avec les CSS la légèreté et la simplicité est de mise pour créer de beaux boutons.

Plusieurs images de fond

Grâce à la propriété background-image, il est très facile de mettre une image de fond dans le corps (body) d'une page web. Mais on ne peut qu'en mettre une seule...

Pour pouvoir mettre plusieurs images de fond, il faut définir des cadres (des div) auxquels on attribuera une image chacun.

Coins arrondis

Pour réaliser des blocs (menus ou autres) avec des coins arrondis, il existe principalement trois méthodes en CSS, qui offrent plus ou moins de fluidité et de possibilités graphiques.

Créer des coins arrondis avec une seule image, coulissante en hauteur et en largeur, permet une certaine liberté graphique et s'adapte à un design fluide.

Zoom d'image

Zoomer une image, à l'aide des CSS2, lors de son survol de la souris peut se faire très facilement. Il suffit de combiner le pseudo-élément :hover à la balise img (image).

Hélas, tant que MSIE6 existera, il faudra utiliser d'autres moyens pour le même résultat. En effet, il n'implémente :hover que pour les liens...

Ce tutoriel décrit deux méthodes pour zoomer une image 100% CSS, la première simplissime mais inopérante avec MSIE6, la seconde utilisant la technique des « portes coulissantes ».

Vignettes (Thumbnails)

Zoomer une image une image avec le langage CSS... fastoche. Faire des vignettes zoomable façon "thumbnail" demande un peu plus de dextérité.

Ce tutoriel expliquant comment créer une serie de vignettes zoomable à la sauce 100% CSS recommande d'avoir un niveau débutant averti ;-)

Tableaux à bordures fines

Comment faire un tableau à bordures fines !? Sans les feuilles de style, impossible. Rien à faire à part des grosses bordures saillantes et grossières.

Et je rappelle, à toutes fins utiles, que les tableaux sont destinés à une mise en forme de données... tabulaires, et non pour faire de la mise en page.

Avec une petite dose de CSS, border les cellules d'un tableau d'un élégant trait fin devient un jeu d'enfant.

Menu horizontal

Les menus sont logiquement des listes à puces. Oui, mais voilà, si on veut un menu horizontal, on ne voit pas bien comment faire devenir une liste verticale en liste horizontale...

Et bien si ! Avec les CSS, on peut réaliser un menu horizontal avec une liste à puces dont chaque item sera un bouton.

Menu déroulant

Un menu horizontal, c'est bien... Un menu horizontal qui déroule, c'est mieux !... Oh enfin, mieux... Ça dépend des goûts et des besoins. Mais ça peut être utile.

Comme le tutoriel précédent, le menu sera fait sous forme d'une liste à puces que l'on va contraindre à devenir horizontale, mais ce sera, en plus, une liste à puces imbriquée qui va donc être démasquée par rollover.

Générer du contenu

Petite astuce CSS amusante et pratique mais qu'il ne faut en aucun cas utiliser pour diffuser des informations importantes car elle comporte deux inconvénients :

1. Rien de ce qui est généré de cette façon est accessible
2. MSIE (avant la version 8) ne l'implémente pas

Mais reprenons... Avec les pseudo-éléments :before et :after, on peut automatiser l'inclusion de caractères ou d'images grâce à l'attribut content. On peut aussi faire ressortir des informations de "planquées" dans le code source.

Formulaires

Par défaut, les formulaires ne sont pas folichons. Pourtant, quel site n'a pas son formulaire ? (euh... mammouthland ?!!)

Dès lors, la tentation est grande de mettre les champs dans des tableaux pour les aligner, et de rajouter du javascript pour un effet focus ou se passer un bouton d'envoi. Et l'accessibilité dans tout ça ?!!

Mais avec les CSS, on peut améliorer l'aspect d'un formulaire et rester accessible !

Rasmol et object

La balise <object> a été introduite dans les spécifications du html 4.0 [en] pour présenter des objets (applets java, videos, sons, flash etc.) dans les pages html.
Auparavant, la balise <embed> était couramment utilisée, mais celle-ci, initialement balise propriétaire de Netscape, n'a jamais été homologuée par le W3C.

Les molécules 3D "rasmol" font partie de ce type d'objets à utiliser avec la balise <object>.

Haut