xfiles sharing
11 likes846 views
This document discusses various CSS3 features including border radius, transitions, transforms, multiple outlines, click through objects using pointer-events, custom input design using the :checked pseudo-class, sequential styling using pseudo-classes like :last-child and :nth-child, and creating background patterns with linear gradients. It provides examples and code snippets for each feature and discusses browser support, noting that many features have been supported by modern browsers for several versions but Internet Explorer only began supporting many features in version 10.
xfiles sharing
- 1. CSS3 The Truth Is Out There...
- 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); }); }
- 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 !