Gissa färgen

Detta var inte lätt. Jag har inte fått kläm på hur färgerna skrivs, varken med hex eller RGB format, så här är en chans att träna på http://leaverou.github.io/whathecolor/.

Whattc

Annonser

Byt ut #RGB mot HSLa i din CSS

Jag har aldrig riktigt förstått hur #RGB fungerar med färgerna.

Förutom att man kan skriva roliga färger:

 background-color: #BADA55;

Givetvis så fungerar det att skriva ut färgens namn:


background-color: black;

Men så såg jag en video på YouTube från Treehouse om HSLa och det var mycket lättare att förstå.


 background-color: hsl(192, 64%, 50%, .8);

HSLa bygger på en färgcirkel/färgruta

hsl(45, 100%, 50%);

workwithcolor

Lägg märke till att färgcirkeln kan gå åt båda håll.

H = Hue, färg, 0-360 (grader)

S = Saturation, mättnad, 0-100%

L = Lightness, ljushet, 0-100%

a = alpha, opacitet, 0-1 (valfritt)

HSLa - färger - cirkel

Testa HSLpicker.com

Eller Workwithcolor.com/hsl-color-picker-01.htm

Så var det det här med ie. Chris Coyier använder sig av en backup:

#dindiv {
background-color: hsl(192, 64%, 50%);
background-color: #2EB0D1;
}

För en snygg blå färg:

Fixa bilden direkt på webben

Så det får bli en till bloggpost om hur du enkelt fixar din bild på webben utan att gå via Gimp eller Photoshop.

Skall du skapa mera avancerade bilder eller göra speciella ändringar får du ta till lite grövre artilleri än nedanstående exepel, men skall du göra lättare ändringar duger dess utmärkt:

Fotoflexer.com

Pixlr.com/express – min favorit!

Ipiccy.com

Befunky.com

Picmonkey.com Påminner om Picnik

Photoshop.com/tools/expresseditor

Psykopaint.com en lite speciellare editor.

Saknar du Picnik.com det gör jag med 😦

Facebook timeline header

Man kan ha lite roligt med headern i Facebook.

Den består av två bilder, en stor 851 x 315px och en mindre på 160 x 160px.

Smart lösning av Aly Moffatt

I sin enklaste form kan u använda denna som mall:

Klicka på bilden och ”spara som” eller dra ut den på skrivbordet.

Profilbild:

Och om man lägger ihop de två bilderna så får du en typ av mall:

Tänk på att profilbilden sticker ut nedanför headern.

Så nu är det bara att komponera ihop en rolig, fräck, cool eller fräsig header!