React to user interaction with CSS
Upcoming SlideShare
Loading in...5
×
 

React to user interaction with CSS

on

  • 957 views

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 ...

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

Statistics

Views

Total Views
957
Views on SlideShare
861
Embed Views
96

Actions

Likes
1
Downloads
3
Comments
0

3 Embeds 96

http://milano.codemotionworld.com 92
http://milan2013.codemotionworld.com 3
http://plus.url.google.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

React to user interaction with CSS React to user interaction with CSS Presentation Transcript

  • 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