Farger, opacity og gradients

farger og sånt

farger | gjennomsik1ghet | gradienter | skygger


hvor bruker vi farger?


tekst, bakgrunn, rammer og omriss og kolonne-‐skillelinje

hvordan bruker vi farger?


color: red background-‐color: white border-‐le?-‐color: blue

hvordan spesifiserer vi farger?


fargenavn: crimson !

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

!

i praksis ubrukelig 1l alt annet enn hvit og sort.


hex: #ffaabb !

RGB 0-‐255 representert som hex !

rød = ff = 255 grønn = aa = 170 blå = bb = 187


når alle tre parene består av to like, kan vi forkorte 1l #fab

!

sort: #000 hvit: #fff


rgb(242, 230, 182)


RGB 0-‐255 presentert som desimal !

har fungert siden IE6

spørsmål?



gjennomsik1ghet


dekkevne opacity


vi har 2 måter å gjøre 1ng “gjennomsik1g”

!

opacity på elementer alpha-‐verdi på farger



opacity: 1 opacity: 0.5 opacity: 0.1


div { background: white; color: red; }

test


div { background: white; opacity: 0.2; color: red; }

test


div { background: rgba(255,255,255,0.2); color: red; }

test


div { background: url(diver.jpg); color: white; } test


div { background: url(diver.jpg); color: rgba(255, 255, 255, 0.5); } test


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

ne^leserkompa1bilitet


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; } !


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 }


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); } !!!!!


degrading gracefully.. !div { background: #f0f0f0; background: rgba(255,255,255, 0.8); } !!!!!



spørsmål?



gradienter


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


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


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


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: radial-‐gradient(center, shape size, color1, color2, …);


ne^leserkompa1bilitet


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 );


hæ? må vi huske det?!h^p://www.colorzilla.com/gradient-‐editor/

http://www.colorzilla.com/gradient-editor/


spørsmål?



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); }


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?


div { background: white; box-‐shadow: inset 5px 5px 10px rgba(0,0,0,0.5); }

inset shadow


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


spørsmål?


Takk for meg!

nydge linker: h^p://www.colorzilla.com/gradient-‐editor/ h^p://css3generator.com/ !

credits: h^p://diverfigurines.blogspot.com.es/

http://www.colorzilla.com/gradient-editor/

http://css3generator.com/

http://diverfigurines.blogspot.com.es/

Technology

Farger, opacity og gradients