30 bra (bästa) tilläggen för chrome

CSS_shack

30 Chrome extensions for designers and devs

Annonser

Prefix free och webbläsaren Chrome

prefixfree

Jag skulle testa några av de nya css3 tricken som finns och då fastnar man lätt i prefix geggan. -webkit- , -moz- …

Därför finns prefix-free! Men! Jag slet mitt hår i går kväll, när jag inte fick det att fungera. Anledningen var att prefix-free inte fungerar i Chrome lokalt (om du inte tar till något knep). Så tänk på det och gör inte samma misstag som jag. Men använd prefix-free!

CSS3 Media Queries

Anpassa din sida med CSS3 Media Queries.

Det finns många skärmar idag, och många olika upplösningar.

Ett sätt att lösa det problemet är att använda media queries.

Det finns flera alternativ och trix.

Jag har gjort ett enkelt exempel på codepen.io/anon/pen/uADnc.
Öka och minska bredden på webbläsaren.

Mycket mer finns att läsa i denna fina artickel.

Exempel finns på http://mediaqueri.es/.

CSS3 box-sizing

En sak som du skall få grepp om är boxmodellen:

Lek med olika marginaler, borders och padding, så att du känner att du förstår den.

Som du ser så är den totala bredden på boxen/div = bredd+padding+border, vilket kan ge vissa bekymmer.

Om du vill kan du få padding och border att ta upp plats INNE i boxen med hjälp av box-sizing: border-box.

Se skillnaden på denna Codepen.

Läs mer på css-tricks.com/box-sizing.

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: