Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Takes Over the World

D430439bd291dae3d8a43a413ee4ca82?s=47 snookca
October 06, 2011

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.

D430439bd291dae3d8a43a413ee4ca82?s=128

snookca

October 06, 2011
Tweet

Transcript

  1. CSS TAKES OVER THE WORLD 1

  2. OLD SCHOOL: ROLLOVERS 2

  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
  4. Messy <body  onload="MM_preloadImages('roll.png')"> <a  href="/n/"        onmouseout="MM_swapImgRestore()"  

       onmouseover="MM_swapImage('img1','','roll.png',1)">      <img  src="pre-­‐roll.png"  name="img1"  id="img1"> </a> 4
  5. CSS a  {    background-­‐image:  url("my-­‐image.png"); } a:hover  {  

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

     0; } a:hover  {    background-­‐position:0  -­‐30px; } 6
  7. GETTING PAID: DROP DOWN MENUS 7

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

  9. 9

  10. Our HTML <ul  class="menu">    <li><a  href="/a/">Menu</a>      

     <ul>            <li><a  href="/a/a">Sub-­‐menu  A</a></li>            <li><a  href="/a/b">Sub-­‐menu  A</a></li>            <li><a  href="/a/c">Sub-­‐menu  A</a></li>        </ul>    </li> </ul> 10
  11. jQuery $('.menu  >  li').hover(    function(){  $('ul',  this).show();  },  

     function(){  $('ul',  this).hide();  } ); 11
  12. CSS .menu  >  li  >  ul  {    display:none; }

    .menu  >  li:hover  >  ul  {    display:block; } 12
  13. LIKE A ROCK: DEPENDENT CONTENT 13

  14. Our HTML <div  class="faq">  <a  href="#a1">How  much  wood  could...?</a>  <a

     href="#a2">Who  sells  seashells...?</a>  ...  <div  id="a1">      The  amount  of  wood  that  a  woodchuck...  </div> </div> 14
  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
  16. CSS .faq  >  div  {      display:none;   }

    .faq  >  div:target  {      display:block;   } 16
  17. http://bit.ly/dlGn24 17

  18. 18

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

  20. 20

  21. THE WORKHORSE: FORM VALIDATION 21

  22. jQuery Validation /*  http://docs.jquery.com/Plugins/validation   */ <input  id="cemail"  name="email"  size="25"

        class="required  email"  /> <input  id="curl"  name="url"  size="25"     class="url"  value=""  /> 22
  23. Validating $("#myform").validate(); 23

  24. Using HTML5 and CSS3 /*  A  List  Apart:  Forward  Thinking

     Form   Validation  http://bit.ly/bHNs9T  */ <input  id="postcode"  name="postcode"      type="number"  min="1001"  max="8000"    maxlength="4"  required> 24
  25. CSS3 UI Module :valid :invalid :required :optional :in-­‐range :out-­‐of-­‐range :read-­‐only

    :read-­‐write 25
  26. 26

  27. 27

  28. HTML <label  for="email">Email  *</label>   <input  type="email"  id="email"  name="email"  

    placeholder="e.g.  ryan@example.net"  title="Please   enter  a  valid  email"  required  /> <p  class="val">    <span  class="invalid">Please  enter  a  valid  email   address  e.g.  ryan@example.net</span>    <span  class="valid">Thank  you  for  entering  a   valid  email</span> </p> 28
  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
  30. BRINGING THE FLAIR: ANIMATION 30

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

    31
  32. jQuery Animate $('#my-­‐el').animate(    {top:"200px",  left:"100px"},      {duration:500,  complete:function(){

             alert("I’m  done!");    }} ); 32
  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
  34. http://bit.ly/3lfjUA 34

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

  38. Targetted Content .faq  >  div  {    position:absolute;  left:-­‐9999px;  

     opacity:0;    -­‐webkit-­‐transition:opacity  1s  ease; } .faq  >  div:target  {    position:static;    opacity:1; } 38
  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
  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
  41. Targetted Content .faq  >  div  {    display:none } .faq

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

  43. Slot Machine @-­‐webkit-­‐keyframes  spin  {    0%      {

     background-­‐position:0  0;  }    100%  {  background-­‐position:0  -­‐200px;  } } 43
  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
  45. 45

  46. 46 CSS Panic @-­‐webkit-­‐keyframes  progress{          

     0%  {width:0px;}        100%  {width:200px;} }
  47. 47 CSS Panic .enemys:checked{        overflow:hidden;    

       -­‐webkit-­‐animation-­‐name:none;        -­‐webkit-­‐pointer-­‐events:  none;        pointer-­‐events:  none;        opacity:0; }
  48. Razzle Dazzle! 48

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

  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
  51. CSS Shaders #shaded:hover  {        filter:  custom(url('wobble.vs')  

                                         url('color-­‐swipe.fs'),                                        40  40,                                        amplitude  60,                                        amount  1.0); } 51
  52. 52

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

  54. GET IN THE RING: LAYOUT 54

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

     el.style.display  =  'none'; } 55
  56. Masonry $(function(){    $('#container').masonry({        itemSelector  :  '.item',

           columnWidth  :  240    }); }); 56
  57. 57

  58. 58 Responsive Web Design <link      rel="stylesheet"    

       media="screen  and  (max-­‐device-­‐width:  480px)"    href="shetland.css">
  59. 59

  60. Tables for layout <table>      <tr>      

       <td  width="50">Sidebar  Content</td>          <td  width="*">Main  Content</td>      </tr> </table> 60
  61. display:table with CSS <div  id="content">      <div  class="sidebar">Sidebar  Content</div>

         <div  class="main">Main  Content</div> </div> 61
  62. display:table with CSS #content  {  display:table;  } .sidebar  {  display:table-­‐cell;

     width:50px;  } .main        {  display:table-­‐cell;  } 62
  63. Two Modes by Class Name body.panescroll  {   /*  position:fixed;

     */   } body.pagescroll  {    /*  display:table;  */  } 63
  64. Grid Layout 64

  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
  66. WHAT IS THE POINT? 66

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

  69. 69 Describing State .panescroll  #main  {   margin-­‐top:  0px;  

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

  71. THANK YOU! “Superfly” @snookca 71