xfiles sharing
DESCRIPTION
Credits: http://lea.verou.me/TRANSCRIPT
![Page 1: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/1.jpg)
The Truth Is Out There...
C S S 3C S S 3
![Page 3: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/3.jpg)
![Page 4: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/4.jpg)
![Page 5: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/5.jpg)
Bobby Chen
South AfricaAustralia
Taiwan
Shanghai
![Page 6: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/6.jpg)
![Page 7: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/7.jpg)
Name : 陳柏宇 (Bobby)
Job : 盛大創新院
Hobbies : Technology, Movie, Pub, Music etc... Website : caspercby.me
![Page 8: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/8.jpg)
http://caspercby.me
![Page 9: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/9.jpg)
前端开发?
![Page 10: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/10.jpg)
UI 设计?
![Page 11: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/11.jpg)
其他?
![Page 12: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/12.jpg)
多少人用过 CSS 3 ?
![Page 13: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/13.jpg)
The Truth Is Out There...
C S S 3C S S 3
![Page 14: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/14.jpg)
-moz-
-ms--o-
-webkit-
CSS 3 Prefix
http://leaverou.github.com/prefixfree/
![Page 15: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/15.jpg)
Border RadiusBox shadow
Transparency or RGBA
Columns
Multiple background Outlines
gradients
Rotation
AnimationText-shadow
![Page 16: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/16.jpg)
Bouncing Transitions
Flexible Ellipse
Multiple OutlinesPass Through Pointer
Tab Size
Sibiling Count
Custum Checkbox & Radio Button
More Cursor
Background Pattern & Positio
n
![Page 17: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/17.jpg)
CSS Border RadiusDifferent Ways...
![Page 18: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/18.jpg)
CSS Border RadiusDifferent Ways...
![Page 19: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/19.jpg)
CSS Border RadiusDifferent Ways...
![Page 20: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/20.jpg)
CSS Border RadiusDifferent Ways...
Demo
![Page 21: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/21.jpg)
Internet Explorer
Firefox
Opera
Webkit
Supported
Since IE10
Supported
Supported (in nightly)
Browser Support
ModernCSS Border Radius
![Page 22: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/22.jpg)
Internet Explorer
Firefox
Opera
Webkit
Browser Support Modern
Version 10 +
Version 7 +
Version 11.5 +
Version 5.1 + (Safari)
![Page 23: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/23.jpg)
Internet Explorer
Firefox
Opera
Webkit
Supported
Supported
Supported
Browser Support
ModernCSS Border Radius
Supported
![Page 24: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/24.jpg)
CSS TransitionTransform
![Page 25: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/25.jpg)
TransformCSS Transition
Demo
![Page 26: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/26.jpg)
Internet Explorer
Firefox
Opera
Webkit
Supported
Supported
Supported
Browser Support
ModernCSS Border Radius
Supported
Transform
![Page 27: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/27.jpg)
Bouncing TransitionsElement Positioning
![Page 28: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/28.jpg)
Bouncing TransitionsElement Positioning
![Page 29: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/29.jpg)
Bouncing TransitionsElement Positioning
![Page 30: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/30.jpg)
Bouncing TransitionsElement Positioning
![Page 31: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/31.jpg)
Bouncing TransitionsElement Positioning
![Page 32: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/32.jpg)
Bouncing TransitionsElement Positioning
![Page 33: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/33.jpg)
transition:2s;
![Page 34: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/34.jpg)
Bouncing TransitionsElement Positioning
GFW
transition:4s;
自由
![Page 35: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/35.jpg)
Bouncing TransitionsElement Positioning
GFW
transition:4s;
自由
transition: all 4s ease-in-out;transition-timing-function:cubic-bezier(0,1,1,0);
cubic-bezier
![Page 36: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/36.jpg)
Bouncing TransitionsElement Positioning
http://cubic-bezier.com
Demo
![Page 37: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/37.jpg)
Bouncing Transitions
Internet Explorer
Firefox
Opera
Webkit
Supported
Since IE10
Supported
Supported (in nightly)
cubic-bezier
Browser Support
Modern
![Page 38: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/38.jpg)
Multiple OutlinesBox-Shadow Spread
![Page 39: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/39.jpg)
LOOK HEREo(O.O)o
LOOK HEREo(O.O)o
Multiple OutlinesBox-Shadow Spread
box-shadow: 0 0 5px white;
![Page 40: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/40.jpg)
LOOK HEREo(O.O)o
Multiple OutlinesBox-Shadow Spread
LOOK HEREo(O.O)o
Demo
![Page 41: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/41.jpg)
LOOK HEREo(O.O)o
Multiple OutlinesBox-Shadow Spread
LOOK HEREo(O.O)o
box-shadow: 0 0 0 5px black, 0 0 0 10px gold, 0 0 0 20px black, 0 0 0 35px white;
![Page 42: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/42.jpg)
Internet Explorer
Firefox
Opera
Webkit
Supported
Supported
Multiple OutlinesMultiple Outline Effect
Supported
Supported
Browser Support
Modern
![Page 43: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/43.jpg)
Click Through ObjectPointer-Events
![Page 44: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/44.jpg)
Cyril
![Page 45: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/45.jpg)
Click Through ObjectPointer-Events
Tag Cloud
http://demos.hacks.mozilla.org/openweb/pointer-events/
![Page 46: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/46.jpg)
background: -moz-linear-gradient(right center , #002233 40px, rgba(0, 34, 51, 0)) repeat scroll 0 0 transparent;
Click Through ObjectPointer-Events
Tag Cloud
pointer-events:none;
http://demos.hacks.mozilla.org/openweb/pointer-events/
![Page 47: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/47.jpg)
Click Through ObjectPointer-EventsDemo
http://demos.hacks.mozilla.org/openweb/pointer-events/
pointer-events:none;
![Page 48: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/48.jpg)
Internet Explorer
Firefox
Opera
Webkit
Click Through ObjectPointer-Events
Supported
Supported, Since 3.6
Not Supported
Not Supported
![Page 49: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/49.jpg)
Click Through ObjectPointer-Events
function noPointerEvents (element) { $(element).bind('click mouseover', function (evt) { this.style.display = 'none'; var x = evt.pageX, y = evt.pageY, under = document.elementFromPoint(x, y); this.style.display = ''; evt.stopPropagation(); evt.preventDefault(); $(under).trigger(evt.type); });}
Pointer-EventsJavascript Workaround
![Page 50: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/50.jpg)
http://www.w3schools.com/cssref/css_selectors.asphttp://w3ctech.com/b/archives/617
![Page 51: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/51.jpg)
![Page 52: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/52.jpg)
Custom Input DesignFancy Checkbox / Radio
![Page 53: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/53.jpg)
Custom Input DesignFancy Checkbox / Radio
css => :checked
![Page 54: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/54.jpg)
Internet Explorer
Firefox
Opera
Webkit
Supported
Supported
Supported
Supported
Custom Input Designcss=> :checked
Browser Support
Modern
![Page 55: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/55.jpg)
Sequential StylingSibling Count
![Page 56: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/56.jpg)
Sequential StylingSibling Count
css => :last-child:last-child
![Page 57: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/57.jpg)
Sequential StylingSibling Count
css => :nth-child:nth-child(2n+1)
![Page 58: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/58.jpg)
Sequential StylingSibling Count
css => :nth-child:nth-child(3n+1)
![Page 59: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/59.jpg)
Sequential StylingSibling Count
![Page 60: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/60.jpg)
Sequential Styling
Internet Explorer
Firefox
Opera
Webkit
Supported
Supported
Supported
Supported
Browser Support
Moderncss => selectors
![Page 61: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/61.jpg)
Background PatternsWith Pure CSS
![Page 62: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/62.jpg)
Background PatternsWith Pure CSS
Linear-Gradient
http://leaverou.me/css3patterns/#
![Page 63: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/63.jpg)
Background PatternsLinear-Gradient
Internet Explorer
Firefox
Opera
Webkit
Supported
Supported (Radial gradients in v12)
Supported since IE10
Supported (Safari since 5.1)
Browser Support
Modern
![Page 64: xfiles sharing](https://reader038.vdocuments.mx/reader038/viewer/2022102813/547b2e53b4af9f0f428b4632/html5/thumbnails/64.jpg)
http://caspercby.meThank You!