Some day agos, jsB@nk presented to you a cool list of awesome, unique web experiments based on CSS3 via Beautiful and Stunning CSS3 Animation Experiments, and today in this JavaScript article, jsB@nk keep showing you a list of other 50+ web applications, JavaScript experiments that built on CSS3 technology; especially, we have full completed tutorials to create these stunning CSS3 experiments by yourself. Some names you will be excited: Sexy Vertical Sliding Panel, Awesome Overlays with CSS3, 3D Ribbons, Beautiful Looking Custom Dialog Box, Halftone Navigation Menu, Coverflow With CSS Transforms, 3D CSS Transforms, Taggify, AmberJack, SimpleModal, jQuery Masonry, WebKit Clock, Microsoft Office Minibar.

Please go to the inner post-page to view full list of these 50+ awesome CSS3 experiments/applications. And see more cool web-based applications below:
- Showcases of Awesome Designs with Stunning JavaScript
- 50+ Great Web Applications of Data Visualization

• Demo
• Enlarge
• Reload
• New window

Beautiful Background Image Navigation with jQuery

In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. The background image for each item will be animated to slide into place in different times, creating a really nice effect. The background image sliding direction from the list item in the middle will depend on which item the user was before: coming from the right, it will slide from the left and vice versa.

Awesome Cufonized Fly-out Menu with jQuery and CSS3

In today’s tutorial we will create a full page cufonized menu that has two nice features: when hovering over the menu items we will move a hover-state item that adapts to the width of the current item, and we will slide out a description bar from the left side of the page, reaching towards the current menu item.

CSS3 Background-Clip: Text

To carry out the DIN typeface, a transparent PNG with letters was used to achieve that subtle yellow to blue fade animation:

Sticky Notes with CSS3

In this tutorial you can see how sticky notes with CSS3 can be created

3D Animation Using Pure CSS3

The perspective property is what we need to create the 3D effect. Using transform and transition, we can create 3D animations using pure CSS3.

Beautiful Photo Stack Gallery with jQuery and CSS3

In this tutorial you can learn how to create a nice and fresh image gallery. The idea is to show the albums as a slider, and when an album is chosen, the images of that album are shown as a beautiful photo stack.

How To Change Default Text Selection Colour

Whilst this CSS3 declaration might not be crucial to your project or design and yes it is not supported by all browsers, but it is a fantastic effect that really takes your design one step further.

Making Better Select Elements with jQuery and CSS3

Here you can find out how to build a script, one which is going to take an ordinary ‘select’ element, and replace it with a better looking, markup powered version, while keeping all the functionality intact.

BounceBox Notification Plugin with jQuery & CSS3

In this tutorial you will find out how a bouncebox notification plugin can be created with jQuery & CSS3.

Contextual Slideout Tips with jQuery & CSS3

Knowing the importance of HTML standards, here is a set of contextual slideout tips with jQuery & CSS3 which are ideal for product pages and online tours.

• Code
• Print

• Comment (0)
• Write

by Preview

Cancel reply

Write your comment

Comments of Guest will be previwed before published
Give your real email to get notifying replies, or comment will be deleted

Your name *
Your email^g *
Your site

Comment's title

I assure 100% I am real human
I repeat I am not bot

• Sent (0)
• New