Join 18,800+ Readers

30 Open Source HTML/CSS Projects from CodePen

by Jake Rocheleau

on September 10, 2013

in Resources

Learn how to earn $125 or more per hour as a freelancer - Click Here
Looking for hosting?. We recommend MediaTemple for web hosting. Use Code MTLOVESDESIGN for 20% off

I have always been a supporter of CodePen ever since I found the website. It is an online HTML/CSS/JS code editor where you can build ideas and test them in real-time. Developers can also share their pens with others all around the world! It is a great web application which allows frontend developers to practice their skills from any computer with Internet access.

I’ve gone through the latest pens and gathered 30 of the best code samples. Projects which are free to duplicate will have an open source license on the codes. Ideally these can save you time and stress when attempting to build more convoluted interfaces. Granted you may not find a use for all of these concepts. But it is worth skimming the collection just to see what is out there and what is possible when building with CodePen’s IDE.

Flat Navigation Menu

vertical flat navigation menu link

Switch Inputs

custom css3 jquery switch slider inputs

Progress Meter

html5 css3 progress task meter

Pure CSS City Sunset

css-only sunset effect city animation

Intro Animation

website icons animation transition effects

Flip Menu Gallery

flip menu items images gallery food

Animated Bubbles

jquery javascript bubbles background blues

Flat Navigation Tabs

fancy icon flat navigation menu tabs

Parallax Keyframes

css3 keyframes parallax animation slider

Fixed Sticky Menu

fixed sticky navigation navbar menu

Fullscreen Background Image

jquery dynamic fullscreen background image codepen

Mini Toggle Nav

mini navigation item toggle jquery

Path-Style Flyout Menu

jquery path app flyout navigation animation

iOS-Style Definition List

custom html5 css3 ios designed definition list

Big Pressable Button

big red css3 pressable press button

Flat Responsive Form Inputs

oversized html5 css3 responsive form contact

Self-Numbered Lists

green icons lists items self numbering

CSS3 Knob Animation

rotating light knob animation keyframes

iOS Sliding Navigation

sidebar mobile sliding app navigation html5 css3

Dynamic Color Palettes

webapp html5 css3 color palettes selector

Pure CSS Breadcrumbs

pure css breadcrumbs menu navigation

Basic Image Slider

simple basic image slider jquery

Custom HTML5 Range Slider

css3 html5 custom design features slider input

CSS3 Animated FAQ

css3 transition custom animation questions answers faq

Circle Image Captions

circle image hover captions effects

Multi-Colored 3D Buttons

multi colored 3d buttons effect open source

Simple Buttons

css3 hover effect colorful buttons

CSS3 Image Captions

css3 transition animation effects hover captions

Customized Form Inputs

custom html5 css3 form vehicle make model

HTML5/CSS3 Dashboard Interface

custom css3 website code dashboard interface

Powered by Shutterstock

About Jake Rocheleau

Jake is a frontend user experience designer and frequent blogger. He writes about all things web and mobile design. Check out his updates on Twitter @jakerocheleau. Connect with Jake on google+