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

1. CSS3
The Truth Is Out There...

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

5. Bobby Chen
Shanghai
Taiwan
South Africa
Australia

7. Name : (Bobby)
Job :
Hobbies : Technology, Movie, Pub, Music etc...
Website : caspercby.me

8. htt
p:/
/ca
sp
erc
.
by
me

9. 发

10. UI 设计

12. 过 CSS 3 ?

13. CSS3
The Truth Is Out There...

14. CSS 3 Prefix
-o- -ms-
-webkit- -moz-
http://leaverou.github.com/prefixfree/

15. Transparency or RGBA Rotation
Multiple background Outlines
Border Radius
Text-shadow Box shadow
Animation
Columns gradients

16. ter
in se
o p
P li
gh El ions
ou ble sit
r i
h x
T le
ass F T Ban tton
r u
P es g o
in di
e lin unc a
iz ut tion
S O
ab le or B x o & R Posi
T ip s ckbo ern & nt
lt Cur e
u e
M r h
C d Pa ng tt Cou
o um
M st n ibili
u kg r
C c ou S
Ba

17. CSS Border Radius
Different Ways...

18. CSS Border Radius
Different Ways...

19. CSS Border Radius
Different Ways...

20. CSS Border Radius
Different Ways...
Demo

21. Bro M
ws od
CSS Border Radius er S ern
up
por
t
Since IE10
Internet Explorer
Supported
Firefox
Supported
Opera
Supported (in nightly)
Webkit

22. Modern
Browser Support
Version 10 +
Internet Explorer
Version 7 +
Firefox
Version 11.5 +
Opera
Version 5.1 + (Safari)
Webkit

23. Bro M
ws od
CSS Border Radius er S ern
up
por
t
Supported
Internet Explorer
Supported
Firefox
Supported
Opera
Supported
Webkit

24. CSS Transition
Transform

25. CSS Transition
Transform
Demo

26. Bro M
ws od
CSS Border Radius er S ern
up
por
Transform t
Supported
Internet Explorer
Supported
Firefox
Supported
Opera
Supported
Webkit

27. Bouncing Transitions
Element Positioning

28. Bouncing Transitions
Element Positioning

29. Bouncing Transitions
Element Positioning

30. Bouncing Transitions
Element Positioning

31. Bouncing Transitions
Element Positioning

32. Bouncing Transitions
Element Positioning

33. transition:2s;

34. Bouncing Transitions
Element Positioning
GFW
transition:4s;

35. Bouncing Transitions
Element Positioning
cubic-bezier
GFW
transition:4s; 4s ease-in-out;
transition-timing-function:cubic-bezier(0,1,1,0);
transition: all

36. Bouncing Transitions
Element Positioning
Demo
http://cubic-bezier.com

37. Bro M
ws od
Bouncing Transitions er S ern
up
cubic-bezier por
t
Since IE10
Internet Explorer
Supported
Firefox
Supported
Opera
Supported (in nightly)
Webkit

38. Multiple Outlines
Box-Shadow Spread

39. Multiple Outlines
Box-Shadow Spread
box-shadow: 0 0 5px white;
LOOK HERE
o(O.O)o

40. Multiple Outlines
Box-Shadow Spread
Demo
LOOK HERE
o(O.O)o

41. Multiple Outlines
Box-Shadow Spread
box-shadow: 0 0 0 5px black,
0 0 0 10px gold,
0 0 0 20px black,
0 0 0 35px white;
LOOK HERE
o(O.O)o

42. Bro M
ws od
Multiple Outlines er S ern
up
Multiple Outline Effect por
t
Supported
Internet Explorer
Supported
Firefox
Supported
Opera
Supported
Webkit

43. Click Through Object
Pointer-Events

44. Cyril

45. Click Through Object
Pointer-Events
Tag Cloud
http://demos.hacks.mozilla.org/openweb/pointer-events/

46. Click Through Object
Pointer-Events
Tag Cloud
background: -moz-linear-gradient(right center , #002233
pointer-events:none;0 transparent;
40px, rgba(0, 34, 51, 0)) repeat scroll 0
http://demos.hacks.mozilla.org/openweb/pointer-events/

47. Click Through Object
Pointer-Events
Demo
pointer-events:none;
http://demos.hacks.mozilla.org/openweb/pointer-events/

48. Click Through Object
Pointer-Events
Not Supported
Internet Explorer
Supported, Since 3.6
Firefox
Not Supported
Opera
Supported
Webkit

49. Click Through Object
Pointer-Events
Javascript Workaround
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);
});
}

50. http://www.w3schools.com/cssref/css_selectors.asp
http://w3ctech.com/b/archives/617

52. Custom Input Design
Fancy Checkbox / Radio

53. Custom Input Design
Fancy Checkbox / Radio
css => :checked

54. Bro M
ws od
Custom Input Design er S ern
up
css=> :checked por
t
Supported
Internet Explorer
Supported
Firefox
Supported
Opera
Supported
Webkit

55. Sequential Styling
Sibling Count

56. Sequential Styling
Sibling Count
css => :last-child
:last-child

57. Sequential Styling
Sibling Count
css => :nth-child
:nth-child(2n+1)

58. Sequential Styling
Sibling Count
css => :nth-child
:nth-child(3n+1)

59. Sequential Styling
Sibling Count

60. Bro M
ws od
Sequential Styling er S ern
up
css => selectors por
t
Supported
Internet Explorer
Supported
Firefox
Supported
Opera
Supported
Webkit

61. Background Patterns
With Pure CSS

62. Background Patterns
With Pure CSS
Linear-Gradient
http://leaverou.me/css3patterns/#

63. Bro M
ws od
Background Patterns er S ern
up
Linear-Gradient por
t
Supported since IE10
Internet Explorer
Supported
Firefox
Supported (Radial gradients in v12)
Opera
Supported (Safari since 5.1)
Webkit

64. htt
p:/
/ca
sp
erc
.
by
me
Th
ank
You
!