Braaains!
I’m letting out my inner zombie, and I think you should, too! This brilliant little demo by Steve Wittens uses a pair of large sprite sheets (one for colour, one for opacity) which contain the cross sections of a human head taken by an MRI scanner. Each slice is drawn into its own canvas using the colour and opacity information from the sprite sheets. CSS 3D is used to position all the slices and line them up next to each other in 3D space, effectively reconstituting the head. JavaScript is then used to update the location and rotation of the slices, as well as switch them on and off. CSS 3D is something of an unsung hero, I feel. When combined with JavaScript it can be an extremely simple yet powerful renderer. So take a look at the demo, it’s a fascinating (if slightly gross) indicator of what you can get up to with a little CSS 3D and some JavaScript! All together now: “Brrrraaaaaains!” This is Your Brain on CSS by Steve Wittens
Mif.Menu Demos
Nice animated menu using CSS and Mootools
This tutorial illustrates how to implement a nice animated menu using Mootoolsand some lines of CSS and HTML code ready to reuse in your project. This is the basic version with a basic design, but you can customize it how you prefer modifying the CSS related source code. Download this tutorial Live PreviewStep 1: HTML Code HTML code is very simple. You have a layer with ID mymenu which is your menu container, section header (H3 tag) and section content (ul list) which contains some sub-links for each section: ... so, HTML code is something like this: <div id="mymenu"><h3 class="toggler menusection">Menu Section 1</h3> <div class="element menusection"> <ul> <li><a href="1">Link 1</a></li><li><a href="2">Link 2</a></li><li><a href="3">Link 3</a></li><li><a href="4">Link 4</a></li> <h3 class="toggler menusection">Menu Section 2</h3> <div class="element menusection"> <ul> <li><a href="1">Link 1</a></li><li><a href="2">Link 2</a></li> ...and add this code in the <head> tag of the page: It's all!
Jcrop - Deep Liquid
Jcrop Home • Download • Manual • Examples Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications. Feature Overview Attaches unobtrusively to images or block objects Supports aspect ratio locking Supports minSize/maxSize setting Callbacks for selection done, or while moving Keyboard support for nudging selection API features to create interactivity, including animation Support for CSS styling, now uses LESS Touch support for iOS, Android, etc Cross-platform Compatibility Firefox 2+ Safari 3+ Opera 9.5+ Google Chrome 0.2+ Internet Explorer 6+ May work in older versions or other modern browsers, these were tested. Documentation Archive Jcrop is free software released under MIT License.
Trigger Rally – online edition
Trigger Rally is a fast-paced open source racing game for Linux, maintained by a small but dedicated team of developers. The game itself adheres to the same open principals as the operating system it was originally built for, using creatively licensed art, audio and 3D assets. And it’s now available to play online through this WebGL port by jareiko. WebGL and Three.JS power the graphics. The car engine noises are generated using the Web Audio API. Driving physics routines have been converted to JavaScript from the original C code but the author has stated a desire to port it over to the bullet / ammo.js physics engine.
Coda Popup Bubbles
In particular, Jorge Mesa writes to ask how to re-create their ‘puff’ popup bubble shown when you mouse over the download image. In essence the effect is just a simple combination of effect, but there’s a few nuances to be wary of. How to Solve the Problem To create the puff popup bubble effect, we need the following: Markup that assumes that JavaScript is disabled. The biggest trick to be wary of is: when you move the mouse over the popup, this triggers a mouseout on the image used to trigger the popup being shown. I’ve provided a screencast to walk through how create this functionality. Watch the coda bubble screencast (alternative flash version) (QuickTime version is approx. 23Mb, flash version is streaming) View the demo and source code used in the screencast HTML Markup For the purpose of reusability, I’ve wrapped my ‘target’ and ‘popup’ in a div. There’s very little to the minimum required CSS. The minimum I recommend for the example is: jQuery Mouse Over Mouse Out The ‘Trick’
Accessible expanding and collapsing menu
Everybody makes mistakes, so occasionally things go wrong. One example is when Swedish design magazine Cap&Design recently published a tutorial on creating a collapsing and expanding menu. While reading the article my jaw dropped as I realised that the tutorial uses invalid, non-semantic HTML, inline CSS and event handlers, bloated (but, amazingly, valid) CSS, and obtrusive JavaScript. In 2007. I sent an email to the magazine’s editor, who agreed that the article shouldn’t have been printed and took the example code offline. Instead of just complaining about the lousy code and deriving satisfaction from making them take the code offline, I decided to recreate the menu from the tutorial in a more modern way, using leaner and more efficient HTML and CSS, and unobtrusive JavaScript. The HTML The HTML that appeared in the article is this (shortened, and with id values translated from Swedish): This markup is problematic for several reasons: I replaced the HTML with this: The CSS The JavaScript
jQuery plugin: Tablesorter 2.0
Author: Christian Bach Version: 2.0.5 (changelog) Licence: Dual licensed (just pick!)under MIT or GPL licenses. Please with sugar on top! Update! Helping out! Comments and love letters can be sent to: christian@tablesorter.comchristian at tablesorter dot com. tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. Multi-column sorting Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. TIP! To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside the <head> tag of your HTML document: tablesorter works on standard HTML tables. Start by telling tablesorter to sort your table when the document is loaded: $(document).ready(function() { $("#myTable").tablesorter(); } ); NOTE! jQuery Browser Compatibility
