Jouons avec nos amis les CSS...

Qui a dit qu'on ne pouvait pas s'amuser avec les feuilles de style ?

Le webdesigner est un grand enfant qui aime se poser des difficultés et expérimenter des choses complètement inutiles, rien que pour le plaisir.

Un nouvelle mode est en train de voir le jour : utiliser les possibilités des CSS à contre-emploi, rien que pour montrer ce qu'il est possible de faire avec cette technologie... et d'ouvrir de nouvelles horizons.

On commence à trouver sur le net de multiples expériences sympathiques : tous les sites suivants sont graphiques mais n'utilisent aucune image sur leurs pages : tout est en CSS...

Le grand classique est, avec ses 1452 divs, le célèbre Crayons en CSS. Comme vous le constaterez, aucune image n'a été utilisée pour réaliser ce travail de fou ! L'auteur a même poussé le vice jusqu'à proposer divers filtres graphiques pour modifier l'aspect de "l'image" (contraste, luminosité, inversion,...)

Parmi les autres précurseurs de cette petite distraction, on retrouve la fameuse Maison en CSS ou encore la Lampe CSS qui ne comportent bien évidemment aucune image.

EDIT : une nouveauté dénichée, la Rotating Box. Simplement superbe ! Et son explication est fournie. Elle consiste en une utilisation assez géniale des bordures ! (merci à LAlex pour ce lien)

Quelques autres inutilités dans le même genre :

Je suis bien évidemment en attente de votre précieuse participation pour compléter cette (petite) liste de sites.

Par Raphael GOETTER - mercredi 2 juin 2004 à 10:44

Standards et Accessibilité - #12 - Lu 9865 fois - Intérêt du billet: 3.33(3) - Fil RSS

Trackbacks

Aucun trackback pour le moment.

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le mercredi 2 juin 2004 à 11:29, par Snoop :: site :: #

Ce Chris Hester avec ses crayons n'a pas été embauché chez Lustucru, c'est certain !
En tout cas, ces liens sont épatants.

Le mercredi 2 juin 2004 à 11:45, par Ldo :: site :: #

le 'celebre crayon', mouaip bof, une ptite moulinette en php, et on peu reproduire n'importe kel image en css à ce moment la

par contre, sympa le scrabble, dommage ke le dico soit pas en français :D

en tt cas, ce n'est pas un phénomène nouveau, de tout temps certain ce sont amusé à produire des images dans ce genre, il y a les ascii-art, et j'ai même deja vue ce genre d'image réalisé avec des tableaux lool
y'a juste la technik derrière ki change, mais le principe reste le même

merci pour ces liens en tt cas ;)

Le mercredi 2 juin 2004 à 11:51, par Raphael Goetter :: site :: #

@Ldo > Ah oui tiens, je n'avais pas fait le rapprochement avec l'ASCII Art... c'est vrai que l'idée générale est proche.
Pour ta moulinette en PHP, ça peut être intéressant aussi : ça doit être assez sympa comme jouet. Tu m'en fais un ? ;)

Le mercredi 2 juin 2004 à 11:54, par Ldo :: site :: #

surtout k'en plus dans un commentaire de la doc php on donne le code looool
y'a juste a l'adapté pour utiliser css au lieu des tableaux

fr.php.net/manual/fr/func...
3ème commentaire

Le mercredi 2 juin 2004 à 11:55, par Ldo :: site :: #

@Sib> bah voila tu as la réponse :D

Le mercredi 2 juin 2004 à 12:01, par Yoyo :: #

Hello,
dans l'exemple du diaporame, l'auteur utilise ceci:
li+li+li+li:hover:after {
background-image: url("../../archive/slide/04.jpg");
margin-top: -85px;
}
Je ne connais pas cette notations li+li etc. Qu'est ce que ca veut dire ? A quoi ca sert ? Y a t-il une utilité avec d'autres balises ?

Le mercredi 2 juin 2004 à 12:12, par Mikimya :: site :: #

C'est pourtant simple

D'après moi, ( Je me trompe peut-être ) ... C'est simplement le nom de ses boutons. C'est le nom de la balises. Donc la diapositive 1 est représenté par li ... la deux li+li...

C'est bien ça ?

Le mercredi 2 juin 2004 à 12:16, par Raphael Goetter :: site :: #

@Ldo > tu crois vraiment que j'y comprend quelque chose à ton code PHP ? :D

@Yoyo > li+li signifie que dans le code html il n'y a rien entre les 2 li. En clair que ça ne marche QUE s'il y'a 2 li successif. La propriété va s'appliquer à toutes les li sauf la première.

Le mercredi 2 juin 2004 à 13:01, par mikimya :: site :: #

J'étais donc loin de la réponse

Le mercredi 2 juin 2004 à 21:42, par Laurent Denis :: site :: #

Merci Raphael : je ne connaissais pas le "Clavier en CSS"... qui n'est pas qu'un exploit technique gratuit : j'y vois plusieurs utilisations dans le cadre scolaire et de l'apprentissage de ce bidule aberrant qu'est un clavier pour un enfant qui découvre à peine l'écriture ;)

Le mercredi 2 juin 2004 à 23:35, par Talou :: site :: #

www.s7u.co.uk/menu/cssart...
webperso.easyconnect.fr/d...
webperso.easyconnect.fr/d...
tantek.com/map.html
...
je n'ai toujours pas retrouvé la page en css du type qui avait fait le plan de sa maison avec une alternative pour la réorganisations... Si quelqu'un a une piste...

Le jeudi 3 juin 2004 à 10:07, par Raphael Goetter :: site :: #

Merci Talou pour ces liens ! :)

Je viens d'ailleurs de rajouter un lien dans le billet, celui de la superbe Rotating Box. Phénoménal !

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.