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

CSS Takes Over the World

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.

snookca

October 06, 2011
Tweet

More Decks by snookca

Other Decks in Design

Transcript

  1. 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
  2. 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
  3. 9

  4. 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
  5. CSS .menu  >  li  >  ul  {    display:none; }

    .menu  >  li:hover  >  ul  {    display:block; } 12
  6. 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
  7. 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
  8. CSS .faq  >  div  {      display:none;   }

    .faq  >  div:target  {      display:block;   } 16
  9. 18

  10. 20

  11. 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
  12. 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
  13. 26

  14. 27

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

    placeholder="e.g.  [email protected]"  title="Please   enter  a  valid  email"  required  /> <p  class="val">    <span  class="invalid">Please  enter  a  valid  email   address  e.g.  [email protected]</span>    <span  class="valid">Thank  you  for  entering  a   valid  email</span> </p> 28
  16. 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
  17. 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
  18. 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
  19. 37

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

     opacity:0;    -­‐webkit-­‐transition:opacity  1s  ease; } .faq  >  div:target  {    position:static;    opacity:1; } 38
  21. CSS Animated Backgrounds a  {    background:url("sprite.png");    background-­‐position:0  0;

         -­‐webkit-­‐transition:background-­‐position  .5s; } a:hover  {    background-­‐position:0  -­‐100px; } 39
  22. CSS Animations @-­‐webkit-­‐keyframes  throb  {    0%      {

     opacity:  0.2;  left:0;  }    50%    {  opacity:  1.0;  left:10px;  }    100%  {  opacity:  0.2;  left:0;  } } 40
  23. Targetted Content .faq  >  div  {    display:none } .faq

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

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

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

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

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

       -­‐webkit-­‐animation-­‐name:none;        -­‐webkit-­‐pointer-­‐events:  none;        pointer-­‐events:  none;        opacity:0; }
  30. 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
  31. CSS Shaders #shaded:hover  {        filter:  custom(url('wobble.vs')  

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

  33. 57

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

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

  36. Tables for layout <table>      <tr>      

       <td  width="50">Sidebar  Content</td>          <td  width="*">Main  Content</td>      </tr> </table> 60
  37. display:table with CSS #content  {  display:table;  } .sidebar  {  display:table-­‐cell;

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

     */   } body.pagescroll  {    /*  display:table;  */  } 63
  39. 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
  40. 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
  41. 68

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

    -­‐webkit-­‐transition:  margin-­‐top  .5s;   -­‐moz-­‐transition:  margin-­‐top  .5s; }