Categories

Accordion (1) AfterEffects (1) Application (2) Automobile (1) Banking (1) Chrome (1) Cinema4D (2) Coding (2) Corel Draw (1) CSS (4) CSS3 (11) Design (2) Dropdown (1) Film (1) Finance (1) FinTech (1) Gateways (1) HTML (4) HTML5 (4) JavaScript (7) KDE (2) Layout (1) Login (1) LungoJs (1) Menu (3) Menubar (2) Movies (1) Navigation (2) Open Source (4) Panel (1) Payment (1) Photo Gallery (1) Photoshop (2) PHP (3) Production (1) Rekonq (2) Sony Vegas Pro (1) Startups (1) Taskware (1) Technology (1) Ticker (1) Validation (1) Website (3) XHTML (1)

Saturday, December 24, 2011

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:

Sunday, December 11, 2011

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:

Friday, December 2, 2011

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: