Html5/CSS3 in shanghai 2010

HTML5 & CSS3
2010

Saturday, August 7, 2010

zibin
Web Evangelist

twitter:zibin


Why do open
standards matter?


13717712538


W3C HTML4

HTML XML
W3C has no intention to extend HTML4 as such. Instead, further work is focusing on a
reformulatoin of HTML in XML

1999


... XHTML2 HTML4
XHTML1.0 XHTML1.1. XHTML2

...while the ancestry of XHTML2 comes from HTML4, XHTML 1.0 and XHTML 1.1. It is not
intended to be backward compatible with its earlier versions

2002


350 4 5
W3C
2008
http://dev.opera.com/articles/view/mama-w3c-validator-research-2/


WHAT-WG


< />

HTML5 Text


Text

http://devﬁles.myopera.com/articles/572/idlist-url.htm


Text


< />

Video
source: http://zibin.tehais.com/?p=1641


< />

CANVAS
3D?


< />

SVG


< />

Web Forms Text


type="date"

Text


demo


< />

Appcache
http://dev.opera.com/articles/view/ofﬂine-applications-html5-appcache/


< />

Geolocation
Text not html5


< />

Widgets
not html5
Text


W3C Standards
Browser Independent
Runs on phone, TV, desktop


HTML5
Semantics
CSS3
Design


< />

CSS3


Borders Background


border-radius

border-radius: 25px;


border-radius

border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;


border-radius

border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;


border-radius


border-radius

source: http://zibin.tehais.com/?p=1410


multiple background images


multiple background images

background:
url(rose.png) no-repeat 150px -20px,
url(driedrose.png) no-repeat,! ! ! ! ! !
url(fieldsky.jpg) no-repeat;


box-shadow

box-shadow: 10px 10px 0px #fff;


box-shadow

box-shadow: 10px 10px 20px #fff;


box-shadow

width, height: 100px;
box-shadow:10px 10px 20px #ff0000;
border-radius:60px;


Transitions Transform


Transitions


div {
-o-transition-property: background-color,
width, height;
-o-transition-duration: 4s, 8s, 5s;
-o-transition-delay: 0s, 0s 2s;
}


Transform


Transform - translate
-o-transform: translate(50px, 100px);


Transform - scale
-o-transform: scale(2.5);


Transform - skew
-o-transform: skew(10deg, 20deg)


Transform - rotate
-o-transform: rotate(30deg)


@font-face {
src: url(DeutscheZierschrift.ttf) format("truetype");
font-family: "Zierschrift";
font-style: normal;
}


SVG

@font-face {
! font-family: Blackout-Midnight;
! src: url(Blackout-Midnight.ttf) format("truetype");
! }


text-shadow


text-shadow

text-shadow: #000000 10px 10px 19px;


text-shadow

text-shadow:
0 0 4px white, 0 -5px 4px #ff3,
2px -10px 6px #fd3, -2px -15px 11px #f80,
2px -25px 18px #f20;


Dragonfly

JavaScript
CSS
HTTP Header
DOM


Future is Now


< :-)/>


zibin AT opera.com
www.opera.com/developer ( )
zibin.tehais.com( )
twitter: zibin
slideshare.net/zibin PPT


love
http://www.flickr.com/photos/mar1lyn84/2722712047/sizes/o/
spider web
http://www.flickr.com/photos/luc_viatour/2843025968/sizes/l/in/set-72157614714349217/
now
http://www.gottabemobile.com/2010/01/18/ebook-readers-strike-back-at-publishers-trying-to-
maximize-profits
shadow
http://www.flickr.com/photos/jenny-pics/3115479281/sizes/m/
transitions transform
http://www.flickr.com/photos/28481088@N00/1298930743/
borders and background
http://www.flickr.com/photos/cheekyneedle/178950842/sizes/o/
web fonts
http://www.flickr.com/photos/sekimura/4363831481/sizes/o/
dinosaur
http://www.flickr.com/photos/valerianasolaris/3205069930/sizes/l/
clapping photo
http://splashclubpenguin.files.wordpress.com/2009/03/101606sly_claps.jpg
sun flower
http://www.flickr.com/photos/treyevan/429692359/sizes/l/
transition
http://www.flickr.com/photos/28481088@N00/1290363773/sizes/o/
using internet
http://farm4.static.flickr.com/3295/2676703205_30cc3322d9_b.jpg
me
http://www.douban.com/photos/album/30539339/
expo
http://www.flickr.com/photos/simonhua/4660243736/sizes/l/in/photostream/


Demo &
background and borders articles
http://dev.opera.com/articles/view/css3-border-background-boxshadow/
border-radius flower demo
http://people.opera.com/zibin/css3flower/flower.html
transiitons and transform article
http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/
web fonts article
http://dev.opera.com/articles/view/seven-web-fonts-showcases/
9elements HTML5 demo
http://9elements.com/io/projects/html5/canvas/
David’s photobook demo
http://people.opera.com/dstorey/transforms/image-gallery.html
Geolocation demo
http://people.opera.com/shwetankd/external/demos/demo_geo_googlemap.htm
newspaper
http://people.opera.com/zibin/newspaper/newspaper_test.html#image1


introduction to CSS2.1 and CSS3
http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3


Html5/CSS3 in shanghai 2010

More Related Content

What's hot (7)

Viewers also liked (8)

Similar to Html5/CSS3 in shanghai 2010 (20)

More from Zi Bin Cheah (6)

Recently uploaded (20)

Html5/CSS3 in shanghai 2010