React to user interaction with CSS

977 views
847 views

Published on

This talks aims to showcase some examples of CSS structures that are able to respond to user interactions like scroll, click on an element or filling a form. By taking advantage of some recently introduced pseudo selectors like :target, :valid, :required and :checked we can develop a whole new range of CSS rules that can react while the user interact with the page. During the talk we’ll explore some of these rules and how we can replace some well known javascript powered widgets with their pure CSS counterparts

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
977
On SlideShare
0
From Embeds
0
Number of Embeds
115
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

React to user interaction with CSS

  1. 1. CSS TIPS AND TRICKS Sandro Paganotti
  2. 2. :required :valid :invalid counter CLICK to PLAY or click for completed version CSS AND FORMS
  3. 3. CSS AND RATING SYSTEMS :checked CLICK to PLAY or click for completed version from Lea Verou
  4. 4. CSS AND SLIDESHOW appearance CLICK to PLAY or click for completed version
  5. 5. CSS AND 3D transform-style perspective transform CLICK to PLAY or click for completed version
  6. 6. CSS AND ACCORDION flex/box :target CLICK to PLAY or click for completed version
  7. 7. caniuse.com ! graceful degradation ! selectivzr ! (few) polyfills CSS AND BROWSER SUPPORT
  8. 8. THANKS! @sandropaganotti compartoweb.com bit.ly/css3pro

×