30 Open Source HTML/CSS Projects from CodePen

Now Reading
30 Open Source HTML/CSS Projects from CodePen

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

01-simple-flat-navigation-menu

Switch Inputs

02-switches-sliders-input-ui

Progress Meter

03-task-progress-meter-html5

Pure CSS City Sunset

04-pure-css-city-sunset

Intro Animation

05-website-intro-animation-elements

Flip Menu Gallery

06-flip-menu-images-gallery

Animated Bubbles

07-jquery-animated-webpage-bubbles

Flat Navigation Tabs

08-fancy-flat-navigation-tabs

Parallax Keyframes

09-css-keyframes-parallax-scroller

Fixed Sticky Menu

10-fixed-sticky-navigation-menu

Fullscreen Background Image

11-fullscreen-background-image-jquery

Mini Toggle Nav

12-toggle-mini-responsive-navigation

Path-Style Flyout Menu

13-path-flyout-menu-jquery

iOS-Style Definition List

14-css-ios-definition-list

Big Pressable Button

15-big-css3-pressable-button

Flat Responsive Form Inputs

16-flat-responsive-form-inputs

Self-Numbered Lists

17-self-numbered-list-css3

CSS3 Knob Animation

18-css3-keyframes-knob-animation

iOS Sliding Navigation

19-ios-sliding-navigation-menu

Dynamic Color Palettes

20-color-palettes-kuler-webapp

Pure CSS Breadcrumbs

21-pure-css-breadcrumbs-menu

Basic Image Slider

22-incredibly-basic-image-slider

Custom HTML5 Range Slider

23-ui-html-css-range-slider

CSS3 Animated FAQ

24-css3-pretty-questions-answers

Circle Image Captions

25-circle-images-caption-hover

Multi-Colored 3D Buttons

26-multi-colored-3d-buttons

Simple Buttons

27-css3-simple-buttons-open-source

CSS3 Image Captions

28-image-captions-hover-css3

Customized Form Inputs

29-vehicle-make-model-custom-inputs

HTML5/CSS3 Dashboard Interface

30-custom-html-css-dashboard-interface

Read more