12 superbes ressources HTML / CSS / JS réalisées sur CodePen

15 juillet 2013

CodePen est un formidable outil qui regroupe de nombreuses ressources pour développeurs, intégrateurs et webdesigners qui sont en quête d’inspiration. À l’image des vagues du web, Megaptery vous propose une sélection de 12 superbes ressources réalisées sur CodePen.

CodePen, c’est quoi ?

Conçu par Chris Coyier (créateur de CSS-Tricks), CodePen est un éditeur de code en ligne (tout comme jsFiddle et CSSDeck) composée de 4 vues distinctes : le HTML, le CSS, le JavaScript, et une zone de prévisualisation « en live » permettant de partager facilement des travaux avec d’autres développeurs, qui peuvent à leur tour les éditer et les améliorer. Vous l’aurez compris, CodePen est une véritable mine d’or de ressources front-end.

Voici une sélection de 12 réalisations HTML / CSS / JS de qualité accompagnées d’une brêve description. Vous pouvez accéder au code de chaque ressource sur CodePen, en cliquant en bas à gauche sur Edit this Pen. Bonne découverte !

CSS circular reveal

Description : un effet original d’apparition d’une image au rollover de façon circulaire.

hover_circle_css

Color Wheel

Description : une roue de couleurs animée avec image vectorielle SVG pour le dégradé.

colorwheel_css

Animated SVG Climacons

Description : un kit d’une vingtaine d’icônes de météo au format SVG animées avec CSS3.

svg_icons_weather

Manette NES 3D

Description : une manette de la console Nintendo en 3D réalisée et animée en full HTML / CSS.

nintendo_css

CSS3 Flat icons

Description : un set de 12 icônes réalisées en full HTML / CSS à la sauce Flat Design et Long Shadow.

css3_flat_icons

Twitter Card UI

Description : une fiche de présentation custom HTML / CSS de profil Twitter.

twitter_card_ui

Direction-aware hover effect

Description : une animation avec effet 3D avec JS / CSS au rollover selon l’entrée et la sortie de l’élément HTML.

direction_hover_effect

CSS only folds

Description : une astuce qui reproduit une effet de pliage ou un angle en full CSS.

css_only_folds

CSS sphere

Description : une sphère 3D réalisée en pure CSS à base de gradient-radial et de box-shadow.

sphere_css

Hyperspace

Description : une simulation de la vitesse supraluminique (supérieure à la vitesse de la lumière) avec CSS et une image.

hyperspace_css

CSS calculator

Description : une calculatrice fonctionnelle avec jQuery et CSS3.

calculator_css

SVG filters

Description : un effet photo de profondeur de champ (flou d’arrière-plan) avec des filtres SVG (à voir sur Chrome).

flou_image_css3

Commentaires

  • Le color wheel est vraiment bien fait. Il fait pensé aux lampes Philips où on peut choisir sa couleur