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:
- 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.
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.
Little spaceship lands on planet. Little spaceship takes off from planet.
Skookum's online art playground.
An infinite zoom-in using CSS3 keyframes.
Escape the multitude of balls thrown at u.
6. Old Radio
Just CSS3 (no images) + HTML5 (audio API) + JS.
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.
8. Comic Gen
Comic genertor app.
It is a comic generator using canvas and some JS API.
A CSS3 journey through the Solar System. Works in Firefox, Chrome, Safari.
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).
Browser based chess engine with CSS animation.
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 :).
An interactive music video for the Gamits new Album.
A cat meowing.
The demo uses CSS3's target pseudo-class and CSS transforms to achieve to slide behavior.
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.
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…
Today we are going to write about Regular Expressions known as regex or shortened regexp, a very useful concept of using search patterns. Surely you were in a situation when you…
Let's continue with the 2nd part of our article in which we try to give you some advice on how to safely and securely explore the dark web. Let's restart from…
The dark web can be a pretty dangerous place if you don't take the right precautions. You can stay relatively safe with a good antivirus and a decent VPN. However,…
Most of the actions you take online are not as private as you might imagine. Nowadays, countless people and groups try to follow our online behaviour as closely as possible. Our…
In 2020, life has moved indoors. School, shopping, entertainment, and work have all moved online to keep up with the fight against COVID-19. And with it came an enormous demand…
In software engineering, we use design patterns as reusable solutions to a commonly occurring problem, a pattern is like a template for how to solve a problem. Model-View-Controller (MVC) is a…
Creating a website might seem like a simple thing. After all, what do you really need besides a good hosting provider and relevant content, right? Well, the reality is quite…
Today we explain how to set up Tor to browse safely, and we'll share some links to safe sites on the deep web to get you started. Many already know that…
Graphic designers tend to do the majority of their work using a graphics tablet. However, a computer is still something you need. The idea is that you are bound to…