CSSFlow

Sign Up Form

Thibaut — 2013-06-05T14:08:02Z

A simple sign up form with fresh colors and subtle three-dimensional effects.

The top border is created using a linear gradient with fixed color-stop points.

Original PSD by Dylan Opet.

Demo

Tabbed Widget

Thibaut — 2013-05-23T13:24:18Z

A simple tabbed widget that works without JavaScript.

This snippet makes heave use of the new CSS3 selectors to create a tabbed content area using only CSS, while keeping the markup to a minimum (no hidden inputs & labels).

Each tab's content is toggled using the :target pseudo class selector and the current tab is highlighted using the ~ adjacent sibling combinator.

I then went a bit overboard with the child/type selectors in order to have the first tab activated by default.

Read the full source here.

Note: #target links make the page jump to the element with the matching ID when they're clicked. This is a bad user experience and I wouldn't use it in production. This snippet is more a demonstration of what CSS can do than a usable implementation. ;)

Original PSD by Aaron Sananes.

Demo

Check Buttons

Thibaut — 2013-05-07T14:47:31Z

A set of dark, round buttons with a pure CSS check mark.

The check mark is created using CSS3 transforms. The button text is replaced by an empty rectangle with two borders in a before pseudo-element. The rectangle is then rotated by 45 degrees. You can read the source here.

Also included in the snippet is a version that uses a Unicode character, which works as a fallback for browsers that don't support CSS transforms (IE 8).

Original PSD by Alex Montague.

Demo

Checkout Form

Thibaut — 2013-04-17T14:26:34Z

A clean and simple checkout form with credit card fields, submit button and a fancy price badge.

Original PSD by Umar Irshad.

Demo

Dark Datepicker

Thibaut — 2013-04-03T14:36:06Z

A dark pop-up date picker with a slick navigation bar and crip shadows.

Original PSD by Alexey Anatolievich.

Demo

New Flat UI Kit

Thibaut — 2013-03-21T16:05:03Z

I've released a new "Flat" CSS UI kit and updated my other kits with new & improved elements.

Here's a preview of the new kit:

I used lightweight CSS and some advanced techniques to create a sleek user interface that you can incorporate into any web project.

As usual it comes fully tested in IE 8 and other modern web browsers, and for only $9 you can use it in an unlimited number of websites.

Check out the complete UI on the demo page.

The "Colorful", "Graphite" and "Dark" kits have also received major updates with new elements including tables, headings, dropdowns, alert messages, and more.

You can demo these new versions here.

I hope you like it. If you have any comments or suggestions I'd love to hear them.

Flip-down Clock

Thibaut — 2013-03-21T16:02:41Z

A “skeuomorphic” flip-down clock for your countdowns and timers.

As usual this is all done with CSS using CSS3 gradients and shadows.

Original PSD by Julien Debove.

Demo

Glossy Buttons

Thibaut — 2013-03-13T14:33:53Z

A set of sleek, glossy buttons in multiple colors.

Download the Sass source to quickly generate your own color variation.

Original PSD by Alex Montague.

Demo

Pricing Table

Thibaut — 2013-03-06T16:06:17Z

A simple pricing table. Each plan has a title, price, list of features, and purple sign-up button.

Can you guess how the dashed line is created? Answer here.

Original PSD by Edi Gil.

Demo

Social Buttons

Thibaut — 2013-02-20T19:03:33Z

A set of social media buttons for tweeting, liking, and subscribing.

The icons are image-based but a double-resolution version is included for high-density screens.

Check out the source for an example of using CSS media queries to serve Retina-ready assets to high-density devices.

Demo

New Name & Mobile UI Kit

Thibaut — 2013-02-20T18:58:42Z

Hi everyone

WebInterfaceLab has changed name and is now CSSFlow. With most resources now being CSS-only and me not liking the old name, I decided it was time for a change.

I took this opportunity to completely re-design the site, this time using a responsive approach and an icon font in place of image sprites (which is much easier to maintain thanks to tools like IcoMoon and FontSquirrel). I hope you like it.

These past few weeks I've also been hard at work creating a UI kit targeted at mobile devices.
The result is this: a native-like UI created entirely with CSS.

I tested everything extensively in iOS 5+, Android 4+, and Opera Mobile 12.1.
Check out all the screens and features here.

Lastly, you can now preview all my UI kits directly in your browser. Have a look.

Facebook Login Form

Thibaut — 2013-01-30T15:10:00Z

A simple login form in Facebook color scheme.

Original PSD by Alex Montague.

Demo

Metal Progress Bar

Thibaut — 2013-01-16T16:27:21Z

A tiny blue progress bar in a shiny “metallic” container.

Check out the source for an example of using multiple gradients on a single element.

Original PSD by Ivo Ivanov.

Demo

Modal Box Contact Form

Thibaut — 2013-01-09T15:12:32Z

An elegant contact form in a modal box with a custom dropdown and round submit button.

Original PSD by Orman Clark.

Demo

App Navigation with Notification Badges

Thibaut — 2012-12-19T16:48:47Z

A simple app navigation with colorful notification badges.

The badges are generated from a single input color using Sass functions, which you can easily customize to create your own.

Have a look at the source here.

Original PSD by Petrovski Marijan.

Demo

New Dark UI Kit

Thibaut — 2012-12-12T16:27:14Z

I've released a new "Dark" web interface kit.

As with all the other kits it's created entirely with CSS, easy to implement, and thoroughly tested.

Here's a preview:

New: you can now save 30% and buy all 3 kits for $29.

Check it out here.

Notepad

Thibaut — 2012-12-12T16:22:26Z

A realistic notepad with a lined paper background and hidden pages at the bottom.

The lines are created using linear gradients, making the content fully flexible in width/height and keeping the markup clean.

Original PSD by Mathieu Berenguer.

Demo

New Graphite UI Kit

Thibaut — 2012-12-05T16:02:46Z

I've released a new web interface kit coded entirely with HTML5 & CSS3.

No JavaScript and no images means the UI loads fast and looks great on HiDPI/Retina displays.

Here's a preview:

You can implement it today with a simple copy/paste.

Download here.

Notification Windows

Thibaut — 2012-12-05T15:59:36Z

A set of flat notification windows with pure CSS icons.

The icons are created using before/after pseudo-elements (no extraneous markup) and CSS3 transform functions.

They even work in IE 8 where Unicode characters make up for the lack of CSS transforms support.

Original PSD by Cosmin Negoita.

Demo

Download all snippets in one easy .zip + a bonus

Thibaut — 2012-11-28T15:36:17Z

You can now download all existing snippets in a single zip file, and receive an awesome bonus snippet, and support me and my work, for only $9.

Here's a preview of the bonus:

It's 100% retina-ready using only CSS (no images or data URIs) and even works in IE 8!

Check it out here.

Analytics Widget

Thibaut — 2012-11-21T14:13:01Z

An analytics widget with a shiny bar chart and a nice metal texture for background.

Check out the source on the new demo view to see how the background pattern is created using CSS radial gradients only.

Original PSD by Farzad Ban.

Demo

Multi-colored Buttons

Thibaut — 2012-11-16T14:46:49Z

A set of multi-colored buttons with hover and active states.

These are generated from a single input color using Sass functions.
Download the source to create your own.

The arrow is done using good old "Comic Sans MS" ;-)

Original PSD by Daryl Ginn.

Demo

New Design & UI Kits

Thibaut — 2012-11-14T16:22:59Z

Hi everyone!

I'm happy to introduce the new webinterfacelab.com with full retina support.

I'm also releasing a new product: a CSS-only UI kit. Check it out here.
More of these will come out regularly.

In the next few weeks I'll also update the demo viewer with an integrated source view.

Oh, and there's a new snippet coming out by the end of week ;)

Hope you like all of this & have a great day!

Thibaut

Dark Pagination

Thibaut — 2012-10-23T11:38:30Z

A dark pagination complete with hover and active states.

Original PSD by Bart Ebbekink.

Demo

Dark and Light Dropdown Lists

Thibaut — 2012-10-10T13:31:37Z

A set of custom <select> dropdown lists in dark and light color schemes.

These are fully functional and accessible without Javascript or images.

They use the native <select> element with a wrapper element to hide the dropdown arrow.

Inspired by Hemn Chawroka's PSD.

Demo