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 : 4695  
 
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 END DEVELOPMENT.

 
 
 

Related Posts

Understanding LCP, CLS, FID. All about Core Web Vitals in Google Search Console

A few months ago we talked about certain Google metrics that were displayed in Search Console. The reason for writing another post on this topic is that Google has changed…

Validating HTML forms using BULMA and vanilla JavaScript

Today we are going to write about contact forms and how to validate them using JavaScript. The contact form seems to be one of the top features of every basic home…

How to use Parallax.js effect on your website

Today, we're going to write about the parallax effect, similar to parallax scrolling, and how to implement it to improve your landing page. In webdev, they say mobile first -…

How to make the website's dark mode persistent with Local Storage, CSS and JS

Recently we wrote about how to do a switchable alternative color mode or theme, a very useful and popular feature to websites. Today’s article is going to be about how…

Dark Web: the creepy side of the Internet is not as dark as believed

People who surf the Dark Web are not necessarily looking for something illegal. Most people want to protect their privacy. And according to a recent study, 93 percent only use…

Cross cultural challenges in web design, an overview

The user experience design of a product essentially lies between the intentions of the product and the characteristics of your user. - David Kadavy - The task of building a culturally appropriate…

Website Traffic Getting Low? 4 Immediate Action to Take

If you have created a website, I am sure your end objective is to create a strong brand presence, boost engagement, and multiply revenue. An interesting statistic showed that there were…

The easiest way to align items using flexbox

With the release of flexbox in CSS, it has become an essential tool when placing elements next to each other, since, by default, the children of a display: flexare stacked…

Dark Mode on website using CSS and JavaScript

In today’s article we are going to learn how to build pretty much standard these days on the web pages and that is the alternative color mode and switching between…

JavaScript: Spread and Rest operators

In today’s article we are going to talk about one of the features of the ES6 version(ECMAScript 2015) of JavaScript which is Spread operator as well as Rest operator. These features…

How To Add Filter Effects to Images with CSS

To achieve interesting effects on your images, learn about the 'filter' and 'Backdrop-Filter' properties of CSS. CSS filters are a very attractive feature of CSS that allows you to apply certain…

Why You Should Hire Node.js Developer for Your Backend Development

When developers are building a new website, they mainly focus on both frontend and backend development. The frontend code helps create the interfaces through which the app interacts with the…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration