CSS Takes Over the World

Looking at how CSS has taken over from where we used to use JavaScript, Flash or other techniques to achieve the delightful interfaces we're trying to create.

Transcript

1. CSS TAKES
   OVER THE WORLD
   1
   

   View Slide

2. OLD SCHOOL:
   ROLLOVERS
   2
   

   View Slide

3. Remember This?
   function  MM_swapImage(){
      var  i,j=0,x,a=MM_swapImage.arguments;  
   document.MM_sr=new  Array;  
   for(i=0;i<(a.length-­‐2);i+=3)
        if  ((x=MM_findObj(a[i]))!=null)
   {document.MM_sr[j++]=x;  if(!x.oSrc)  
   x.oSrc=x.src;  x.src=a[i+2];}
   }
   3
   

   View Slide

4. Messy
   
        onmouseout="MM_swapImgRestore()"
        onmouseover="MM_swapImage('img1','','roll.png',1)">
        
   
   4
   

   View Slide

5. CSS
   a  {
      background-­‐image:  url("my-­‐image.png");
   }
   a:hover  {
      background-­‐image:  url("roll.png");
   }
   5
   

   View Slide

6. CSS Sprites
   a  {
      background-­‐image:  url("my-­‐sprite.png");
      background-­‐position:  0  0;
   }
   a:hover  {
      background-­‐position:0  -­‐30px;
   }
   6
   

   View Slide

7. GETTING PAID:
   DROP DOWN MENUS
   7
   

   View Slide

8. Ultimate Dropdown Menu
   Accessible
   Keyboard Navigation
   JavaScript-powered
   http://www.udm4.com/
   8
   

   View Slide

9. View Slide

10. Our HTML
    
       Menu
           
               Sub-­‐menu  A
               Sub-­‐menu  A
               Sub-­‐menu  A
           
       
    
    10
    

    View Slide

11. jQuery
    $('.menu  >  li').hover(
       function(){  $('ul',  this).show();  },
       function(){  $('ul',  this).hide();  }
    );
    11
    

    View Slide

12. CSS
    .menu  >  li  >  ul  {
       display:none;
    }
    .menu  >  li:hover  >  ul  {
       display:block;
    }
    12
    

    View Slide

13. LIKE A ROCK:
    DEPENDENT CONTENT
    13
    

    View Slide

14. Our HTML
    
     How  much  wood  could...?
     Who  sells  seashells...?
     ...
     
         The  amount  of  wood  that  a  woodchuck...
     
    
    14
    

    View Slide

15. jQuery
    $('.faq  a').click(function(){
       $(this).parent().find('.active')
             .removeClass('active');
       $(this.href).addClass('active');
    });
    /*  css  */
    .faq  >  div  {  display:none;  }
    .faq  >  .active  {  display:block;  }
    15
    

    View Slide

16. CSS
    .faq  >  div  {  
       display:none;  
    }
    .faq  >  div:target  {  
       display:block;  
    }
    16
    

    View Slide

17. http://bit.ly/dlGn24
    17
    

    View Slide

18. View Slide

19. http://leaverou.me/ft2010/
    19
    

    View Slide

20. View Slide

21. THE WORKHORSE:
    FORM VALIDATION
    21
    

    View Slide

22. jQuery Validation
    /*
     http://docs.jquery.com/Plugins/validation  
    */
    class="required  email"  />
    class="url"  value=""  />
    22
    

    View Slide

23. Validating
    $("#myform").validate();
    23
    

    View Slide

24. Using HTML5 and CSS3
    /*  A  List  Apart:  Forward  Thinking  Form  
    Validation  http://bit.ly/bHNs9T  */
       type="number"  min="1001"  max="8000"
       maxlength="4"  required>
    24
    

    View Slide

25. CSS3 UI Module
    :valid
    :invalid
    :required
    :optional
    :in-­‐range
    :out-­‐of-­‐range
    :read-­‐only
    :read-­‐write
    25
    

    View Slide

26. View Slide

27. View Slide

28. HTML
    Email  *  
    placeholder="e.g.  ryan@example.net"  title="Please  
    enter  a  valid  email"  required  />
    
       Please  enter  a  valid  email  
    address  e.g.  ryan@example.net
       Thank  you  for  entering  a  
    valid  email
    
    28
    

    View Slide

29. CSS
    input:focus  +  .val  {  display:  block;  }
    #signup  input:focus:required:valid  
    +  .val  .invalid  {  display:  none;  }
    #signup  input:focus:required:invalid  
    +  .val  .valid  {  display:  none;  }
    29
    

    View Slide

30. BRINGING THE FLAIR:
    ANIMATION
    30
    

    View Slide

31. jQuery
    $().show();
    $().hide();
    $().toggle();
    $().fadeIn();
    $().fadeOut();
    $().fadeToggle();
    $().slideUp();
    $().slideDown();
    $().slideToggle();
    31
    

    View Slide

32. jQuery Animate
    $('#my-­‐el').animate(
       {top:"200px",  left:"100px"},  
       {duration:500,  complete:function(){
             alert("I’m  done!");
       }}
    );
    32
    

    View Slide

33. jQuery Animated Backgrounds
    $('#nav  a')
      .css(  {backgroundPosition:  "0  0"}  )
      .mouseover(function(){
        $(this).stop().animate(
          {backgroundPosition:"(0  -­‐250px)"},  
          {duration:500})
        })
      .mouseout(function(){
        $(this).stop().animate(
          {backgroundPosition:"(0  0)"},  
          {duration:500})
        })
    33
    

    View Slide

34. http://bit.ly/3lfjUA
    34
    

    View Slide

35. CSS Transitions
    -­‐webkit-­‐transition-­‐property:  opacity;
    -­‐webkit-­‐transition-­‐duration:  0.3s;
    -­‐webkit-­‐transition-­‐timing-­‐function:  ease;
    /*  Don’t  forget  other  browsers!  */
    -­‐moz-­‐transition
    -­‐o-­‐transition
    -­‐ms-­‐transition
    35
    

    View Slide

36. CSS Transitions
    /*  Shortcut  */
    -­‐webkit-­‐transition:  opacity  0.3s  ease;
    /*  Multiple  properties  */
    -­‐webkit-­‐transition:  opacity  0.3s  ease,
       width  0.3s  linear;
    /*  All  properties  */
    -­‐webkit-­‐transition:  all  0.3s  ease;
    36
    

    View Slide

37. View Slide

38. Targetted Content
    .faq  >  div  {
       position:absolute;  left:-­‐9999px;
       opacity:0;
       -­‐webkit-­‐transition:opacity  1s  ease;
    }
    .faq  >  div:target  {
       position:static;
       opacity:1;
    }
    38
    

    View Slide

39. CSS Animated Backgrounds
    a  {
       background:url("sprite.png");
       background-­‐position:0  0;  
       -­‐webkit-­‐transition:background-­‐position  .5s;
    }
    a:hover  {
       background-­‐position:0  -­‐100px;
    }
    39
    

    View Slide

40. CSS Animations
    @-­‐webkit-­‐keyframes  throb  {
       0%      {  opacity:  0.2;  left:0;  }
       50%    {  opacity:  1.0;  left:10px;  }
       100%  {  opacity:  0.2;  left:0;  }
    }
    40
    

    View Slide

41. Targetted Content
    .faq  >  div  {
       display:none
    }
    .faq  >  div:target  {
       display:block;
       position:relative;
       -­‐webkit-­‐animation:  throb  1.5s  infinite;
    }
    41
    

    View Slide

42. View Slide

43. Slot Machine
    @-­‐webkit-­‐keyframes  spin  {
       0%      {  background-­‐position:0  0;  }
       100%  {  background-­‐position:0  -­‐200px;  }
    }
    43
    

    View Slide

44. Slot Machine
    #slotmachine  {  
       background:url("spinner.png");
       background-­‐position:  0  0;  
       padding-­‐left:20px;  
       -­‐webkit-­‐animation:  spin  2s  infinite  linear;
    }
    #slotmachine:target  {
       background-­‐position:0  -­‐60px;
       -­‐webkit-­‐animation:  none;
       -­‐webkit-­‐transition:  background-­‐position  1s;
    }
    44
    

    View Slide

45. View Slide

46. 46
    CSS Panic
    @-­‐webkit-­‐keyframes  progress{
               0%  {width:0px;}
           100%  {width:200px;}
    }
    

    View Slide

47. 47
    CSS Panic
    .enemys:checked{
           overflow:hidden;
           -­‐webkit-­‐animation-­‐name:none;
           -­‐webkit-­‐pointer-­‐events:  none;
           pointer-­‐events:  none;
           opacity:0;
    }
    

    View Slide

48. Razzle Dazzle!
    48
    

    View Slide

49. Filters
    filter:progid:DXImageTransform
         .Microsoft.Blur(pixelradius=2);
    filter:progid:DXImageTransform
         .Microsoft.BasicImage(grayscale=1);
    49
    

    View Slide

50. CSS Filters (like, the W3C, man)
    blur(5,  5)
    drop-­‐shadow(10,  5,  5)
    hue-­‐rotate(328deg)
    saturate(5)
    invert(1)
    grayscale(1)
    opacity(0.5)
    gamma(1.1,  3.6,  0)
    sepia(0.5)
    50
    

    View Slide

51. CSS Shaders
    #shaded:hover  {
           filter:  custom(url('wobble.vs')  
                                         url('color-­‐swipe.fs'),  
                                         40  40,  
                                         amplitude  60,  
                                         amount  1.0);
    }
    51
    

    View Slide

52. View Slide

53. CSS Shaders
    http://www.adobe.com/devnet/html5/articles/css-
    shaders.html
    53
    

    View Slide

54. GET IN THE RING:
    LAYOUT
    54
    

    View Slide

55. Adaptive Interfaces
    if  (window.innerWidth  <  800)  {
     var  el=document.getElementById('#sidebar');
       el.style.display  =  'none';
    }
    55
    

    View Slide

56. Masonry
    $(function(){
       $('#container').masonry({
           itemSelector  :  '.item',
           columnWidth  :  240
       });
    });
    56
    

    View Slide

57. View Slide

58. 58
    Responsive Web Design
       rel="stylesheet"    
       media="screen  and  (max-­‐device-­‐width:  480px)"
       href="shetland.css">
    

    View Slide

59. View Slide

60. Tables for layout
    
         
             Sidebar  Content
             Main  Content
         
    
    60
    

    View Slide

61. display:table with CSS
    
         Sidebar  Content
         Main  Content
    
    61
    

    View Slide

62. display:table with CSS
    #content  {  display:table;  }
    .sidebar  {  display:table-­‐cell;  width:50px;  }
    .main        {  display:table-­‐cell;  }
    62
    

    View Slide

63. Two Modes by Class Name
    body.panescroll  {  
    /*  position:fixed;  */  
    }
    body.pagescroll  {  
     /*  display:table;  */
     }
    63
    

    View Slide

64. Grid Layout
    64
    

    View Slide

65. Grid Layout
    #content  {  
       display:  -­‐ms-­‐grid;
       -­‐ms-­‐grid-­‐columns:  150px  200px;
    }
    .column  {  
       -­‐ms-­‐grid-­‐row:  1;
       -­‐ms-­‐grid-­‐column:  1;  
       -­‐ms-­‐grid-­‐column-­‐span:  11;
    }
    65
    

    View Slide

66. WHAT IS THE POINT?
    66
    

    View Slide

67. Declarative CSS is more efficient than JavaScript
    It’s smaller
    It requests fewer resources
    Browser can offload to GPU
    It’s easier to separate concerns
    We’re describing visual states
    67
    

    View Slide

68. View Slide

69. 69
    Describing State
    .panescroll  #main  {
      margin-­‐top:  0px;
      -­‐webkit-­‐transition:  margin-­‐top  .5s;
      -­‐moz-­‐transition:  margin-­‐top  .5s;
    }
    

    View Slide

70. 70
    Describing State
    .panescroll.l-­‐headercollapsed  #main  {
      margin-­‐top:  -­‐45px;
    }
    

    View Slide

71. THANK YOU!
    “Superfly” @snookca
    71
    

    View Slide