Flexbox Responsive List December 08, 2018
Flexbox Responsive List

A PoC of creating responsive list view with list items containing metadata which gets reordered and styles are updated depending on available page width. This was originally created to develop a GitLab feature and make it easier to quickly test the UX without having to run entire GitLab instance, see original GitLab Issue.

Read more
Spinbox January 22, 2016

A loading animation I came across on bestwebsite.gallery, made using CSS3 keyframe animations.

Read more
Mail Input Autocomplete January 13, 2016
Mail Input Autocomplete

Mail address input box (similar to Gmail/Outlook) with autocomplete and raw mail address input support. In short, it works exactly like Gmail’s To, CC, and BCC fields.

Read more
Jumpy Pillars December 23, 2015
Jumpy Pillars

CSS3 Keyframe animation called “Jumpy Pillars” which can be used for your page loaders.

Read more
Styled Input Placeholder December 22, 2015
Styled Input Placeholder

HTML5-ish Input Placeholder that works IE8+ and can be styled by CSS. It uses pseudo element to render placeholder (with HTML5 fallback) and styles are applied on pseudo element itself.

Read more
Step-bar December 01, 2015

A multi-step progress-bar called “Step-bar” that can be updated just by changing element attributes, using SASS.

Read more
CSS Breadcrumbs October 17, 2013
CSS Breadcrumbs

Navigation breadcrumbs with clickable crumb items.

Read more
Mr. Border-Radius August 31, 2013
Mr. Border-Radius

A fictional happy face inspired from Lea Verou’s CSSConf 2013 presentation Though it is not a perfect replica, but it is cuter. Original presentation slides available here.

Read more
CSS Filters August 22, 2013
CSS Filters

A CSS filters demo showing how image colors can be manipulated purely using CSS. Social icons on-hover grayscale effect with CSS3 filters applied and with no filter applied.

Read more
The Dark Knight July 05, 2013
The Dark Knight

The Dark Knight logo with all-CSS circles and edges.

Read more
Animated Windows 8 Logo April 02, 2013
Animated Windows 8 Logo

A CSS3 animated Windows 8 logo, using CSS3’s @keyframes animation with transform and perspective properties.

Read more
Threaded Chat January 23, 2013
Threaded Chat

A Chat View design made purely in CSS, can be adopted for any chatting service for the web (recently WhatsApp for Web adopted similar design).

Read more
Retro Radio July 11, 2012
Retro Radio

A Retro Radio created using only CSS, a simple 2 hour experiment to know CodePen’s demonstration abilities.

Read more