The Truth Is Out There...

C S S 3C S S 3

Credits ( http://lea.verou.me/ )

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!