This is an eye-catching accordion with the help of CSS, jQuery and the easing plug-in for some fancy effects.

Demo

Original Tutorial

Designers at ZURB have a creative ideas in there playground . I like there way of design its clean and simple.

Some of showcases at ZURP Playground:

	Inline Form Labels With some CSS tricks and a few lines of javascript we can create inline labels that don’t suck.
	Simple Drop-In Modals How to create a very simple modal element using CSS3 and a single line of javascript.
	Newspaper Layouts with CSS Columns Creating a newspaper-like layout is easy using the new CSS column elements.
	Super Awesome Buttons with CSS3 and RGBa Using a combination of CSS3 and new RGBa color values, we can create an easily scalable suite of awesome buttons, complete with gradient, drop shadow, and more.
	Polaroid Images with Only CSS3 Using nothing more than a grid of linked images and CSS3, we echo the title text of our links and use CSS3 to create “randomly” tilted polaroid-style images.

Recently Google Translate announced the ability to hear translations into English spoken via text-to-speech (TTS).
Looking at the Firebug Net panel for where this TTS data was coming from,
I saw that the speech audio is in MP3 format and is queried via a
simple HTTP GET (REST) request:
http://translate.google.com/translate_tts?tl=en&q=text.
Google Translate notes
that the speech is “only available for short translations to English”, and it turns out
that the TTS web service is restricting the text to 100 characters.
Another restriction is that the service returns 404 Not Found if the request
includes a Referer header (presumably one that is not for translate.google.com).

In spite of the limitations of the web service which certainly reflect
the intention that the web service is only to be used by Google Translate,
thanks to the new HTML5′s Audio element and
rel=”noreferrer”,
the service may be utilized by client-side web applications like following (Google Chrome 4 recommended):

Here is a nice mashup that marries HTML5 Audio support in modern browsers with the new Google Translate API that does text to speech (for them) , also try French Ubiquity command.

“Get Inspired” is a series of posts contains a rich collections and lists of great-designed websites and directories of web design inspirations. I hope you like it and really GET INSPIRED.

So,Let’s start… this is the episode no 1 of the series Get Inspired .

Make Better Websites is a rich blog contains until now more than 1,247 post . Below are examples of websites

and more…