12 Geeky Web Tricks With HTML5 And CSS3

Dikirimkan pada - Kali Terakhir Diubah Suai pada

One is often left amazed when looking at the smart Google doodles, aptly designed to celebrate each day, be it colourful festivals, birthdays of legendary people, and numerous other occasions. The doodles are animated in a geeky yet attractive way, to provide an interactive interface to the user. This interaction is surprisingly not created by FLASH, but using HTML5, which is free and open source.

Some features of HTML5 are being used today to deliver rich experiences across platforms, including devices where Flash is not allowed. HTML - or Hypertext Markup Language - has been a core technology for the web for quite some time. HTML5 is the 5th revision and improved version of HTML to support the latest multimedia, while retaining its easy readability. Since it is also a cross platform language for mobiles, HTML5 is capable of running on any computer running various platforms, as well as on mobile devices. It has an excellent performance on platforms such as Linux and Mac OS X.

Of all the other aspects unlike Flash, HTML5 on its own cannot be used for animations. It must be supported by CSS3 (Cascading Style Sheets) or JavaScript. And that’s how the combination of HTML5 and CSS3 makes the life of the modern web developers easier, by providing services to handle multimedia easily.

Lot of experimental toys have been created using these, which are mainly to play around. The browser compatibility needs to be checked before trying any of them. Safari 5 or Chrome 6 are the best suited ones, while Firefox 3.6 and Internet Explorer 9 also work for most.

Let us see some of the geeky toys created as experiments using HTML5 and CSS3.

  1. Pure CSS3 AT-AT

Pure CSS3 AT-AT:

This is a simple yet perfect illustration of animation created using only CSS3, by Anothony Calzadilla. This is done without a single line of programing code (no JavaScript, ActionScript, Java, Objective C or any other code). CSS3 is used to manage all the styling code associated with the graphics. It offers a wide range of options like colors, gradients, shadows, opacity, transition animation, movement,  etc. Here though, the animation is minimal. It successfully demonstrates the power of CSS. The viewer can enable the outlines or the ‘bones’, to view the different boxes that are being moved.

  1. Keylight


This is another very simple interface which allows the user to play with dots to produce music in a graphical manner. Such a user-friendly and easy interface that even small kids can try their hand in creating some beautiful music, and be proud of it.  Designed by the very talented Hakim El Hattab, it consists of a blank 3D-effect space where the user can place many colored dots, each of which play a different tone. These dots can be moved in different ways to modify the tones, changing the speed at the users' will. The song is recorded in the page URL during the whole process. This URL can then be copied and sent to your loved ones.

  1. CSS-Man

CSS3 Man:

Who does not know the famous Spider-Man cartoon from the 1960s? This interface is again from Calzadilla, showing Spider-Man in action jumping with his super powers, and also makes a dig at the good old FLASH software.

  1. Sinuious


Are you one of those who is somewhat addicted to games online? This one by Hakim caters to those game-crazy geeks who want to play around with interactive interfaces. The game is very simple and similar to Asteroids, except that it does not have shooting. There are some other features to protect oneself during the game, just like any other video game. Children or adults, irrespective of their age can have real fun playing such a simple game which has very minimal requirements.

  1. Cubespace


This is a wonderful simulation of the good old LEGO bricks. One can pick and drop the colorful cubes and build with them whatever structure one's mind can think of. The user edits them, moves them, plays with them, and the best part is the whole thing can be replayed to see the animation of your creative streak. It is a Cubaliciously engrossing game!

  1. MugTug Darkroom


The Mugtug’s Darkroom is an interface which is very similar to photoshop software, although still not quite as popular as the version by Adobe. It has a wide array of photo editing tools and options, be it exposure, brightness and contrast, saturation, simulation for color blindness, and more of the essential we have come to expect from any application which allows us to 'censor' our images. This application allows the user to edit the images directly from their hard-drive, at their own comfort. The images give a whole new expression on editing and printing.

  1. Apple Gallery Demo

Apple Gallery Demo:

This interface is specific to the machines from Apple. As the name might suggest, it allows the user to have a 3D view of the image. The photo browser gives the user a feeling of seeing the pictures in real space.

  1. Arcade Fire: The Wilderness Downtown

Arcade Fire: The Wilderness Downtown:

Want some wilderness and uniqueness in an interface? Then this one's definitely for you. This creation for a unique web design will definitely feature in any list of geeky web toys. The interface gives an option for  the user to enter the address where they grew up. Then it creates an online video using Google maps with the technology to highlight childhood memories. The fluid animations used and the lovely song  “We Used to Wait” by Arcade Fire complete the picture and give a surreal experience to the user.

  1. Water Type

Water Type:

Some interfaces do nothing, and are just for displaying the output on-screen in a pleasant manner. This playful little application lets you create a message with a fun water-effect animation. As the user inputs the message, it is automatically displayed like a splash of water, giving a really cool effect, virtually.

  1. Destructive Video

Destructive Video:  

As the name suggests, the interface is to destroy a video being played. The user sees the bunny shooting arrows in the video and clicks on it at the same time, with the video fragmenting into little pieces while playing. And the best part is it reintegrates itself and reappears, after just a few seconds. Have fun with this one!

  1. Checkwave


This is again a simple interface created by none other than Hakim, to create a wave of checkboxes. The user just needs to check on the checkbox to visualise a wave moving in the direction of the click, regardless of the point of origin, for example, the corner or the centre. Fun to watch and play with, again the usability aspect is not much.

  1. Flipside


Another interface from Hakim, this is a button that seamlessly transitions from action to confirmation. When the Delete button is pressed, it asks whether the user wants to do the same or not. It is a very usable and common application we see in our online transactions, for example, while deleting our mails in the inbox.

Get creative!

These are just a few to list from the wide range of graphic tricks which can be assimilated into the design of your website, using the lethal combination of HTML5 and CSS3. But if the user is keen to experiment and learn more about technology, there is a wide array of options available online. Below are a few more links which can be used to explore more along the same lines.

Try them out, get geekier and let the world enjoy the virtual world of graphics and animation. :)

Which web trick among the above-mentioned is your favorite one? Let us know in the comments below.

Dipaparkan 11 Ogos, 2017


Software Developer

Lucy is the Development & Programming Correspondent for Freelancer.com. She is currently based in Sydney.

Artikel Seterusnya

The Whole Truth (& Nothing But The Truth): A Summary Of Failed Startups