farger	
  og	
  sånt

farger	
  |	
  gjennomsik1ghet	
  |	
  gradienter	
  |	
  skygger
farger	
  |	
  gjennomsik1ghet	
  |	
  gradienter	
  |	
  skygger
hvor	
  bruker	
  vi	
  
farger?
tekst,	
  bakgrunn,	
  rammer	
  
og	
  omriss	
  og	
  kolonne-­‐skillelinje

farger	
  ...
hvordan	
  bruker	
  
vi	
  farger?
color:	
  red	
  
background-­‐color:	
  white	
  
border-­‐le?-­‐color:	
  blue	
  

...
hvordan	
  spesifiserer	
  
vi	
  farger?

farger	
  |	
  gjennomsik1ghet	
  |	
  gradienter	
  |	
  skygger
fargenavn:	
  crimson	
  
!

140	
  farger	
  1lgjengelig.	
  inkludert	
  
NavajoWhite	
  og	
  DarkSalmon...	
  
!

i	
 ...
hex:	
  #ffaabb	
  
!

RGB	
  0-­‐255	
  representert	
  som	
  hex	
  
!

rød	
  =	
  ff	
  =	
  255	
  
grønn	
  =	
  aa	
...
når	
  alle	
  tre	
  parene	
  består	
  av	
  to	
  like,	
  
kan	
  vi	
  forkorte	
  1l	
  #fab	
  
!

sort:	
  #000	
...
rgb(242,	
  230,	
  182)
RGB	
  0-­‐255	
  presentert	
  som	
  desimal	
  
!

har	
  fungert	
  siden	
  IE6

farger	
  |...
spørsmål?

farger	
  |	
  gjennomsik1ghet	
  |	
  gradienter	
  |	
  skygger
farger	
  |	
  gjennomsik1ghet	
  |	
  gradienter	
  |	
  skygger
gjennomsik1ghet

farger	
  |	
  gjennomsik1ghet	
  |	
  gradienter	
  |	
  skygger
dekkevne	
  
opacity

farger	
  |	
  gjennomsik1ghet	
  |	
  gradienter	
  |	
  skygger
vi	
  har	
  2	
  måter	
  å	
  gjøre	
  1ng	
  
“gjennomsik1g”	
  
!

opacity	
  på	
  elementer	
  
alpha-­‐verdi	
  på	...
opacity:	
  1	
  
opacity:	
  0.5	
  
opacity:	
  0.1	
  

farger	
  |	
  gjennomsik1ghet	
  |	
  gradienter	
  |	
  skygg...
div	
  {	
  
	
   background:	
  white;	
  
	
   color:	
  red;	
  
}

farger	
  |	
  gjennomsik1ghet	
  |	
  gradienter	
...
div	
  {	
  
	
   background:	
  white;	
  
	
   opacity:	
  0.2;	
  
	
   color:	
  red;	
  
}	
  

farger	
  |	
  gjenno...
div	
  {	
  
	
   background:	
  
	
   	
   rgba(255,255,255,0.2);	
  
	
   color:	
  red;	
  
}	
  

farger	
  |	
  gjenn...
div	
  {	
  
	
   background:	
  url(diver.jpg);	
  
	
   color:	
  white;	
  
}

farger	
  |	
  gjennomsik1ghet	
  |	
  g...
div	
  {	
  
	
   background:	
  url(diver.jpg);	
  
	
   color:	
  rgba(255,	
  255,	
  255,	
  0.5);	
  
}

farger	
  |	...
rgba(rød,	
  grønn,	
  blå,	
  alpha)	
  
rgba(255,	
  0,	
  0,	
  0.5)

farger	
  |	
  gjennomsik1ghet	
  |	
  gradienter...
ne^leserkompa1bilitet

farger	
  |	
  gjennomsik1ghet	
  |	
  gradienter	
  |	
  skygger
for	
  li^	
  eldre	
  ne^lesere	
  bruker	
  vi	
  browser	
  prefix	
  
!

div	
  {	
  
	
   -­‐moz-­‐opacity:	
  0.5;	
 ...
for	
  li^	
  eldre	
  IE	
  bruker	
  vi	
  microso?	
  filter	
  
!

div	
  {	
  
	
   -­‐moz-­‐opacity:	
  0.5;	
   	
  ...
for	
  å	
  stø^e	
  gamle	
  ne^lesere	
  bør	
  vi	
  ha	
  fallback	
  
!

div	
  {	
  
	
   background:	
  url(/images...
degrading	
  gracefully..	
  
!

div	
  {	
  
	
   background:	
  #f0f0f0;	
  
	
   background:	
  rgba(255,255,255,	
  0....
spørsmål?

farger	
  |	
  gjennomsik1ghet	
  |	
  gradienter	
  |	
  skygger
farger	
  |	
  gjennomsik1ghet	
  |	
  gradienter	
  |	
  skygger
gradienter

farger	
  |	
  gjennomsik1ghet	
  |	
  gradienter	
  |	
  skygger
div	
  {	
  
	
   background:	
  
	
   	
   linear-­‐gradient(to	
  right,	
  red	
  0%,	
  #fb0	
  100%);	
  
}

farger	
...
div	
  {	
  
	
   background:	
  
	
   	
   linear-­‐gradient(to	
  right,	
  red	
  0%,	
  #fb0	
  10%);	
  
}

farger	
 ...
div	
  {	
  
	
   background:	
  
	
   	
   linear-­‐gradient(to	
  bottom,	
  red	
  0%,	
  #fb0	
  100%);	
  
}

farger	...
div	
  {	
  
	
   background:	
  
	
   	
   linear-­‐gradient(to	
  bottom,	
  black	
  0%,	
  red	
  50%,	
  black	
  100...
div	
  {	
  
	
   background:	
  
	
   	
   linear-­‐gradient(135deg,	
  black	
  0%,	
  red	
  50%,	
  black	
  100%);	
 ...
div	
  {	
  
	
   background:	
  
	
   	
   radial-­‐gradient(circle,	
  black	
  0%,	
  red	
  50%,	
  black	
  100%);	
 ...
syntax:	
  	
  
!

background:	
  
	
   linear-­‐gradient(direction,	
  color1,	
  color2,	
  …);	
  
!

background:	
  
	...
ne^leserkompa1bilitet

farger	
  |	
  gjennomsik1ghet	
  |	
  gradienter	
  |	
  skygger
background:	
  #ff0000;	
  
!
background:	
  -­‐moz-­‐linear-­‐gradient(-­‐45deg,	
  red	
  0%,	
  #fb0	
  100%);	
  
!
ba...
hæ?	
  må	
  vi	
  huske	
  det?!
h^p://www.colorzilla.com/gradient-­‐editor/

farger	
  |	
  gjennomsik1ghet	
  |	
  grad...
spørsmål?

farger	
  |	
  gjennomsik1ghet	
  |	
  gradienter	
  |	
  skygger
farger	
  |	
  gjennomsik1ghet	
  |	
  gradienter	
  |	
  skygger
skygger

farger	
  |	
  gjennomsik1ghet	
  |	
  gradienter	
  |	
  skygger
box-­‐shadow

div	
  {	
  
	
   box-­‐shadow:	
  
	
   	
   0	
  0	
  15px	
  rgba(0,0,0,0.5);	
  
}	
  

div	
  {	
  
	
 ...
mer	
  enn	
  en	
  skygge?
div	
  {	
  
	
   background:	
  white;	
  
	
   box-­‐shadow:	
  
	
   	
  5px	
  5px	
  11px...
inset	
  shadow
div	
  {	
  
	
   background:	
  white;	
  
	
  	
  	
  box-­‐shadow:	
  
	
   	
  	
  	
  inset	
  5px	
 ...
syntax:	
  	
  
!

box-­‐shadow:	
  
	
   inset	
  h-­‐shadow	
  v-­‐shadow	
  blur	
  spread	
  color;	
  
!

text-­‐shad...
spørsmål?

farger	
  |	
  gjennomsik1ghet	
  |	
  gradienter	
  |	
  skygger
Takk	
  for	
  meg!	
  
nydge	
  linker:	
   h^p://www.colorzilla.com/gradient-­‐editor/	
  
	
   	
   	
   	
   	
   	
  ...
Upcoming SlideShare
Loading in …5
×

Farger, opacity og gradients

375 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
375
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Farger, opacity og gradients

  1. 1. farger  og  sånt farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  2. 2. farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  3. 3. hvor  bruker  vi   farger? tekst,  bakgrunn,  rammer   og  omriss  og  kolonne-­‐skillelinje farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  4. 4. hvordan  bruker   vi  farger? color:  red   background-­‐color:  white   border-­‐le?-­‐color:  blue   farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  5. 5. hvordan  spesifiserer   vi  farger? farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  6. 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. 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. 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. 9. rgb(242,  230,  182) RGB  0-­‐255  presentert  som  desimal   ! har  fungert  siden  IE6 farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  10. 10. spørsmål? farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  11. 11. farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  12. 12. gjennomsik1ghet farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  13. 13. dekkevne   opacity farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  14. 14. vi  har  2  måter  å  gjøre  1ng   “gjennomsik1g”   ! opacity  på  elementer   alpha-­‐verdi  på  farger farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  15. 15. opacity:  1   opacity:  0.5   opacity:  0.1   farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  16. 16. div  {     background:  white;     color:  red;   } farger  |  gjennomsik1ghet  |  gradienter  |  skygger test
  17. 17. div  {     background:  white;     opacity:  0.2;     color:  red;   }   farger  |  gjennomsik1ghet  |  gradienter  |  skygger test
  18. 18. div  {     background:       rgba(255,255,255,0.2);     color:  red;   }   farger  |  gjennomsik1ghet  |  gradienter  |  skygger test
  19. 19. div  {     background:  url(diver.jpg);     color:  white;   } farger  |  gjennomsik1ghet  |  gradienter  |  skygger test
  20. 20. div  {     background:  url(diver.jpg);     color:  rgba(255,  255,  255,  0.5);   } farger  |  gjennomsik1ghet  |  gradienter  |  skygger test
  21. 21. rgba(rød,  grønn,  blå,  alpha)   rgba(255,  0,  0,  0.5) farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  22. 22. ne^leserkompa1bilitet farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  23. 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. 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. 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. 26. degrading  gracefully..   ! div  {     background:  #f0f0f0;     background:  rgba(255,255,255,  0.8);   }   ! ! ! ! ! farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  27. 27. spørsmål? farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  28. 28. farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  29. 29. gradienter farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  30. 30. div  {     background:       linear-­‐gradient(to  right,  red  0%,  #fb0  100%);   } farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  31. 31. div  {     background:       linear-­‐gradient(to  right,  red  0%,  #fb0  10%);   } farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  32. 32. div  {     background:       linear-­‐gradient(to  bottom,  red  0%,  #fb0  100%);   } farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  33. 33. div  {     background:       linear-­‐gradient(to  bottom,  black  0%,  red  50%,  black  100%);   } farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  34. 34. div  {     background:       linear-­‐gradient(135deg,  black  0%,  red  50%,  black  100%);   } farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  35. 35. div  {     background:       radial-­‐gradient(circle,  black  0%,  red  50%,  black  100%);   } farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  36. 36. syntax:     ! background:     linear-­‐gradient(direction,  color1,  color2,  …);   ! background:     radial-­‐gradient(center,  shape  size,       color1,  color2,  …); farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  37. 37. ne^leserkompa1bilitet farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  38. 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. 39. hæ?  må  vi  huske  det?! h^p://www.colorzilla.com/gradient-­‐editor/ farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  40. 40. spørsmål? farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  41. 41. farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  42. 42. skygger farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  43. 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. 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. 45. inset  shadow div  {     background:  white;        box-­‐shadow:          inset  5px  5px  10px             rgba(0,0,0,0.5);   }   farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  46. 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. 47. spørsmål? farger  |  gjennomsik1ghet  |  gradienter  |  skygger
  48. 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

×