Animated Intro Clip - No Flash, only CSS3

Finally an attempt to create a small animation using CSS3. There has been lots of debate of whether CSS3 and HTML5 will be able to kill Flash or not, but its certain that the web has come a long way from where it has been. In this project I attempt to create a small animation clip as an intro to the techno-management-fest site of our college. A small bundle of images and a css file. That's all I needed. Currently this runs only on Google Chrome and other -webkit- browsers. But a tweak will enable us to run it on firefox and opera also. This is just a small effort and the concept can be broadened to a much larger effort. Happy digging.

P.S. This is under development

Download the code:

http://hotfile.com/dl/138396729/297f124/movie.zip.html

Desktop icon arrangement

I gave a try to simulate the entire desktop on the web using the HTML5. Believe me its possible. A small part of it was to bring in the windows icon arrangement on the desktop. I tried to do it using CSS3 tags transform and transition. It was easy though the draggable part of the icons requires a lot of javaScript in it. So avoided it in this example. Here I just simulated the looks and feels of the desktop using CSS3.

Download the source code:

http://hotfile.com/dl/137235434/ec9ae61/CSS3_DesktopIconStyle.zip.html

Sliding login panel using CSS3

Generally login panels are popups in webpages. In this one I'm trying to be a bit different. Here is a login panel that slides down. As soon as you hover on the login text, the panel rolls down. The panel has no initial background colour. While coming down it changes its background colour to a semi transparent white. One can easily customize the looks of the form in the panel. Adding a bit of animation using the keframes tag would make it look even better. Most of the popups created in webpages uses javascript which take a larger type to load, while doing so with CSS3 not only making it load faster but also gives a better look to the panel.

Download Link
http://hotfile.com/dl/136562107/b8ab286/CSS3_SlidingLoginPanel.zip.html

Windows like menubar using only CSS3

This menu has been created using CSS3 and HTML5. Its really simple and needs to be customized as per the needs. No JavaScript in whatsoever form has been used. This menu can be easily customized by editing the CSS file. One can change the font-size, the colors, the opacity and the fade in and fade out effects of the menu. With the use of the "transform" and "transition" tags of CSS, effects have become really simple. You can even put in animations by using the "keyframes" tag. May be I'll show it in a modified version later.
With the use of the '>' operator now you can make anything appear or disappear whenever you want. Various realtime appications can be noted down as Tooltips, Notifications, Menus, Tabs and much more.

Download link:

http://hotfile.com/dl/136559776/25f6d45/CSS3_WindowLikeMenu.zip.html

Science Calculator Chrome Extension

Finally, after a break of four months and learning CSS3 and HTML5, I'm back to developing apps. This type a web app, more precisely, an extension for chrome, with CSS3, JavaScript and HTML5. This is just a scientific calculator. The buttons have an effect on hover using the CSS3 transform tag, and they are tidily arrange in a tab. Using JQuery I've made a sliding mechanism, which helps to keep the size of the calculator small inspite of have a large number of keys, and also make the accessibility of the keys easier. The main engine of the calculator is created using javascript functions. In general the site works in most browsers and also in mobile browsers, just the sliding mechanism made in JQuery has some issues. I guess that bug will be fixed in later versions.

Download the source http://hotfile.com/dl/135076422/d570dc3/Calculator.zip.html
Compilation instructions included inside.

Ticker

Many news channel and websites use a vertical scrolling bar. This widget solves the same purpose but it has been modified and can be customized easily by editing it with a text editor.

This widget has different backgrounds for headers and the description part. It can be changed by editing the CSS of the widget. Another customization is the scroll speed of the widget. It can be changed by changing the javascript file of the widget. The different parts of the width is a single column table made in HTML, the tags being styled by the CSS. You can go on adding more and more data by adding more rows to this table.

I have added the feature of the earlier photo viewer in this also. Hence the ticker stops as soon as we hover the mouse of the ticker. This is done by editing the javascript of the ticker.

If anyone of you wants to get the source, you can mail at amitdatta1806082599@gmail.com. Live free!! 

PhotoViewer

This project was in particular inspired by our college's Tech Fest website. And while developing stuffs for the Math's N Tech Club site of our college, I really found interest in pursuing this project. In the end it turns out to be a nice one. At least I'm satisfied fully!! :)

This is a photo gallery created totally with the help of CSS, JS and HTML. The right side of the gallery contains a scrolling ticker which contains the photos of the gallery, while the left side of the gallery is the space for viewing the photos. There is space for putting up captions in the bottom, with a semi transparent black background! Another trick, that I have added in the gallery is, the scroll stops as soon as you hover the mouse with it. Hence if you want to see a particular group of photos you can just hover the mouse. The width, scroll speed, thumbnail size etc can easily be customized by editing the CSS.

If anyone of you wants to get the source, you can mail me at amitdatta1806082599@gmail.com. Live free!!