10 superbes ressources full CSS réalisées sur CodePen

13 octobre 2013

Voici une nouvelle sélection de 10 ressources de qualité réalisées sur l’éditeur CodePen avec une particularité commune : elles ont toutes été conçues entièrement en CSS, notamment CSS3, pour vous permettre de repousser encore plus loin les possibilités du webdesign !

CSS3, vers l’infini et l’au-delà

Il y a quelques temps, Megaptery vous partageait une sélection 12 superbes ressources HTML / CSS / JS accompagnée d’une petite introduction descriptive sur CodePen, cet outil de partage dédié aux développeurs, intégrateurs et webdesigners en quête d’inspiration.

Cette fois-ci, Megaptery vous propose une sélection de 10 ressources réalisées entièrement avec HTML et CSS, sans la moindre ligne de JavaScript. Vous pouvez accéder au code de chaque ressource sur CodePen, en cliquant en bas à gauche sur Edit this Pen. Si vous recherchez des outils pour générer du code CSS, vous pouvez également faire un tour sur cette liste de 21 générateurs CSS. Bonne découverte !

CSS ribbon

Description : un ribbon / ruban en trois dimensions pour donner un effet de profondeur.

css_ribbon

Minimal Hover Menu

Description : un menu animé avec une navigation similaire au plugin jQuery LavaLamp.

minimal_hover_css

CSS Sine Waves

Description : une onde sinusoïdale, autrement dit une vague, qui peut être animée, statique ou en perspective.

css3_waves

CSS Ubuntu Logo

Description : le logo du système d’exploitation Ubuntu avec un zeste d’animation.

ubuntu_logo_css

Animated Atom Logo

Description : la représentation d’un atome animé avec les électrons qui gravitent autour du noyau.

atom_css

Gradients from Nature

Description : des dégradés simulant les couleurs de la lumière dans le ciel (aube, lumière du jour, coucher de soleil, etc).

gradient_css_nature

CSS Google Logos

Description : les logos de YouTube, Google Docs, Gmail et Drive.

css_google

CSS viking shield

Description : un bouclier viking réalisé en pure CSS, sans image.

shield_css

CSS arrow icons

Description : différents types de flêches, dont une animée représentant un rafraichissement.

css_arrow

CSS animated books

Description : des livres animés qui s’ouvrent et se referment au passage de la souris.

css_animated_books

Commentaires