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

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.

• http://codepen.io/bahadirtezer/full/Dcmfb

Minimal Hover Menu

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

• http://codepen.io/joni/full/abvFk

CSS Sine Waves

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

• http://codepen.io/diessica/full/keLBq

CSS Ubuntu Logo

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

• http://codepen.io/allanesquina/full/Cmqxu

Animated Atom Logo

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

• http://codepen.io/hugo/full/Dlicg

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).

• http://codepen.io/tumanova/full/tkvmi

CSS Google Logos

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

• http://codepen.io/ziga-miklic/full/nqguf

CSS viking shield

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

• http://codepen.io/LukyVj/full/CGsJE

CSS arrow icons

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

• http://codepen.io/eMaj/full/joLqt

CSS animated books

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

• http://codepen.io/siiron/full/bufei