ZURB Playground : A showcase of creative experiments and new ideas.

Posted December 16th, 2009 in demos by Nabil

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.

Text to Speech via HTML5 Audio

Posted December 16th, 2009 in HTML5 by Nabil

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.