Here’s an example code snippet showing how you can use CSS Transitions to change the background color of a DIV over time as well as changing the width and height of an HTML5 Video at the same time:
Interactive CSS 3 Generator from Ajaxian by Brad Neuberg 9 people liked this Many browsers have been experimenting with new custom CSS properties lately. Keeping track (and learning how to use them) can be a bit of a challenge. Via WidgetPad comes a nifty CSS 3 Generator that helps you understand the new CSS 3 features in Webkit with an interactive tool that will build up and show how each new property affects an element. Here, for example, we see the results of applying rounded corners, box shadows, reflections, and a transform to an element: css3_generator_screenshot Which results in the following code: PLAIN TEXT CSS: 1. -webkit-border-radius: 10px; 2. -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5); 3. -webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); 4. -webkit-transform: rotateZ(15deg); The CSS 3 Generator works on any webkit based browser, including Safari, the iPhone, and Chrome. Here’s a challenge to the community: can you create an enhanced version of this that works with all the new CSS 3 and vendor-specific properties, including on IE and Firefox, hiding the options that don’t work on specific browsers? That would turn this into a more general purpose educational and testing tool that would be very valuable. Even better if you open source it and we can host it on the Open Web Developer Network we’ve been kicking around. Drop me a line if you create such a thing As a side note, I had never seen the WidgetPad website where this is hosted before this which looks quite interesting. From the site: [WidgetPad is a] collaborative development environment for developers to develop fully-interactive, stand-alone, downloadable SmartPhone applications in HTML5, CSS3 and Javascript. You don’t need to install any special development tools or learn any platform-specific API sets. WidgetPad offers everything you need — project management, source code editing, debugging, collaboration, versioning and even distribution — in your own browser!
To be honest, I instantly had a thought about this technique: wasn’t the DOMContentLoaded event purpose the one to avoid people waiting a full page download before they’re allowed to interact with it? … never mind, we cannot do much in any case in front of images dedicated layouts.
A mozilla labs criou um directório, onde podem ser encontradas de uma forma simples e rápida várias “ferramentas” para programadores, tentaram reunir numa só página algumas das ferramentas conhecidas dos programadores.
jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).
Examples
The following examples illustrate the possibilities of jCarousel:
ajax/javascript | Filipe Teixeira Nunes | 
14/10/2009 17:21 | 
Comments (0) 
As a side note, I had never seen the WidgetPad website where this is hosted before this which looks quite interesting. From the site: [WidgetPad is a] collaborative development environment for developers to develop fully-interactive, stand-alone, downloadable SmartPhone applications in HTML5, CSS3 and Javascript. You don’t need to install any special development tools or learn any platform-specific API sets. WidgetPad offers everything you need — project management, source code editing, debugging, collaboration, versioning and even distribution — in your own browser!
Subscribe