För någon vecka sedan skrev jag till Chris Coyier på CSS-Tricks och undrade vad han ansåg om min användning av CSS3 som jag använt på sidan för gradient m.m. Han tyckte det var mycket intressant och ville skriva en artikel om det på CSS-Tricks så jag slängde ihop något enkelt han kunde använda och här är det han skrev:  Speed Up with CSS3 Gradients.

I CSS3 kan man använda sig av olika gradient:

Firefox 3.6+
-moz-radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

Safari/Chrome
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

Exempel:

background-image: url(images/linear_bg.png);// fallback image
background-image: -moz-linear-gradient(100% 100% 180deg, #2F2727, #1a82f7) ;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)) ;

Fördelen med detta är att Firefox laddar inte bilden så du har en mindre bild att hämta och du kan få gradient att variera beroende på t.ex. storleken av en knapp(Menyn på Spathon.se använder sig av detta).

Dinwebb

Jag började för lite mer än en vecka sedan på webbyrån Dinwebb där jag jobbar som ”WordPress-geni” eller programmerare. Dinwebb ligger centralt i Stockholm vid stadion så det är enkelt att ta sig dit med cykel och det är bra arbetsmiljö med härliga människor.

Spathon.se

Tyvärr så har Spathon.se som webbyrå en pause som webbyrå men ska fortfarande bedriva lite kursverksamhet  i paddling under sommaren.  Här kommer det troligtvis att börja bloggas mer om wordpress och annat inom webbdesign.

CSS är det som bestämmer hur saker och ting ska se ut t.ex. vilken färg bakgund och text ska ha, höjd och bredd på olika delar mm.
CSS3 är kommande standard där det blir lättare för designers att skapa runda hörn och tonade bakgrunder mm utan att använda bilder.

Canvas är ett sätt att rita bilder med kod vilket går snabbare att ladda än en bild. De flesta webbläsare stödjer canvas utom Internet Explorer men jag har lagt in en vanlig bild som laddas istället då.

Om ni använder senaste Firefox eller Chrome så är det nästan inga bilder som behöver laddas så allt i designen i princip är CSS3 eller canvas som går mycket snabbare att ladda. Sidan är dessutom validerad HTML5 och får ett A i YSlow.

En webbläsare är det program du använder för att surfa, det program som visar denna sida. Om du inte vet vilken webbläsare du använder kan du ofta se längst upp antingen webbläsarens ikon eller namn och för att se version gå till ”hjälp” uppe i menyn så står det  t ex. ”Om Firefox”, ”Om Safari”.

Firefox

Firefox är den näst största webbläsaren efter internet explorer. Firefox är snabb, säker och det finns en massa tillägg som man kan installera så den passar dig bättre.
Jag rekommenderar starkt Firefox då jag själv använder den och alla jag har övertygat gillar Firefox bättre än sitt tidigare val.

Skaffa firefox

Chrome

Chromeär Googles webbläsare som växer snabbt i antalet användare.

Skaffa chrome

Safari

Safari är Apples webbläsare som ingår när du köper en mac.

Skaffa safari

Opera

Opera är  inte riktigt lika stor och bra som dom andra men tillräckligt stor för att man som webbdesigner måste ta hänsyn till den.

Skaffa Opera

Internet Explorer

Internet explorer är Microsofts webbläsare och ingår i alla Windows installationer och där med automatiskt den största men långt ifrån bra. IE som den ofta kallas har inte alltid följt W3C webbstandard så bra vilket gjort att webbdesigners måste lägga ner en massa tid på att det ska se lika bra ut i IE som det gör i dom andra som följer standarden.

Skaffa/uppgradera IE