css3 – Amazing Things

10 Pure CSS3 Drop Down Navigation Menu’s (No Javascript)

Aakash Doshi — Sun, 12 Aug 2012 07:14:00 +0000

1.Pure css3 Lava Drop Down Menu Demo|Tutorial

2.Pure css3 Animated Drop Down Menu Demo|Tutorial

3.Pure css3 Menu Navigation Effects Demo|Tutorial

4.Pure css3 Click to Open/Close Drop Down Menu Demo
5.css3 3D Flip Down Menu Demo

6.Pure css3 Smooth Transition Drop Down Menu Demo|Tutorial

7.Multi-Color css3 Drop Down Menu Demo|Tutorial

8.css3 Flying Menu Demo|Tutorial

9.Office Style css3 Menu Demo|Tutorial

10.Click Action Multi-Level Drop Down Menu Demo|Tutorial

The post 10 Pure CSS3 Drop Down Navigation Menu’s (No Javascript) appeared first on Amazing Things.

15 Fresh and Pure CSS3 Tutorials 2012

Aakash Doshi — Sun, 13 May 2012 07:41:00 +0000

1.Pure CSS3 accordion image gallery
The very popular “accordion or toggle” effects can now be easily implemented using only CSS!

Article Source-Speckyboy Click the Image for live Demo

2. Impressive Product Showcase with CSS3

A product page is any page on your website that showcases a product. It has to describe its features, give some screenshots, and be descriptive.Now its possible with only css3.

Article Source-TutorialZine Click the Image for live Demo

3.Flux Slider using CSS3

Experimental attempt to enable Nivo style image transitions but instead of using the traditional Javascript timer based animations to utilise the newer, more powerful CSS3 animations.

Article Source-Joelambert Click the Image for live Demo

4.A Pure CSS3 Cycling Slideshow

Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers.

Article Source-Smashingmagazine Click the Image for live Demo

5.CSS3 3D Unfolding Menu

This menu has 3D unfolding sub list with animation. Just hover the top level link to see this in Firefox, Safari and Chrome.

Article Source-cssplay Click the Image for live Demo

6.CSS3 3D Flipdown Menu

This menu has 3D flip down sub lists with animation. Just hover the top level links to see this in Firefox, Safari and Chrome.

Article Source-cssplay Click the Image for live Demo

7.A Bunch of Soft, Customizable Pressure Buttons in CSS3

You can use or edit these as much as you like without any credit. They’re compatible with the latest version of all the major browsers.

Article Source-inserthtml Click the Image for live Demo

8.Content Navigator with CSS3

Responsive content navigation using CSS3 transitions and :target pseudo-class.

Article Source-codrops Click the Image for live Demo

9.CSS3 ordered list styles

In this article you’ll learn how to add some CSS3 fine tuning to your ordered lists, using a semantic approach.
Article Source-redteamdesign Click the Image for live Demo

10.Fancy Social Menu with CSS3!
Today we’ll learn how to code a fancy social networks menu with HTML5 and CSS3 and absolutely no images. Yup, that’s right! No images at all. We’ll also learn how to convert a normal font to a web-font.

Article Source-dirtekdesigns Click the Image for live Demo

11.Stylish Image Content Slider in Pure CSS3
Yet another image content slider using pure css3.This will work in chrome and firefox.
Article Source-Designmodo Click the Image for live Demo

12.CSS3 Image hover effects
Five examples of hover effects using different CSS properties compared to the old tutorial posted on Codrops.

Article Source-alessioatzeni Click the Image for live Demo

13.CSS3 Skill Bar Animation
Article Source-alessioatzeni Click the Image for live Demo

14.Cross browser pure CSS3 buttons
The result is this set of buttons created entirely from CSS (no images used at all).

Article Source-midwinter Click the Image for live Demo

15.Sliding image panels with CSS3
Some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking on a label.

Article Source-tympanus Click the Image for live Demo

Thats all folks for now.Do leave me a comment if possible

The post 15 Fresh and Pure CSS3 Tutorials 2012 appeared first on Amazing Things.

8 Great Horizontal News Ticker Using Jquery and CSS3

Aakash Doshi — Thu, 23 Feb 2012 13:01:00 +0000

Today we are going to have a look at different Horizontal News Ticker’s using css3 And Jquery that can be implemented straight on your blog.News ticker’s are also referred as Scrolling text or Marquee text effects.For people wondering what are they check out below they are very familiar to all of us.I have collected some of the best News Tickers available with their Sources And Download Files.

Please allow some time for the live demo’s to load completely Google Chrome User’s Preferred

1.Smooth CSS3 ticker jQuery plugin is a beautiful News ticker inherited from 24 Hour news channel.

Check out the original Tutorial for different options available and an interesting story about this ticker.

~~2.Javascript News Ticker (outdated)~~

3.News Ticker in 4 lines of jQuery
There are a lot of different jQuery News Ticker plugins with lot of options that you can use. Do you want to learn how to create one on your own in only 4 lines od jQuery code ?
Check out the original article for more Demo’s and Downloads

4.Featurify Marquee jQuery plugin!

Extremely easy to use jquery plugin that allows you to create simple slider with auto playing and hover managing.

My Favorite so far.
Check out the original article for more Demo’s and Download

5.Simple Jquery Ticker using Jquery

This plugin is very simple, all it does is takes an unordered list with child li’s and hide all but the first list item and then rotate each list item on a set interval of time

Check Out Original article

6.CSS3 Marquee Ticker

This one is purely done with just css3 styling, but only for Safari, Chrome and Firefox 5+ at the moment.

Check out the Original article

7.Code Canyon Javascript Scrolling Ticker

A jQuery based scrolling ticker for displaying real time updates from a twitter account.

Scalable width for easy integration with your specific application.

Includes a sleek, low-profile default style. Easily customizable by enabling the the “tickerOnly” option.
Live Preview

7.1 Jnews Ticker
jNewsticker is about giving you choice. Out of the box, it comes with three styles of news ticker:Fade between news items (one is displayed at a time)Continuously scroll between news items Reveal news items, one character at a time (also known as the typewriter effect)And if you understand Javascript and jQuery, you can create your own news ticker styles to sit on top of jNewsticker.

Live Preview

8.Other Resources

Download Ticker’s

Any help or confusion regarding implementation,you can surely drop down a comment with your queries

The post 8 Great Horizontal News Ticker Using Jquery and CSS3 appeared first on Amazing Things.

Mind Blowing HTML5 Jquery and Javascript Demo’s

Aakash Doshi — Fri, 27 Jan 2012 19:26:00 +0000

Turn on your speaker’s

A Sticky Thing HTML5 DEMO

Awesome thing I have ever seen.A simple but addictive HTML5 canvas demo consisting of a Sticky Cloth with different properties like stickiness,gravity,size and stiffness as shown in picture below.

You will definitely love it and spend some time by varying different options.Do check out Gravity Zero.

Tomorrow Again JAVASCRIPT DEMO

A image gallery with creative effect.You will say only one word “WOOWW!”

HTML5 Audio Buzz

Buzz is a small but powerful Javascript library that allows you to easily take advantage of the new HTML5 audio element.Also do check their lovely website with their logo sound effect

Kinect and CSS3 Animation
Demo shows how the word “Mozilla Devderby” is animated with the help of CSS3 to play Ball.

Smash Christmas bulbs JQUERY DEMO

If you have visited my blog during Christmas,you might have noticed a smashing bulbs with snowfall effect.This demo shows the bulbs that can be smashed with your mouse cursor along with glass breaking sound effect,So turn your volume HIGH.

Birrificioirpino an HTML5 Parallax website

I have never came across such a powerful html5 parallax website.Its a pleasure to surf their entire website which include mind blowing effects with every different click you make.Dont forget to click the bottle’s as well.

Ball pool HTML5 DEMO
The rules are written on the biggest ball.Shake your browser!

Light Shift Optical JAVASCRIPT DEMO

A parallax slider with amazing sparkling effect you cannot miss.You cannot even compare with Jquery effects available.

Flower power HTML5 DEMO
Write anything with flowers and petals.You can even save it onto to your computer.The colors used to create flower effect are out of world.

Javascript Fireworks
Type your message and turn it into firework.

HTML5 Love
One of my favorite HTML5 demo so far! Turn your speaker’s ON and enjoy the awesome music and patterns specially the HEART one.If click twitter tweets are displayed.

Browser Ball HTML5 DEMO
Create multiple windows and leave the ball,check how it travels and bounces through all windows.

Mistakes world shuffler JAVASCRIPT DEMO
One of my most favorite script where you type your own message as shown in picture below and it will isolate the common letter from next line and re-using it to create the whole message.Quite confusing check out and find out yourself.

So which one was your favorite?

The post Mind Blowing HTML5 Jquery and Javascript Demo’s appeared first on Amazing Things.