farger og sånt farger | gjennomsik1ghet | gradienter | skygger
Jun 11, 2015
farger og sånt
farger | gjennomsik1ghet | gradienter | skygger
farger | gjennomsik1ghet | gradienter | skygger
hvor bruker vi farger?
farger | gjennomsik1ghet | gradienter | skygger
tekst, bakgrunn, rammer og omriss og kolonne-‐skillelinje
hvordan bruker vi farger?
farger | gjennomsik1ghet | gradienter | skygger
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 praksis ubrukelig 1l alt annet enn hvit og sort.
farger | gjennomsik1ghet | gradienter | skygger
hex: #ffaabb !
RGB 0-‐255 representert som hex !
rød = ff = 255 grønn = aa = 170 blå = bb = 187
farger | gjennomsik1ghet | gradienter | skygger
når alle tre parene består av to like, kan vi forkorte 1l #fab
!
sort: #000 hvit: #fff
farger | gjennomsik1ghet | gradienter | skygger
rgb(242, 230, 182)
farger | gjennomsik1ghet | gradienter | skygger
RGB 0-‐255 presentert som desimal !
har fungert siden IE6
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å farger
farger | gjennomsik1ghet | gradienter | skygger
farger | gjennomsik1ghet | gradienter | skygger
opacity: 1 opacity: 0.5 opacity: 0.1
farger | gjennomsik1ghet | gradienter | skygger
div { background: white; color: red; }
test
farger | gjennomsik1ghet | gradienter | skygger
div { background: white; opacity: 0.2; color: red; }
test
farger | gjennomsik1ghet | gradienter | skygger
div { background: rgba(255,255,255,0.2); color: red; }
test
farger | gjennomsik1ghet | gradienter | skygger
div { background: url(diver.jpg); color: white; } test
farger | gjennomsik1ghet | gradienter | skygger
div { background: url(diver.jpg); color: rgba(255, 255, 255, 0.5); } test
farger | gjennomsik1ghet | gradienter | skygger
rgba(rød, grønn, blå, alpha) rgba(255, 0, 0, 0.5)
ne^leserkompa1bilitet
farger | gjennomsik1ghet | gradienter | skygger
for li^ eldre ne^lesere bruker vi browser prefix !div { -‐moz-‐opacity: 0.5; // Firefox -‐webkit-‐opacity: 0.5; // Chrome, Safari -‐o-‐opacity: 0.5; // Opera -‐ms-‐opacity: 0.5; // IE opacity: 0.5; } !
farger | gjennomsik1ghet | gradienter | skygger
for li^ eldre IE bruker vi microso? filter !div { -‐moz-‐opacity: 0.5; // Firefox -‐webkit-‐opacity: 0.5; // Chrome, Safari -‐o-‐opacity: 0.5; // Opera -‐ms-‐opacity: 0.5; // IE opacity: 0.5; ! filter: alpha(opacity=50); // Eldre IE }
farger | gjennomsik1ghet | gradienter | skygger
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
degrading gracefully.. !div { background: #f0f0f0; background: rgba(255,255,255, 0.8); } !!!!!
farger | gjennomsik1ghet | gradienter | skygger
farger | gjennomsik1ghet | gradienter | skygger
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 | gjennomsik1ghet | gradienter | skygger
div { background: linear-‐gradient(to right, red 0%, #fb0 10%); }
farger | gjennomsik1ghet | gradienter | skygger
div { background: linear-‐gradient(to bottom, red 0%, #fb0 100%); }
farger | gjennomsik1ghet | gradienter | skygger
div { background: linear-‐gradient(to bottom, black 0%, red 50%, black 100%); }
farger | gjennomsik1ghet | gradienter | skygger
div { background: linear-‐gradient(135deg, black 0%, red 50%, black 100%); }
farger | gjennomsik1ghet | gradienter | skygger
div { background: radial-‐gradient(circle, black 0%, red 50%, black 100%); }
farger | gjennomsik1ghet | gradienter | skygger
syntax: !background: linear-‐gradient(direction, color1, color2, …); !background: radial-‐gradient(center, shape size, color1, color2, …);
farger | gjennomsik1ghet | gradienter | skygger
ne^leserkompa1bilitet
farger | gjennomsik1ghet | gradienter | skygger
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
hæ? må vi huske det?!h^p://www.colorzilla.com/gradient-‐editor/
farger | gjennomsik1ghet | gradienter | skygger
spørsmål?
farger | gjennomsik1ghet | gradienter | skygger
farger | gjennomsik1ghet | gradienter | skygger
skygger
farger | gjennomsik1ghet | gradienter | skygger
box-‐shadow
text-‐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); }
farger | gjennomsik1ghet | gradienter | skygger
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; }
mer enn en skygge?
farger | gjennomsik1ghet | gradienter | skygger
div { background: white; box-‐shadow: inset 5px 5px 10px rgba(0,0,0,0.5); }
inset shadow
farger | gjennomsik1ghet | gradienter | skygger
syntax: !box-‐shadow: inset h-‐shadow v-‐shadow blur spread color; !text-‐shadow: h-‐shadow v-‐shadow blur color;
farger | gjennomsik1ghet | gradienter | skygger
spørsmål?
farger | gjennomsik1ghet | gradienter | skygger
Takk for meg!
nydge linker: h^p://www.colorzilla.com/gradient-‐editor/ h^p://css3generator.com/ !
credits: h^p://diverfigurines.blogspot.com.es/