Mondrian et la CSS

mondrian_1.jpgRécemment j’ai eu à expliquer comment faire une feuille de style (CSS) à quelqu’un. Je lui expliquais qu’il n’était question au début que de mettre des petits rectangles dans des grands. Un peu comme replacer des sucres dans une boites, ou mieux des aimants dans une boite en fer.

Pour mettre cela en application, il m’est venu l’idée de recréer une œuvre de Mondrian sans aucune image, juste avec un peu de code. Cela m’a semblé plus visuel et cela s’avère être un bon exercice d’apprentissage de la CSS, (suivront d’ailleurs des tutoriels à partir de ce thème).

La première image que j’ai trouvé sur le net m’a parut idéale. Si ce n’est que les bordures ne vont pas jusqu’au bout. Qu’importe, j’avais commencé, je l’ai donc fini en respectant ces “contraintes”.

Les évolution de la CSS nous permettrons peut être un jour de faire autre chose que des blocks carrés ou rectangulaires. Lorsque cela arrivera je m’attaquerais peut être à Guernica.

Billets en relation


Panix
le 17 décembre
à 11:18

Hum, il semble que sous IE6 notre Mondrian se soit heurté à Guernica :
http://panixdrawings.com/comments/mondrian.jpg
Pourquoi ne pas avoir placé tes aplats de couleur en absolu ?


Alexandre
le 17 décembre
à 13:49

IE6 m’ennuie profondément, au point de l’oublier parfois.
Combien de temps encore allons-nous supporter cette horrible chose ?

Ca marche très bien avec tous les autres navigateurs (IE7 compris !)
:mad:


Panix
le 17 décembre
à 14:30

Malheureusement, encore trop d’amateurs d’art utilisent ce navigateur. La bataille de la compatibilité est loin d’être gagnée…


Sabina
le 19 décembre
à 0:36

Vraiment trop bon cet exercice ! Très inspirant aussi ! Bravo pour le concept !


Alexandre
le 19 décembre
à 8:45

Content que cela te plaise Sabina.
Tu peux essayer aussi sur une autre œuvre et tu nous envoies le lien de ton travail.
:smile:


Chris
le 11 janvier
à 2:39

Ah IE une grande histoire d’amour avec les webeux :lol:


Alexandre Mauric
le 11 janvier
à 17:56

:roll: Tout à fait Chris ! :lol:


Laisser un message

:smile: :lol: :joke: :confused: :roll: :shock: :sad: :cry: :mrgreen: :mad: :oops:


Site conçu par et pour agence webmarketing emandarine

Creative Commons License Valid XHTML 1.0 Transitional