Stephanie Rewis - css-startech


Published on

Published in: Technology, Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Stephanie Rewis - css-startech

  1. 1. CSS3 The  web’s  Swiss  Army  Knife  updated  and  improvedThursday, October 27, 2011
  2. 2. Stephanie (Sullivan) Rewis Front-­‐end  developer Principal Wrote  the  CSS  Layouts  in  Dreamweaver WaSP  corporate  liaison  to  Adobe Customized  corporate  training  &  mentoring Author  &  Speaker TwiFer  addict  (@stefsull)Thursday, October 27, 2011
  3. 3. If  we  use  these  techniques  right  [HTML  and  CSS3],   we  can  get  rid  of  half  of  the  images  on  the  web,   because  theyre  used  for  styling. —  Håkon  Wium  LieThursday, October 27, 2011
  4. 4. Benefits of CSS3 Reduced  development  and  maintenance  0me   Increased  usability  &  accessibility Be8er  search  engine  placement  due  to  real  text  and   faster  pages Op0mized  styles  based  on  device  capabili0es Increased  page  performance Reducing  the  number  of  HTTP  the  most   important  guideline  for  improving  performance  for  first   0me  visitors. Yahoo!  Excep,onal  Performance  Team,   h8p://, October 27, 2011
  5. 5. CSS is Modular It  will  never  be  done Modules  are  in  varied   states  of  compleVonThursday, October 27, 2011
  6. 6. CSS3 Prefixes You  can  use  it  today— but  know  your  prefixes -­‐moz-­‐  Mozilla   (Gecko  browsers) -­‐webkit-­‐  Safari   (plus  WebKit  browsers) -­‐o-­‐  Opera  Soware -­‐ms-­‐  Microso -­‐khtml-­‐  Konqueror   browser  (plus  Safari  1)Thursday, October 27, 2011
  7. 7. When Can I Use... CompaVbility  tables  for  features  in  HTML5,  CSS3,   SVG  and  other  upcoming  web  technologiesThursday, October 27, 2011
  8. 8. Modernizr — My Hero! hFp:// Feature-­‐detecVon  library  for  HTML5  and  CSS3 Modernizr  creates  the  HTML5  elements  in  the  DOMThursday, October 27, 2011
  9. 9. Modernizr - Feature Detection Link  to  the  script  &  add  <html  class=”no-­‐js”> Modernizr  changes  the  no-­‐js  class  to  a  long  string   of  classes  that  you  can  use  to  serve  different  CSS   or  JS  to  a  browser  depending  on  its  lack  of   capabiliVes.  ie: <html  class=”  js  canvas  canvastext  geolocaVon   crosswindowmessaging  no-­‐websqldatabase  no-­‐indexeddb   hashchange  no-­‐historymanagement  draganddrop  no-­‐websockets   rgba  hsla  mulVplebgs  backgroundsize  borderimage  borderradius   boxshadow  opacity  no-­‐cssanimaVons  csscolumns  cssgradients  no-­‐ cssreflec8ons  csstransforms  no-­‐csstransforms3d  no-­‐csstransi8ons   video  audio  localstorage  sessionstorage  webworkers   applicaVoncache  svg  no-­‐smilsvgclippaths  foniace”>Thursday, October 27, 2011
  10. 10. CSS based on abilities Write  CSS  for  browsers  missing  support: .no-­‐cssgradients  .element  {        background-­‐color:  #value;      /*or*/        background-­‐image:  url(img/gradient.jpg); } Or  write  CSS  so  it’s  only  shown  to  capable   browsers: .  cssgradients  .element  {          background-­‐image:  -­‐webkit,  -­‐moz,  -­‐ms,  -­‐o,  etc; }Thursday, October 27, 2011
  11. 11. BackgroundsThursday, October 27, 2011
  12. 12. Three Boxes (Box Model) borderThursday, October 27, 2011
  13. 13. background-position (CSS3) Four  values  are  now  possible: boFom    10px    le    -­‐15px x-­‐axis y-­‐axis boFom    10px    le    -­‐15pxThursday, October 27, 2011
  14. 14. background-repeat (CSS3) Double  values  can  now  be  used: x-­‐axis y-­‐axis background-­‐repeat:  repeat  no-­‐repeat; Using  a  single  “repeat”  assumes  a  repeat  in  both   direcVons. Two  new  values: space  -­‐  repeat  as  many  Vmes  as  will  fit  with  equal   spacing  between  images round  -­‐  rescales  the  image  so  it   fits  an  equal  number  of  VmesThursday, October 27, 2011
  15. 15. Flexible Control New  levels  of  control  with  new  combinaVons background-­‐repeat:  no-­‐repeat  space; background-­‐repeat:  space  round;Thursday, October 27, 2011
  16. 16. background-origin Background-­‐origin  specifies  the  star-ng  point  for  the  background   image border-­‐box  -­‐  posiVons  the   background  image  relaVve   to  the  outer  edge  of  the  border padding-­‐box  (default)  -­‐  posiVons   the  background  image  relaVve   to  the  outer  edge  of  the  padding   (inner  edge  of  the  border) content-­‐box  -­‐  posiVons  the   background  image  relaVve  to   the  outer  edge  of  the  content   (inner  edge  of  the  padding)Thursday, October 27, 2011
  17. 17. background-clip Background-­‐clip  hides  a  porVon  of  your  background border-­‐box  (default)  -­‐  clips   backgrounds  relaVve  to  the  outer   edge  of  the  border padding-­‐box  -­‐  clips  backgrounds   relaVve  to  the  outer  edge  of  the   padding  (inner  edge  of  the  border) content-­‐box  -­‐  clips  backgrounds   relaVve  to  the  outer  edge  of  the   content  (inner  edge  of  the   padding)Thursday, October 27, 2011
  18. 18. background-size Background-­‐size  lets  you  specify  the  size  of  a  background  image  —   either  as  a  fixed  value,  or  relaVve  to  the  background  posi0oning   area pixels  -­‐  define  one  or  both  values percents  -­‐  define  one  or  both  values cover  -­‐  covers  the  enVre  space  using  the  lesser  width  or  height.   Warning:  Clipping  may  occur. contain  -­‐  shows  the  enVre  image  based  on  the  greater  height   or  width  of  the  image.  This  means  the  image  may  not   completely  fill  the  background  posiVoning  area. When  using  cover/contain  on  the  body  element,  set  the  height   of  the  html  element  to  100%Thursday, October 27, 2011
  19. 19. Thursday, October 27, 2011
  20. 20. .freshest { /* contains awning background */ ! width: 33.375em; ! background-size: 100% auto; /* this allows the background image to scale on the x-axis WITH larger text sizes */ ! font-size: 1em; } .homeLogo { /* logo base of the vege stand */ ! width: 33.75em; ! ! height: 18.75em; ! font-size: 1em; /* this causes image in the page to scale up as well */ ! -ms-interpolation-mode: bicubic; /* this helps IE to play nice when scaling */ } .navMain li { /* vege baskets */ ! height: 11.25em; ! background-size: 100% 100%; /* this allows navigation images to scale both directions WITH larger text */ }Thursday, October 27, 2011
  21. 21. More Images - More Better Syntax  (comma  separated): background-­‐image:  url(“image01.jpg”),  url(image02.jpg”); Subsequent  background  properVes,  such  as   background-­‐repeat  and  background-­‐posiVon,  use   a  comma-­‐delimited  list  of  values  which   correspond  to  the  individual  background  images background-­‐image:          url(“image01.jpg”),  url(image02.jpg”); background-­‐posiVon:  le  top,                                          right  boFom; background-­‐repeat:        repeat-­‐x,                                      no-­‐repeat; background-­‐size:                    250px,                                              cover;Thursday, October 27, 2011
  22. 22. Shorthand Ain’t So Short Background  shorthand  should  be  avoided  because  it   resets  everything! background-­‐color:  transparent; background-­‐image:  none; background-­‐posi0on:  0  0; background-­‐size:  auto;   background-­‐repeat:  repeat; background-­‐clip:  border-­‐box; background-­‐origin:  padding-­‐box; background-­‐a8achment:  scroll;Thursday, October 27, 2011
  23. 23. Alpha Gradients Gradients  are  applied  to  an  element  as  a background-­‐image Create  an  rgba  or  hsla  black  or  white  gradients Vary  the  opacity  instead  of  the  color  for  a  more   so,  flexible  effect  that  can  be  applied  over  any   color  on  the  pageThursday, October 27, 2011
  24. 24. Combined BackgroundsThursday, October 27, 2011
  25. 25. Background Combined Background-­‐image  Gradient Background-­‐color Background-­‐image background-­‐color:  rgb(96,147,201); background-­‐image:  url(../images/ santorini.jpg),  -­‐webkit-­‐linear-­‐gradient(top,   rgba(255,255,255,.7)  0%,rgba (255,255,255,0)  100%); background-­‐image:  url(../images/ santorini.jpg),  -­‐moz-­‐linear-­‐gradient(top,   rgba(255,255,255,.7)  0%,rgba (255,255,255,0)  100%); background-­‐repeat:  no-­‐repeat,  repeat-­‐x; background-­‐posiVon:  center  boFom,  le   top; -­‐webkit-­‐background-­‐size:  contain,  250px;          -­‐moz-­‐background-­‐size:  contain,  250px;                              background-­‐size:  contain,  250px;Thursday, October 27, 2011
  26. 26. Pseudo-elementsThursday, October 27, 2011
  27. 27. Pseudo-element selectors Also  called  generated  content place  content  into  your  CSS  and  have  it  appear  in  HTML   using  the  content  property should  not  be  used  for  essenVal  content   specify  where  it  should  appear,  :before  or  :aer  the   content  of  the  element 8+Thursday, October 27, 2011
  28. 28. Pseudo-element selectors generated  content .capVon:before  {                                      content:  “Figure:  “;      font-­‐weight:  bold; } <img  src=”img/baths.jpg> <p  class="capVon">The  Baths  at  Virgin  Gorda</p>Thursday, October 27, 2011
  29. 29. We can create whole elements div  {          width:  700px;          height:  400px;            posi8on:  rela8ve; } div:before,  div:aDer  {            /*  the  common  proper0es  for  both  selectors  */          content:"";          posi8on:  absolute; } div:before  {          top:  25px;          leU:  25px;          right:  25px;          bo8om:  25px; } div:aDer  {          top:  50px;          leU:  50px;          right:  50px;          bo8om:  50px; }Thursday, October 27, 2011
  30. 30. Every element gets two!Thursday, October 27, 2011
  31. 31. Negative edge absolute positioningThursday, October 27, 2011
  32. 32. Pseudo-elements with buttons MulVple  layering  is  one  method  to  apply  mulVple  borders  on   buFonsThursday, October 27, 2011
  33. 33. Create multiple wrappersThursday, October 27, 2011
  34. 34. Overlay gradients, borders & rgbaThursday, October 27, 2011
  35. 35. Add decorative images .prof  .hd:before  {          content:  "";          posiVon:  absolute;          le:  -­‐15px;          top:  11px;          width:  16px;          height:  24px;          background:  url(../img/point.png)  no-­‐repeat  0  0; }Thursday, October 27, 2011
  36. 36. Creating ShapesThursday, October 27, 2011
  37. 37. Border Tip Borders  meet  with  diagonal intersecVons height:  0; width:  0; border-­‐width  determines      size  of  the  triangle vary  border  widths  to  change      triangle  shape use  transparency  on  3  sidesThursday, October 27, 2011
  38. 38. border-radius Complete  circle: Width  and  height  are  equal Radius  equals  half  of  width/height  plus  full  padding Use  em  units  if  circle  contains  text .reminder  {          height:  9em;          width:  9em;          padding:  2em;      -­‐webkit-­‐border-­‐radius:  6.5em;                          -­‐moz-­‐border-­‐radius:  6.5em                                              border-­‐radius:  6.5em; } Can  use  percentages  if  older  browser support  is  not  required:                                            border-­‐radius:  50%;Thursday, October 27, 2011
  39. 39. border-radius Ellip-cal  corners: border-­‐radius:  x-­‐axis/y-­‐axis; First  value  extends  the  x-­‐axis   Second  value  extends  the  y-­‐axis -­‐webkit-­‐border-­‐radius:  100px/40px;          -­‐moz-­‐border-­‐radius:  100px/40px;                              border-­‐radius:  100px/40px; (Safari  3  &  4  used  non-­‐standard:   border-­‐radius:  25px  10px;)Thursday, October 27, 2011
  40. 40. transform Skewed  shapes: -­‐webkit-­‐transform:  skew(-­‐45deg);          -­‐moz-­‐transform:  skew(-­‐45deg);              -­‐ms-­‐transform:  skew(-­‐45deg);                    -­‐o-­‐transform:  skew(-­‐45deg);                              transform:  skew(-­‐45deg);Thursday, October 27, 2011
  41. 41. The lowly square You  can  do  this,  right? element  {          height:  150px;          width:  150px; }Thursday, October 27, 2011
  42. 42. Shapes as Pseudo-elementsThursday, October 27, 2011
  43. 43. Add triangles div:before  {        content:  "";        posiVon:  absolute;        height:  0;        width:  0;        le:  -­‐30px;        top:  30px;        border-­‐right:  30px  solid  skyblue;        border-­‐top:  15px  solid  transparent;        border-­‐boFom:  15px  solid  transparent;;   }Thursday, October 27, 2011
  44. 44. Triangles for ribbons Pseudo-­‐element  triangles  added  as  the  top  and   boFom  of  a  ribbonThursday, October 27, 2011
  45. 45. Speech bubbles Round  pseudo-­‐elements Absolutely  posiVoned  below their  parent  element. Or  overlapped  so  that  the   top  pseudo-­‐element obscures  a  porVon  of  the  lowerThursday, October 27, 2011
  46. 46. Pulling the shapes togetherThursday, October 27, 2011
  47. 47. Box-shadowThursday, October 27, 2011
  48. 48. box-shadow as borders Syntax: values  -­‐  x  offset,  y  offset,  blur,  spread,  color box-­‐shadow:        0  0  0  5px  #6CC,        0  0  0  10px  #69C,        0  0  0  15px  #66C,        0  0  0  20px  #63C,      0  0  0  25px  #60C; Tips: Borders  are  placed on  elements  from  the inside  to  the  outside.Thursday, October 27, 2011
  49. 49. box-shadow on one side only NegaVve  spread  value  can  be  used  to  make  the  box-­‐shadow   show  on  only  one  side  of  the  element.Thursday, October 27, 2011
  50. 50. box-shadow on pseudo-elements Place  box-­‐shadows  on  pseudo-­‐elements  to  create  a variety  of  effects. .shadow:before  {          content:  “”;          posiVon:  absolute;          z-­‐index:-­‐1;          le:10px;          width:50%;          height:20%;          box-­‐shadow:0  15px  10px  rgba(0,  0,  0,  0.7);          transform:rotate(-­‐3deg); } (.shadow:aer  is  the  same,  but  reversed)Thursday, October 27, 2011
  51. 51. box-shadow on pseudo-elements Nicolas  Gallagher’s   drop-­‐shadows  Thursday, October 27, 2011
  52. 52. CSS Regions & ExclusionsThursday, October 27, 2011
  53. 53. CSS Regions CSS  Regions  bring  new  properVes  to  CSS  that   provide: text  containers  with  custom  shapes. exclusion  shapes  which  text  will  wrap  around. text  that  flows  from  one  area  into  another.Thursday, October 27, 2011
  54. 54. Single ThreadThursday, October 27, 2011
  55. 55. Content ShapeThursday, October 27, 2011
  56. 56. Dynamic ExclusionThursday, October 27, 2011
  57. 57. Thursday, October 27, 2011
  58. 58. VariablesThursday, October 27, 2011
  59. 59. CSS Variables  “defines  a  new  type  of  primi8ve  value,  the  Variable,   which  is  accepted  by  all  proper8es.” @var  $header-­‐color  color  #000066; @var  $link-­‐color  color  #0066CC; @var  $secondary-­‐color  color  #CC0066; a  {  color:  $link-­‐color;  } a:visited  {  color:  $secondary-­‐color;  } h1  {      color:  $header-­‐color;    background-­‐image:                  linear-­‐gradient(leU,  $main-­‐color,  transparent  25%); }Thursday, October 27, 2011
  60. 60. Mixins (not accepted yet) Mixins  are  blocks  of  rules  that  can  be  "mixed  in"  with  normal   blocks  of  rules. @mixin  ‘alert’  {        background:  #FF0000;        color:  #FFFFF;        text-­‐shadow:  0  0  3px  rgba(0,0,0,0.4);        anima0on:  ‘a8en0ongrab’  300ms; } input:invalid:focus:aUer  {          content:  “INVALID”;              @mixin  ‘alert’; } .alert  {          @mixin  ‘alert’;          text-­‐decora0on:  underline; }Thursday, October 27, 2011
  61. 61. CSS FiltersThursday, October 27, 2011
  62. 62. CSS Filters A  filter  effect  consists  of  a  series  of  graphics   operaVons  that  are  applied  to  a  given  source   graphic  (client-­‐side)  to  produce  a  modified   graphical  result.   The  result  of  the  filter  effect  is  rendered  to  the   target  device  instead  of  the  original  source   graphic. Based  on  SVG  filters.Thursday, October 27, 2011
  63. 63. Example filters greyscale(amount) sepia(amount) saturate(amount) hue-­‐rotate(angle) invert(amount) opacity(amount) gamma(amplitude  exponent  offset) blur(radiusX  radiusY) sharpen(amount  radius  threshold) drop-­‐shadow(<shadow>)Thursday, October 27, 2011
  64. 64. Also being considered... brightness,  contrast,   crop(x,  y,  w,  h) exposure bloom(radius,  intensity) halUone gloom(radius,  intensity) mo0on-­‐blur(radius,  angle) mosaic(w,h) posterize(levels) displace(url,  intensity) bump(x,  y,  radius,  intensity) edge-­‐detect(intensity) generators pinch(x,  y,  radius,  scale) circle-­‐crop(x,  y,  radius) twirl(x,  y,  radius,  angle) affine-­‐transform(some   matrix)Thursday, October 27, 2011
  65. 65. Thank you!Thursday, October 27, 2011
  66. 66. Resources FleeVng  Epiphanies  -­‐  My  blog Box  shadow  on  one  side  blog  post CSS  background-­‐size  property  at  .netmagazine Create  flexible  imagery  for  the  web  -­‐  Computer  Arts Mastering  CSS  with  Dreamweaver  CS4   [New  Riders  Voices  that  MaFer] Stephanie  Sullivan  &  Greg  Rewis twiFer:  @stefsull stef@w3conversions.comThursday, October 27, 2011