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

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