16. CSS Animation
@-webkit-keyframes movingbox{
0%{left:90%;}
50%{left:10%;}
100%{left:90%;}
}
.box2{
-webkit-animation:movingbox 5s in nite;
}
As of November 2011, this works in all Webkit browsers, Firefox 5+ and IE10
@PaulTrani
17. CSS Transforms
#socialposters li img {
-moz-box-shadow:0 3px 10px #888;
-webkit-box-shadow:0 3px 10px #888;
-webkit-transform: rotateY(30deg);
-webkit-transition-property: transform;
-webkit-transition-duration: 0.5s;
}
2D
transforms
are
available
in
all
current
browsers
including
IE9.
3D
transforms
are
in
Safari,
Chrome
and
Firefox.
@PaulTrani
18. CSS Transitions
#id_of_element {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
Available
in
all
browsers
except
Internet
Explorer
older
than
version
10.
@PaulTrani
27. WebGL
• WebGL (Web-based Graphics Library) extends the capability
of the JavaScript to allow it to generate interactive 3D
graphics within any compatible web browser.
@PaulTrani
28. WebGL
camera = new THREE.Camera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 1000;
scene = new THREE.Scene();
var materials = [];
for ( var i = 0; i < 6; i ++ ) {
materials.push( new THREE.MeshBasicMaterial( { color: 0xff * Math.random() << 8 } ) );
}
var material = new THREE.MeshBasicMaterial( { color: 0xff0000} );
var geom = new THREE.Cube( 200, 200, 200, 1, 1, 1, materials);
primitive = new THREE.Mesh(geom, material);
scene.addObject( primitive );
@PaulTrani
34. Adobe fonts via TypeKit
WebKit in CS5 apps
HTML5 support in the Open Source Media Framework
EDGE Contributing to WebKit
HTML5 slideshows on Photoshop.com
HTML5 content in digital publications
Contributing to JQuery Mobile
support for Firebug, Safari 5, and more to BrowserLab
WALLABY
HTML5-tagged (non-Flash) video in Dreamweaver
MUSE
HTML5 video publishing to the Scene7 hosted service
@PaulTrani
35. Thank You
• Slides
posted
at
www.paultrani.com
• Flexible
Web
Design
www.flexiblewebbook.com
• Stunning
CSS3
www.stunningcss3.com
• www.w3.org/Style/CSS/current-‐work
• www.caniuse.com
@PaulTrani