SlideShare uma empresa Scribd logo
1 de 64
Baixar para ler offline
CSS3



   The Truth Is Out There...
Credits ( http://lea.verou.me/ )
Bobby Chen




                   Shanghai

                                          Taiwan




    South Africa
                              Australia
Name      :        (Bobby)
Job       :
Hobbies   : Technology, Movie, Pub, Music etc...
Website   : caspercby.me
htt
   p:/
      /ca
         sp
           erc
               .
              by
                 me
发
UI 设计
过 CSS 3 ?
CSS3



   The Truth Is Out There...
CSS 3 Prefix

  -o-                                -ms-



-webkit-                            -moz-
    http://leaverou.github.com/prefixfree/
Transparency or RGBA           Rotation


       Multiple background              Outlines



          Border Radius
 Text-shadow                                   Box shadow
                       Animation


          Columns                  gradients
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
CSS Border Radius
     Different Ways...
CSS Border Radius
     Different Ways...
CSS Border Radius
     Different Ways...
CSS Border Radius
     Different Ways...
          Demo
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
Modern
     Browser Support
Version 10 +
  Internet Explorer
Version 7 +
                         Firefox
Version 11.5 +
                          Opera
Version 5.1 + (Safari)
                         Webkit
Bro M
                  ws od
CSS Border Radius   er S ern
                        up
                           por
                              t
  Supported
    Internet Explorer
  Supported
              Firefox
  Supported
               Opera
  Supported
              Webkit
CSS Transition
        Transform
CSS Transition
        Transform
      Demo
Bro M
                         ws od
CSS Border Radius          er S ern
                               up
                                  por
         Transform                   t
  Supported
    Internet Explorer
  Supported
                     Firefox
  Supported
                      Opera
  Supported
                     Webkit
Bouncing Transitions
      Element Positioning
Bouncing Transitions
      Element Positioning
Bouncing Transitions
      Element Positioning
Bouncing Transitions
      Element Positioning
Bouncing Transitions
      Element Positioning
Bouncing Transitions
      Element Positioning
transition:2s;
Bouncing Transitions
      Element Positioning


                  GFW




 transition:4s;
Bouncing Transitions
      Element Positioning
                 cubic-bezier


                     GFW




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




       http://cubic-bezier.com
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
Multiple Outlines
     Box-Shadow Spread
Multiple Outlines
     Box-Shadow Spread
 box-shadow: 0 0 5px white;




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


        LOOK HERE
          o(O.O)o
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
Bro M
                                ws od
Multiple Outlines                 er S ern
                                      up
      Multiple Outline   Effect         por
                                           t
    Supported
      Internet Explorer
    Supported
                           Firefox
    Supported
                              Opera
    Supported
                            Webkit
Click Through Object
          Pointer-Events
Cyril
Click Through Object
          Pointer-Events
                   Tag Cloud




     http://demos.hacks.mozilla.org/openweb/pointer-events/
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/
Click Through Object
          Pointer-Events
                          Demo




           pointer-events:none;

     http://demos.hacks.mozilla.org/openweb/pointer-events/
Click Through Object
          Pointer-Events
    Not Supported
      Internet Explorer
    Supported, Since 3.6
                           Firefox
    Not Supported
                            Opera
    Supported
                           Webkit
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);
	 });
}
http://www.w3schools.com/cssref/css_selectors.asp
http://w3ctech.com/b/archives/617
Custom Input Design
    Fancy Checkbox / Radio
Custom Input Design
    Fancy Checkbox / Radio
        css => :checked
Bro M
                             ws od
Custom Input Design            er S ern
                                   up
         css=> :checked              por
                                        t
    Supported
      Internet Explorer
    Supported
                      Firefox
    Supported
                          Opera
    Supported
                          Webkit
Sequential Styling
           Sibling Count
Sequential Styling
           Sibling Count
              css => :last-child
:last-child
Sequential Styling
           Sibling Count
               css => :nth-child
:nth-child(2n+1)
Sequential Styling
           Sibling Count
               css => :nth-child
:nth-child(3n+1)
Sequential Styling
           Sibling Count
Bro M
                             ws od
Sequential Styling             er S ern
                                   up
       css => selectors              por
                                        t
  Supported
    Internet Explorer
  Supported
                     Firefox
  Supported
                          Opera
  Supported
                      Webkit
Background Patterns
         With Pure CSS
Background Patterns
         With Pure CSS
         Linear-Gradient




      http://leaverou.me/css3patterns/#
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
htt
         p:/
            /ca
               sp
                 erc
                     .
                    by
                       me
Th
  ank
      You
         !

Mais conteúdo relacionado

Semelhante a xfiles sharing

Progressive enhancement - Bridging the gap between CSS2 and CSS3
Progressive enhancement - Bridging the gap between CSS2 and CSS3Progressive enhancement - Bridging the gap between CSS2 and CSS3
Progressive enhancement - Bridging the gap between CSS2 and CSS3
Zohar Arad
 
[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)
Christopher Schmitt
 
JavaScript-based Visualization in R
JavaScript-based Visualization in RJavaScript-based Visualization in R
JavaScript-based Visualization in R
Fan Li
 
Modern Browser Support
Modern Browser SupportModern Browser Support
Modern Browser Support
Mark Meeker
 
HiUED 前端/web 發展和體驗
HiUED 前端/web 發展和體驗HiUED 前端/web 發展和體驗
HiUED 前端/web 發展和體驗
Bobby Chen
 

Semelhante a xfiles sharing (20)

CouchDB Google
CouchDB GoogleCouchDB Google
CouchDB Google
 
CouchDB - Local Web Platform
CouchDB - Local Web PlatformCouchDB - Local Web Platform
CouchDB - Local Web Platform
 
[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover[heweb11] CSS3 Makeover
[heweb11] CSS3 Makeover
 
Edge of the Web
Edge of the WebEdge of the Web
Edge of the Web
 
Scala in practice - 3 years later
Scala in practice - 3 years laterScala in practice - 3 years later
Scala in practice - 3 years later
 
Scala in-practice-3-years by Patric Fornasier, Springr, presented at Pune Sca...
Scala in-practice-3-years by Patric Fornasier, Springr, presented at Pune Sca...Scala in-practice-3-years by Patric Fornasier, Springr, presented at Pune Sca...
Scala in-practice-3-years by Patric Fornasier, Springr, presented at Pune Sca...
 
Devoxx 2009: The Lift Framework
Devoxx 2009: The Lift FrameworkDevoxx 2009: The Lift Framework
Devoxx 2009: The Lift Framework
 
Progressive enhancement - Bridging the gap between CSS2 and CSS3
Progressive enhancement - Bridging the gap between CSS2 and CSS3Progressive enhancement - Bridging the gap between CSS2 and CSS3
Progressive enhancement - Bridging the gap between CSS2 and CSS3
 
CSS3 3D Workshop
CSS3 3D WorkshopCSS3 3D Workshop
CSS3 3D Workshop
 
[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)[WebVisions 2010] CSS3 Workshop (Afternoon)
[WebVisions 2010] CSS3 Workshop (Afternoon)
 
JavaScript-based Visualization in R
JavaScript-based Visualization in RJavaScript-based Visualization in R
JavaScript-based Visualization in R
 
Modern Browser Support
Modern Browser SupportModern Browser Support
Modern Browser Support
 
Realtime Streaming using Autobahn Websockets
Realtime Streaming using Autobahn WebsocketsRealtime Streaming using Autobahn Websockets
Realtime Streaming using Autobahn Websockets
 
Opa hackathon
Opa hackathonOpa hackathon
Opa hackathon
 
SVG in Opera’s desktop, mobile & TV browsers — edition 2011
SVG in Opera’s desktop, mobile & TV browsers  — edition 2011SVG in Opera’s desktop, mobile & TV browsers  — edition 2011
SVG in Opera’s desktop, mobile & TV browsers — edition 2011
 
Seaside Portability
Seaside PortabilitySeaside Portability
Seaside Portability
 
The State of Web Type
The State of Web TypeThe State of Web Type
The State of Web Type
 
HiUED 前端/web 發展和體驗
HiUED 前端/web 發展和體驗HiUED 前端/web 發展和體驗
HiUED 前端/web 發展和體驗
 
Progressive enhancement
Progressive enhancementProgressive enhancement
Progressive enhancement
 
Building WebSocket and Server Side Events Applications using Atmosphere
Building WebSocket and Server Side Events Applications using AtmosphereBuilding WebSocket and Server Side Events Applications using Atmosphere
Building WebSocket and Server Side Events Applications using Atmosphere
 

Último

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 

Último (20)

Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 

xfiles sharing

  • 1. CSS3 The Truth Is Out There...
  • 3.
  • 4.
  • 5. Bobby Chen Shanghai Taiwan South Africa Australia
  • 6.
  • 7. Name : (Bobby) Job : Hobbies : Technology, Movie, Pub, Music etc... Website : caspercby.me
  • 8. htt p:/ /ca sp erc . by me
  • 9.
  • 11.
  • 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
  • 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); }); }
  • 51.
  • 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 !