cutting edge css3 @ webexpo tour 2010
DESCRIPTION
CSS3TRANSCRIPT
<Bleeding Edge/>
HTML5 & CSS3WebExpo Tour, Bratislava Budapest Vienna 2010
Tuesday, June 15, 2010
<NAME/>
Zi Bin Cheah<WORK/>
Web Evangelisttwitter:zibin
Tuesday, June 15, 2010
<Bleeding Edge/>
CSS3
Tuesday, June 15, 2010
raise your hand....Question
Tuesday, June 15, 2010
raise your hand....Question
if you are a designer
Tuesday, June 15, 2010
raise your hand....Question
if you are a designer
if you are a front end developer
Tuesday, June 15, 2010
raise your hand....Question
if you are a designer
if you are a front end developer
if you are a backend developer/programmer
Tuesday, June 15, 2010
raise your hand....Question
if you are a designer
if you are a front end developer
if you are new to CSS / CSS3
if you are a backend developer/programmer
Tuesday, June 15, 2010
if you are a designer
if you are a front end developer
if you are new to CSS / CSS3
if you hate raising your hand
if you are a backend developer/programmer
raise your hand....Question
Tuesday, June 15, 2010
CSS3HTML5Semantics Design
Tuesday, June 15, 2010
Once upon a time....
CSS3CSS1 CSS2 CSS3 CSS2.1
Tuesday, June 15, 2010
Today we will look at a few
CSS3Borders and background allows styling of boxes and div, and also have multiple backgroundTransitions and transform an element by rotating, “on-the-fly” movement and such
Web fonts allows styling of fontsText shadow creates shadows
Tuesday, June 15, 2010
Today we will look at a few
CSS3Borders and background allows styling of boxes and div, and also have multiple backgroundTransitions and transform an element by rotating, “on-the-fly” movement and such
Web fonts allows styling of fontsText shadow creates shadows
Tuesday, June 15, 2010
BordersBackground
Tuesday, June 15, 2010
border-radius aka rounded-corners
border-radius: 25px;
Tuesday, June 15, 2010
border-radius aka rounded-corners
border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;
Tuesday, June 15, 2010
border-radius aka rounded-corners
border-bottom-left-radius: 40px;border-bottom-right-radius: 40px;
border-top-left-radius: 10px;border-top-right-radius: 10px;
Tuesday, June 15, 2010
border-radius aka rounded-corners
Tuesday, June 15, 2010
border-radius aka rounded-corners
Tuesday, June 15, 2010
multiple background
Tuesday, June 15, 2010
multiple background
background: url(rose.png) no-repeat 150px -20px, url(driedrose.png) no-repeat,! ! ! ! ! ! url(fieldsky.jpg) no-repeat;
Tuesday, June 15, 2010
box-shadow
box-shadow: 10px 10px 0px #fff;
Tuesday, June 15, 2010
box-shadow
box-shadow: 10px 10px 20px #fff;
Tuesday, June 15, 2010
box-shadow
! ! ! ! ! width, height: 100px;! ! ! ! ! box-shadow:10px 10px 20px #ff0000;! ! ! ! ! border-radius:60px;! ! ! !
Tuesday, June 15, 2010
Today we will look at a few
CSS3Borders and background allows styling of boxes and div, and also have multiple backgroundTransitions and transform an element by rotating, “on-the-fly” movement and such
Web fonts allows styling of fontsText shadow creates shadows
Tuesday, June 15, 2010
TransitionsTransform
Tuesday, June 15, 2010
Transitions
Tuesday, June 15, 2010
div { -o-transition-property: background-color, width, height; -o-transition-duration: 4s, 8s, 5s; -o-transition-delay: 0s, 0s 2s;}
Tuesday, June 15, 2010
Transitions
Tuesday, June 15, 2010
Transform
Tuesday, June 15, 2010
Transform - translate-o-transform: translate(50px, 100px);
Tuesday, June 15, 2010
Transform - scale-o-transform: scale(2.5);
Tuesday, June 15, 2010
Transform - skew-o-transform: skew(10deg, 20deg)
Tuesday, June 15, 2010
Transform - rotate-o-transform: rotate(30deg)
Tuesday, June 15, 2010
Today we will look at a few
CSS3Borders and background allows styling of boxes and div, and also have multiple backgroundTransitions and transform an element by rotating, “on-the-fly” movement and such
Web fonts allows styling of fontsText shadow creates shadows
Tuesday, June 15, 2010
Web FontsTuesday, June 15, 2010
@font-face { src: url(DeutscheZierschrift.ttf) format("truetype"); font-family: "Zierschrift"; font-style: normal; }
Tuesday, June 15, 2010
Tuesday, June 15, 2010
@font-face { ! font-family: Blackout-Midnight; ! src: url(Blackout-Midnight.ttf) format("truetype"); ! }
SVG web fonts
Tuesday, June 15, 2010
Today we will look at a few
CSS3Borders and background allows styling of boxes and div, and also have multiple backgroundTransitions and transform an element by rotating, “on-the-fly” movement and such
Web fonts allows styling of fontsText shadow creates shadows
Tuesday, June 15, 2010
text shadow
Tuesday, June 15, 2010
text-shadow
text-shadow: #000000 10px 10px 19px;
Tuesday, June 15, 2010
text-shadow
text-shadow: 0 0 4px white, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
Tuesday, June 15, 2010
CSS3 + HTML5 Exam
ple
Tuesday, June 15, 2010
When Can I use?
Tuesday, June 15, 2010
Tuesday, June 15, 2010
Tuesday, June 15, 2010
Tuesday, June 15, 2010
Progressive Enhancement
Graceful Degradation
Tuesday, June 15, 2010
Vendor Prefix
-moz-border-radius
-webkit-border-radius
-o-border-radius
-ms-border-radius
border-radius
CSS3
Tuesday, June 15, 2010
Debugger JavaScriptCSSHTTP HeaderDOM
Dragonfly
Tuesday, June 15, 2010
Futureis
Now
Tuesday, June 15, 2010
<Thank you:-)/>
Tuesday, June 15, 2010
zibin AT opera.comtwitter: zibin
shwetankd AT opera.comtwitter: shwetank
Q&A
Tuesday, June 15, 2010
Creative Commons license imageclaphttp://www.flickr.com/photos/tudor/953584594/spider webhttp://www.flickr.com/photos/luc_viatour/2843025968/sizes/l/in/set-72157614714349217/nowhttp://www.gottabemobile.com/2010/01/18/ebook-readers-strike-back-at-publishers-trying-to-maximize-profitsshadowhttp://www.flickr.com/photos/jenny-pics/3115479281/sizes/m/transitions transformhttp://www.flickr.com/photos/28481088@N00/1298930743/borders and backgroundhttp://www.flickr.com/photos/cheekyneedle/178950842/sizes/o/web fontshttp://www.flickr.com/photos/sekimura/4363831481/sizes/o/clapping photohttp://splashclubpenguin.files.wordpress.com/2009/03/101606sly_claps.jpgsun flowerhttp://www.flickr.com/photos/treyevan/429692359/sizes/l/transitionhttp://www.flickr.com/photos/28481088@N00/1290363773/sizes/o/
Tuesday, June 15, 2010
Demo & artlclebackground and borders articleshttp://dev.opera.com/articles/view/css3-border-background-boxshadow/border-radius flower demohttp://people.opera.com/zibin/css3flower/flower.htmltransiitons and transform articlehttp://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/web fonts articlehttp://dev.opera.com/articles/view/seven-web-fonts-showcases/9elements HTML5 demohttp://9elements.com/io/projects/html5/canvas/David’s photobook demohttp://people.opera.com/dstorey/transforms/image-gallery.html
Presentation referenceintroduction to CSS2.1 and CSS3http://www.slideshare.net/marcamos/introduction-to-css-21-and-css-3
Tuesday, June 15, 2010