15 Experimental Projects From Mozilla Demo Studio

15 Experimental Projects From Mozilla Demo Studio
by Janeth Kent Date: 15-07-2013 mozilla demo studio web design development download html5 css3

We have published a few posts about experimental CSS3 and HTML5 to show the power of them.And you know,new projects are being released so often and personally we like to check out these new experiments.

If you are a web designer who is trying to understand the true potential of these two markup languages, then these awesome and creative experimental web designs from Mozilla Demo Studio will be a great source of inspiration.

The Mozilla Demo Studio, it's a place where developers can develop, share, demonstrate, and learn all about Web technologies and:

  • View demos that showcase what HTML, CSS, and JavaScript can do.
  • Inspect the source code for those demos so you can see how they work.
  • Read documentation to learn about the open standards and technologies that power the Web.

This time we are showcasing (mostly fresh) projects developed using CSS3,HTML5 and Javascript from Mozilla Demo Studio.

These Mozilla Demo Studio examples will encourage the developers to come up with some awesome web designs by utilizing their skills.

So study these examples well and enjoy!

1. The Box


An animated cardboard and paper 3D scene, made from recycled materials.

Demo & Download

2. Rofox CSS3 Animation


Little spaceship lands on planet. Little spaceship takes off from planet.

Demo & Download

3. Ghost writer Art Studio

Skookum's online art playground.

Demo & Download

4. Zoom to infinity

An infinite zoom-in using CSS3 keyframes.

Demo & Download

5. Escapade

Escape the multitude of balls thrown at u.

Demo & Download

6. Old Radio


Just CSS3 (no images) + HTML5 (audio API) + JS.

Demo & Download

7. HTML5 Free Cell

Using drag and drop to demonstrate uses for history api.

Storing history and using state can be extremely useful in ajax environments and in page content. The idea of this demo is to take other user inputs or to expand the use of back button. This demo shows the use of saving state after drag and drop user interaction.

Demo & Download

8. Comic Gen


Comic genertor app.

It is a comic generator using canvas and some JS API.

Demo & Download

9. The Planetarium


A CSS3 journey through the Solar System. Works in Firefox, Chrome, Safari.

Demo & Download

10. The Letter-Heads

Experience interactive shadow-art in your browser.

The Letter-Heads is a demo that lets you experience interactive shadow art. Meet different characters made with letters and text-shadow. By moving and rotating the letters into the right position, their shadow of the letters casts a silhouette that looks like a head. The animation is done with CSS3+JS. It’s mainly inspired by shadow artist Kumi Yamashita (kumiyamashita.com). 

Demo & Download

11. Chess

Browser based chess engine with CSS animation.

This demo is based on Douglas Bagnall's javascript chess game written for the 5k competition in 2002 (http://p4wn.sourceforge.net). Use of unicode was inspired by Antony Lesuisse's version of the game (2005). Animation added by Yehuda B. (2011).

Demo & Download

12. Zoom Menu


Just a simple menu zooming with CSS3.

This is a small part of a redesign I am working on. I was wondering how do make a menu that zooms into a smaller thumbnail when you don't use it and gets bigger when you want to click a link. Now with animations :).

Demo & Download

13. Parts

An interactive music video for the Gamits new Album.

Demo & Download

14. Meowww!

A cat meowing.

Using no graphics and no javascript just CSS to animate a cat meow.

Demo & Download

15. CSS sliding image gallery

An image gallery made without JavaScript using dots and arrows to browse.

The demo uses CSS3's target pseudo-class and CSS transforms to achieve to slide behavior.

Demo & Download


by Janeth Kent Date: 15-07-2013 mozilla demo studio web design development download html5 css3 hits : 6756  
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.


Related Posts

Alternative tools for graphic design

There are many people today who only use the following for design purposes Canva as it is a really popular software and website and there is no denying that it…

Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3

HTML5 Canvas is a technology that allows developers to generate real-time graphics and animations using JavaScript. It provides a blank canvas on which graphical elements, such as lines, shapes, images…

Loading images by resolution with HTML5

Normally the way to load images in HTML is through the img element to which we pass as a parameter the URL of the image to load. But since HTML5…

How to make your own custom cursor for your website

When I started browsing different and original websites to learn from them, one of the first things that caught my attention was that some of them had their own cursors,…

8 benefits of having a website for your business

At this moment, the Internet is a phenomenon that is sweeping the world. It has been able to interconnect millions of users all over the planet. People have made the…

Open source web design tools alternatives

There are many prototyping tools, user interface design tools or vector graphics applications. But most of them are paid or closed source. So here I will show you several open…

How to create a .onion domain for your website

The dark web, a hidden network accessed through the Tor browser, offers enhanced privacy and anonymity for websites. To establish a presence on the dark web, you can create a…

How to access webcam and grab an image using HTML5 and Javascript

We often use webcams to broadcast video in real time via our computer. This broadcast can be viewed, saved and even shared via the Internet. As a rule, we need…

How to Send Email from an HTML Contact Form

In today’s article we will write about how to make a working form that upon hitting that submit button will be functional and send the email (to you as a…

Use the SRCSET attribute to improve your SEO

There is a new standard HTML attribute that can be used in conjunction with IMG called SRCSET. It is new and important as it allows webmasters to display different images…

How to multiply matrices in JavaScript

It may seem strange to want to know how to multiply matrices in JavaScript. But we will see some examples where it is useful to know how to perform this…

JavaScript Formatting Date Tips

Something that seems simple as the treatment of dates can become complex if we don't take into account how to treat them when presenting them to the user. That is…