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

JavaScript Tooltips

This tutorial describes how to create a nice, lightweight JavaScript tooltip. By Michael Leigeber.

jQuery virtual tour

This is an extension to the simple panorama viewer that allows you to play a little bit more with jQuery by adding interactivity to transform some panoramic views into a virtual tour.

A Colorful Clock With CSS & jQuery

This tutorial describes how one can create a clock using basic CSS and JavaScript.

Sticky SideNav Layout with CSS

Learn how to create a fixed sidenav layout for your blog or website. Having a fixed sidenav comes in handy when dealing with blog style websites where the content is extremely tall and there is a need for good amount of scrolling. The fixed navigation allows the user to cruise through the content without scrolling back up to the top to navigate through the rest of the site.

jQuery Masonry

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

CSS Box Shadow & Text Shadow Experiments

The CSS box-shadow and text-shadow allow us to create some pretty cool design elements that don’t even look like shadows. The key is to think about how CSS shadows work and use them to get the desired effect. The article features three remarkable examples of using box-shadow property creatively to achieve effects that don’t have much to do with shadows.

CSS3 Depth of Field

Sawyer Hollenshead’s experiment is an attempt to create the “Depth of Field” effect with CSS. The blurry text is accomplished using text-shadow, with the text color set to transparent. Take a look at the demo and don’t forget to press ‘n’ to toggle animation.

CSS3 :toggle-button without JavaScript

This demo presents a CSS3 toggle-button that works without JavaScript. If you ever need it: You stack two <a>s on top of each other and then disable pointer-events for the top <a> on :target.

WebKit Clock

This demo is driven by HTML5 canvas, CSS3, JavaScript, Web Fonts, SVG and no image files. The CSS file is huge, yet the result is quite remarkable.

Spin those Icons with CSS3

Tom Kenny features a neat effect which spins the social icons with the help of a CSS transforms and transition when you hover over them. A very nice enhancement.

• 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