Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CSS
TIPS
AND
TRICKS
Sandro 	

Paganotti
:required	
:valid	
:invalid	
counter
CLICK to PLAY
or click for completed version

CSS
AND
FORMS
CSS
AND
RATING
SYSTEMS

:checked
CLICK to PLAY
or click for completed version

from
Lea Verou
CSS
AND
SLIDESHOW

appearance
CLICK to PLAY
or click for completed version
CSS
AND
3D

transform-style	
perspective	
transform
CLICK to PLAY
or click for completed version
CSS
AND
ACCORDION

flex/box	
:target

CLICK to PLAY
or click for completed version
caniuse.com
!

graceful degradation
!

selectivzr
!

(few) polyfills

CSS
AND
BROWSER
SUPPORT
THANKS!
@sandropaganotti
compartoweb.com

bit.ly/css3pro
Upcoming SlideShare
Loading in …5
×

React to user interaction with CSS

1,119 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
  • Be the first to comment

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

×