Créez de jolies petites créatures avec CSS3

13 octobre 2010

Dessiner avec du CSS ? Oui, c’est désormais possible ! C’est Sébastien Plaignaud, un webdesigner français, qui nous partage ses créations : de véritables petits monstres créés avec du pur CSS, notamment grâce à quelques propriétés CSS3. Rigolo et novateur !

« Dessiner » avec du CSS

Un Blob Monster et un Dragon !

Ces deux petites créatures sont entièrement réalisées avec une simple feuille de style. Aucune image, juste du HTML et du CSS. Deux propriétés de la technologie CSS3 sont utilisées :

  • Border Radius permet d’arrondir les coins d’une bordure d’un élément HTML. Supportée par Firefox 3.6+ avec le préfixe « -moz » (optionnel depuis FF4.0+), Chrome 5+ et Safari 4+ avec le préfixe « -webtkit », et enfin Opera 10.5+ et Internet Explorer 9 sans préfixe . C’est cette propriété qui génère toutes les courbes de la créature.
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;
    
  • Gradient permet de créer des dégradés de couleur sur un élément HTML. Actuellement, seuls les navigateurs basés sur Gecko (Firefox) et Webkit (Safari, Chrome) sont en mesure de lire correctement cette propriété. La syntaxe différe entre les deux moteurs.
    background: -webkit-gradient(
    	linear,
    	left bottom,
    	left top,
    	color-stop(0.35, #9e1056),
    	color-stop(0.90, #cb155a)
    );
    background: -moz-linear-gradient(
    	center bottom,
    	#9e1056 35%,
    	#cb155a 90%
    );
    

HTML/CSS et créativité

Au delà de l’utilisation de CSS3, c’est avant-tout la mise en place de la structure HTML qui est complexe : il s’agit d’un empilement « div » qui se cachent les unes derrière les autres avec la propriété CSS « overflow:hidden ». Il faut donc avoir de bonnes connaissances en matière de HTML/CSS et une bonne dose de créativité pour élaborer une structure adéquate et parvenir au résultat souhaité. A votre tour de jouer !

Niveau compatibilité navigateur, c’est tout à fait correct puisque cela fonctionne avec Firefox 3.5+, Opera 10.5+, Chrome 4.0, Safari 4+ et Internet Explorer 9. A noter qu’un effet de parallaxe avec jQuery a été ajouté sur le Blob Monster pour enrichir le rendu final.

Requis : navigateur compatible CSS3
Démonstration : http://web.virtuousquare.com/?page_id=7
Licence : libre

Commentaires

  • Oh merci de m’avoir cité et content que ça fasse l’objet d’un article. :)
    J’espère que ça inspire les lecteurs.
    Par ailleurs, le lien de mon site n’est plus en .fr, mais http://virtuousquare.com .
    Et on peut retrouver les articles sur les monstres CSS sur ce site : http://web.virtuousquare.com
    J’en profite pour faire la pub d’un site qui devrait sortir la semaine prochaine, avec des ressources et des tutoriels originaux gratuits. http://design-ui.com :)

    Bonne continuation!