Farger, opacity og gradients

  • 83 views
Uploaded on

Presentasjon fra Peanuts Talks som er en intern arena for å dele kunnskap med kollegaer. Presentasjonen ble holdt av Thomas Kalve.

Presentasjon fra Peanuts Talks som er en intern arena for å dele kunnskap med kollegaer. Presentasjonen ble holdt av Thomas Kalve.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
83
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. farger  og  sånt farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 2. farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 3. hvor  bruker  vi   farger? tekst,  bakgrunn,  rammer   og  omriss  og  kolonne-­‐skillelinje farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 4. hvordan  bruker   vi  farger? color:  red   background-­‐color:  white   border-­‐le?-­‐color:  blue   farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 5. hvordan  spesifiserer   vi  farger? farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 6. fargenavn:  crimson   ! 140  farger  1lgjengelig.  inkludert   NavajoWhite  og  DarkSalmon...   ! i  praksis  ubrukelig  1l  alt  annet  enn   hvit  og  sort. farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 7. hex:  #ffaabb   ! RGB  0-­‐255  representert  som  hex   ! rød  =  ff  =  255   grønn  =  aa  =  170   blå  =  bb  =  187 farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 8. når  alle  tre  parene  består  av  to  like,   kan  vi  forkorte  1l  #fab   ! sort:  #000   hvit:  #fff farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 9. rgb(242,  230,  182) RGB  0-­‐255  presentert  som  desimal   ! har  fungert  siden  IE6 farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 10. spørsmål? farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 11. farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 12. gjennomsik1ghet farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 13. dekkevne   opacity farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 14. vi  har  2  måter  å  gjøre  1ng   “gjennomsik1g”   ! opacity  på  elementer   alpha-­‐verdi  på  farger farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 15. opacity:  1   opacity:  0.5   opacity:  0.1   farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 16. div  {     background:  white;     color:  red;   } farger  |  gjennomsik1ghet  |  gradienter  |  skygger test
  • 17. div  {     background:  white;     opacity:  0.2;     color:  red;   }   farger  |  gjennomsik1ghet  |  gradienter  |  skygger test
  • 18. div  {     background:       rgba(255,255,255,0.2);     color:  red;   }   farger  |  gjennomsik1ghet  |  gradienter  |  skygger test
  • 19. div  {     background:  url(diver.jpg);     color:  white;   } farger  |  gjennomsik1ghet  |  gradienter  |  skygger test
  • 20. div  {     background:  url(diver.jpg);     color:  rgba(255,  255,  255,  0.5);   } farger  |  gjennomsik1ghet  |  gradienter  |  skygger test
  • 21. rgba(rød,  grønn,  blå,  alpha)   rgba(255,  0,  0,  0.5) farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 22. ne^leserkompa1bilitet farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 23. for  li^  eldre  ne^lesere  bruker  vi  browser  prefix   ! div  {     -­‐moz-­‐opacity:  0.5;         -­‐webkit-­‐opacity:  0.5;     -­‐o-­‐opacity:  0.5;         -­‐ms-­‐opacity:  0.5;         opacity:  0.5;           }                     //  Firefox   //  Chrome,  Safari   //  Opera   //  IE   ! farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 24. for  li^  eldre  IE  bruker  vi  microso?  filter   ! div  {     -­‐moz-­‐opacity:  0.5;         -­‐webkit-­‐opacity:  0.5;     -­‐o-­‐opacity:  0.5;         -­‐ms-­‐opacity:  0.5;         opacity:  0.5;                             //  Firefox   //  Chrome,  Safari   //  Opera   //  IE   !   filter:  alpha(opacity=50);   //  Eldre  IE     } farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 25. for  å  stø^e  gamle  ne^lesere  bør  vi  ha  fallback   ! div  {     background:  url(/images/white_80percent.png);     background:  rgba(255,255,255,  0.8);   }   ! ! ! ! ! farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 26. degrading  gracefully..   ! div  {     background:  #f0f0f0;     background:  rgba(255,255,255,  0.8);   }   ! ! ! ! ! farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 27. spørsmål? farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 28. farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 29. gradienter farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 30. div  {     background:       linear-­‐gradient(to  right,  red  0%,  #fb0  100%);   } farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 31. div  {     background:       linear-­‐gradient(to  right,  red  0%,  #fb0  10%);   } farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 32. div  {     background:       linear-­‐gradient(to  bottom,  red  0%,  #fb0  100%);   } farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 33. div  {     background:       linear-­‐gradient(to  bottom,  black  0%,  red  50%,  black  100%);   } farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 34. div  {     background:       linear-­‐gradient(135deg,  black  0%,  red  50%,  black  100%);   } farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 35. div  {     background:       radial-­‐gradient(circle,  black  0%,  red  50%,  black  100%);   } farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 36. syntax:     ! background:     linear-­‐gradient(direction,  color1,  color2,  …);   ! background:     radial-­‐gradient(center,  shape  size,       color1,  color2,  …); farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 37. ne^leserkompa1bilitet farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 38. background:  #ff0000;   ! background:  -­‐moz-­‐linear-­‐gradient(-­‐45deg,  red  0%,  #fb0  100%);   ! background:  -­‐webkit-­‐gradient(linear,  left  top,  right  bottom,
         color-­‐stop(0%,red),  color-­‐stop(100%,#fb0));   ! background:  -­‐webkit-­‐linear-­‐gradient(-­‐45deg,  red  0%,  #fb0  100%);   ! background:  -­‐o-­‐linear-­‐gradient(-­‐45deg,  red  0%,  #fb0  100%);   ! background:  -­‐ms-­‐linear-­‐gradient(-­‐45deg,  red  0%,  #fb0  100%);   ! background:  linear-­‐gradient(135deg,  red  0%,  #fb0  100%);   ! filter:  progid:DXImageTransform.Microsoft.gradient(
        startColorstr='#ff0000',  endColorstr='#ffbb00',GradientType=1  ); farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 39. hæ?  må  vi  huske  det?! h^p://www.colorzilla.com/gradient-­‐editor/ farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 40. spørsmål? farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 41. farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 42. skygger farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 43. box-­‐shadow div  {     box-­‐shadow:       0  0  15px  rgba(0,0,0,0.5);   }   div  {     text-­‐shadow:       2px  2px  10px  rgba(0,0,0,0.5);   }   text-­‐shadow farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 44. mer  enn  en  skygge? div  {     background:  white;     box-­‐shadow:      5px  5px  11px  5px  purple,          40px  -­‐30px  5px  khaki,          40px  30px  50px  coral,        -­‐40px  30px  5px  goldenrod,        -­‐40px  -­‐30px  50px  turquoise,        -­‐70px  60px  50px  chartreuse;   }   farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 45. inset  shadow div  {     background:  white;        box-­‐shadow:          inset  5px  5px  10px             rgba(0,0,0,0.5);   }   farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 46. syntax:     ! box-­‐shadow:     inset  h-­‐shadow  v-­‐shadow  blur  spread  color;   ! text-­‐shadow:     h-­‐shadow  v-­‐shadow  blur  color; farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 47. spørsmål? farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  • 48. Takk  for  meg!   nydge  linker:   h^p://www.colorzilla.com/gradient-­‐editor/               h^p://css3generator.com/   ! credits:  h^p://diverfigurines.blogspot.com.es/   farger  |  gjennomsik1ghet  |  gradienter  |  skygger