Our Faves: Top 10 Absolutely Stunning Demos


Are you looking for some fresh ideas to get inspired? Here are few stunning demos that we’ve recently found. Some are just fun experiments and others are great examples of innovative coding. We hope that you will find them as fresh, original, and inspiring as we do. Let’s get started!

Super Simple CSS Tooltips

See the Pen Super Simple CSS Tooltips by Ben Mildren (@mildrenben) on CodePen.

This neat demo doesn’t use any JavaScript, only pure CSS. Just hover over the link and a text box appears wherever you choose: below, right, left, or centered under the link. It’s a nice, intuitive way to improve your UX and give a little more information, or a tip regarding a link.

Interactive Coloring Concept

demo_2 This is a fun experiment that allows you to easily color your site mockup. The idea is simple. There’s a color palette to the left of the screen (at the top for mobile platforms). You just pick the color you want to use and drag a droplet over to the element you want to style. A simple animation comes to life and your element is splashed in color. The drop and drag function comes from the interact.js library and the animation is achieved through an SVG element that is created on the fly and then scaled up and faded in with a CSS transition. It’s experimental and not supported by all browsers, but this is still brilliant.

Easy Peasy Parallax

See the Pen Easy Parallax, 4 lines of jQuery by Brian Douglas (@BrianDGLS) on CodePen.

See the Pen Easy Parallax, 4 lines of jQuery by Brian Douglas (@BrianDGLS) on CodePen.0

This cool concept shows a neat parallax effect when the background image moves the opposite of the mouse. Inspiring, huh? The affect was first coded with only 4 lines of jQuery and then re-created using only 4 lines of JavaScript.

Material Design Stopwatch, Alarm, and Timer

demo_4 This little JavaScript experiment includes a timer, alarm clock, and stop watch. It is responsive and conforms to Google’s Material Design Guidelines. Three different files control the different functions of the app, so you can install the functions you need separately.

Marvel Logo animation

See the Pen Marvel Logo animation | pure CSS by Gregor Adams (@pixelass) on CodePen.15206

Inspiration can come from anywhere. For Gregor Adams, it came while watching Netflix’s Daredevil. We have to say that this animation is simply Marvel-ous! It’s a fantastic tribute to Marvel comics created in pure CSS.

Collapsible nav with burger menu

See the Pen Collapsible nav with burger menu, no JS by Eduardo Bouças (@eduardoboucas) on CodePen.15206

Here’s a collapsible navigation menu without any JavaScript. A simple click of the burger-style navigation button results in a clean drop down menu that animates into an X button. This can add a nice touch to your UI and help improve the UX.

Hero Slider

demo_7 This responsive hero slider is really easy to use and to customize. There is even a cool video option, on top of the images, backgrounds, and different text alignment options. CSS and jQuery provide the power under the hood.

QLOCKTWO in HTML, CSS, and JavaScript

See the Pen Creating the QLOCKTWO in HTML5, CSS and Javascript by Fabrice Weinberg (@FWeinb) on CodePen.15206

If you are a fan of the QlockTwo, you will love the fusion of HTML5, CSS, and JavaScript that created this QlockTwo demo. This clever timepiece displays the current time without the use of digits or a clock face. A color selector controls the color of the display. How cool is that? It currently supports five languages, but they are looking for help to increase that number.

SVG Animation

demo_9 If you want to play around with SVG animations, the Designmodo guys have some awesome ideas. This demo features a few nice icon hovers effects, text, and graphic animations using CSS and JavaScript. These are all great techniques for making your design more interactive.

Calm breeze login screen

See the Pen Calm breeze login screen by Lewi Hussey (@Lewitje) on CodePen.15206

This is a truly inspiring demo. It is very simple, clean, and incredibly appealing. Lewi Hussey has created a serene log-in page with a very subtle background animation and even more smooth interaction effects. He calls it, “An ultra simple login screen on a calm breezy day,” and we call it inspiring. With CSS and just a little JavaScript, you create an atmosphere that just begs the user to log in!

We hope you find this collection of demos and experiments as innovative, exciting, and inspiring as we did. If you have any thoughts about these concepts or want to suggest other demos to highlight, we’d love to hear from you. Just drop a comment below. We’re looking forward to it!

All posts Back to top