xfiles sharing
DESCRIPTION
Credits: http://lea.verou.me/TRANSCRIPT
The Truth Is Out There...
C S S 3C S S 3
Bobby Chen
South AfricaAustralia
Taiwan
Shanghai
Name : 陳柏宇 (Bobby)
Job : 盛大創新院
Hobbies : Technology, Movie, Pub, Music etc... Website : caspercby.me
http://caspercby.me
前端开发?
UI 设计?
其他?
多少人用过 CSS 3 ?
The Truth Is Out There...
C S S 3C S S 3
-moz-
-ms--o-
-webkit-
CSS 3 Prefix
http://leaverou.github.com/prefixfree/
Border RadiusBox shadow
Transparency or RGBA
Columns
Multiple background Outlines
gradients
Rotation
AnimationText-shadow
Bouncing Transitions
Flexible Ellipse
Multiple OutlinesPass Through Pointer
Tab Size
Sibiling Count
Custum Checkbox & Radio Button
More Cursor
Background Pattern & Positio
n
CSS Border RadiusDifferent Ways...
CSS Border RadiusDifferent Ways...
CSS Border RadiusDifferent Ways...
CSS Border RadiusDifferent Ways...
Demo
Internet Explorer
Firefox
Opera
Webkit
Supported
Since IE10
Supported
Supported (in nightly)
Browser Support
ModernCSS Border Radius
Internet Explorer
Firefox
Opera
Webkit
Browser Support Modern
Version 10 +
Version 7 +
Version 11.5 +
Version 5.1 + (Safari)
Internet Explorer
Firefox
Opera
Webkit
Supported
Supported
Supported
Browser Support
ModernCSS Border Radius
Supported
CSS TransitionTransform
TransformCSS Transition
Demo
Internet Explorer
Firefox
Opera
Webkit
Supported
Supported
Supported
Browser Support
ModernCSS Border Radius
Supported
Transform
Bouncing TransitionsElement Positioning
Bouncing TransitionsElement Positioning
Bouncing TransitionsElement Positioning
Bouncing TransitionsElement Positioning
Bouncing TransitionsElement Positioning
Bouncing TransitionsElement Positioning
transition:2s;
Bouncing TransitionsElement Positioning
GFW
transition:4s;
自由
Bouncing TransitionsElement Positioning
GFW
transition:4s;
自由
transition: all 4s ease-in-out;transition-timing-function:cubic-bezier(0,1,1,0);
cubic-bezier
Bouncing TransitionsElement Positioning
http://cubic-bezier.com
Demo
Bouncing Transitions
Internet Explorer
Firefox
Opera
Webkit
Supported
Since IE10
Supported
Supported (in nightly)
cubic-bezier
Browser Support
Modern
Multiple OutlinesBox-Shadow Spread
LOOK HEREo(O.O)o
LOOK HEREo(O.O)o
Multiple OutlinesBox-Shadow Spread
box-shadow: 0 0 5px white;
LOOK HEREo(O.O)o
Multiple OutlinesBox-Shadow Spread
LOOK HEREo(O.O)o
Demo
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;
Internet Explorer
Firefox
Opera
Webkit
Supported
Supported
Multiple OutlinesMultiple Outline Effect
Supported
Supported
Browser Support
Modern
Click Through ObjectPointer-Events
Cyril
Click Through ObjectPointer-Events
Tag Cloud
http://demos.hacks.mozilla.org/openweb/pointer-events/
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/
Click Through ObjectPointer-EventsDemo
http://demos.hacks.mozilla.org/openweb/pointer-events/
pointer-events:none;
Internet Explorer
Firefox
Opera
Webkit
Click Through ObjectPointer-Events
Supported
Supported, Since 3.6
Not Supported
Not Supported
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
http://www.w3schools.com/cssref/css_selectors.asphttp://w3ctech.com/b/archives/617
Custom Input DesignFancy Checkbox / Radio
Custom Input DesignFancy Checkbox / Radio
css => :checked
Internet Explorer
Firefox
Opera
Webkit
Supported
Supported
Supported
Supported
Custom Input Designcss=> :checked
Browser Support
Modern
Sequential StylingSibling Count
Sequential StylingSibling Count
css => :last-child:last-child
Sequential StylingSibling Count
css => :nth-child:nth-child(2n+1)
Sequential StylingSibling Count
css => :nth-child:nth-child(3n+1)
Sequential StylingSibling Count
Sequential Styling
Internet Explorer
Firefox
Opera
Webkit
Supported
Supported
Supported
Supported
Browser Support
Moderncss => selectors
Background PatternsWith Pure CSS
Background PatternsWith Pure CSS
Linear-Gradient
http://leaverou.me/css3patterns/#
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
http://caspercby.meThank You!