CSS3 loading animation experiment. While playing DIRT 3, I've noticed a very cool triangle animation as part of their UI. Almost immediately, I thought about how to build a similar version of it using CSS3. So, in this article you'll see an experiment about how to create a simple CSS3 loading animation. View demo For this example, I'll be using two CSS3 animations: one that fades the color for the triangles and one animation that rotates the whole design.
These two animations, synchronized, will help creating a quite nice effect. The HTML Initially, I wanted to use pseudo-elements in order to have less markup elements. Here's how the markup looks like: The CSS There are some things you may find interesting here: For a nice color fade across all three triangles, you need to increment the animation-delay.Notice the gap between 20% and 100% for the rotation keyframes.
Conclusion This is an experiment and you must be aware of it. Also, this isn't that example that advocates for using CSS3 stuff instead images to save HTTP requests. Liquid Particles - spielzeugz.de canvas experiment. Wave - an experiment with wave motion and tweets in HTML5. HTML5 examples and Demos collection 1. Here's a collection of HTML5 examples and demonstrations. It's constantly being added to and if you have one that you'd like to see here. HTML5 canvas The canvas tag is a Javacript controlled 2D drawing area.
There's more information on it here. Graphs, charts and data visualisation WebGL Working browsers are in parentheses The Futurama warehouse (Chrome 9, Firefox 4 (beta 12)) Applications Games Clocks Other HTML5 Video This will be rather useful. Possible attributes include: Note about codecs A group of "biggies" recently announced WebM - a free video codec for web video. Note about WebKit transformations If you want to see something interesting done with WebKit transformations, have a look a this.
HTML5 Audio Also potentially very useful is the new <audio> tag. HTML5 GeoLocation One of the features of HTML5 is location tracking called GeoLocation. HTML5 DOM storage As used by the RGraph annotations feature to facilitate persistence, HTML5 DOM storage is an alternative to cookies for local storage. CAAT. Canvas Advanced Animation Toolkit. Find tutorials and demos on CAAT Here Fork and contribute to CAAT here CAAT in essence is a multi-instance director-based Scene graph manager.
It is multi-instance in the sense that you can set an undefined number of directors up for each web page. Each director is able to manage different Scenes with different timelines. The scenes contain a graph of different Actor and Containers which conform the animation elements. CAAT has some features out-of-the-box among which we can highlight: Following is a technical demo which shows some of the previosly mentioned features. Stroll.js - CSS3 Scroll Effects. Forkit.js - A different kind of GitHub ribbon. Fokus - Emphasized text-highlighting using JavaScript. It's that time of the year again!
In late 2010, having spent five great years working at Fi, I was determined to change up my professional life. After interviewing with Qwiki and accepting the position of Lead Interactive Developer it was decided; I was moving to San Francisco! It took a good few months of hard work to sort out all of the practicalities but it was definitely worth it now that I'm here. Fortunately I've still been able to keep this site updated and worked on a variety of projects and experiments throughout the year. The first project to see the light of day was Sketch, a drawing tool that mimics the style of old cartoons. Sketch was followed by a short freelance project which involved building an interactive and animated logo for a Canadian media production company called Meru. Next I stumbled into the land of CSS3 3D transforms and ended up trying them out on two projects; Holobox and CSS3 3D Slideshow (later renamed reveal.js). Dock and Stack Examples. Text along a path (info) in Blixt's JavaScript realm.
CSS Regions - text overflow to Other Elements. W3C Working Draft 18 February 2014 This version: Latest version: Previous version: Editors: Rossen Atanassov, Microsoft Corporation, ratan@microsoft.com Alan Stearns, Adobe Systems, Inc., stearns@adobe.com Authors and former editors: Vincent Hardy, Adobe Systems, Inc., vhardy@adobe.com Alex Mogilevsky, Microsoft Corporation, alexmog@microsoft.com Issues List: Bugzilla Bugs for CSS regions Feedback: www-style@w3.org with subject line “[css-regions] ” (archives) Test Suite: Copyright © 2014 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved.
Abstract The CSS Regions module allows content from one or more elements to flow through one or more boxes called CSS Regions, fragmented as defined in [CSS3-BREAK]. Status of this document This section describes the status of this document at the time of its publication. Publication as a Working Draft does not imply endorsement by the W3C Membership. This document was produced by the CSS Working Group (part of the Style Activity).