• CSS Sprites: Image Slicing’s Kiss of Death (A List Apart)
• The Mystery Of CSS Sprites: Techniques, Tools And Tutorials (Smashingmagazine)
• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them (CSS-tricks)

Jag tänkte gå igenom vad jag gjorde med CSS-sprites på den här sidan. Men först…

Vad är CSS-sprites?

CSS-sprites är inte nytt utan har funnits ett par år. Jag trodde från början att det hade att göra med JavaScript att göra i och med namnet sprite men det har ingenting att göra med JavaScript utan är bilder ihopbakade till en bild. Anledningen till att man lägger ihop alla bilder till en är att dra ner på laddningstiden av sidan och minska antalet HTTP-requests, dvs. för varje bild så måste webbläsare kontakta servern för att bilden ska kunna visas på webbsidan.

T ex till den här sidan använder jag några ikoner för kategori, kommentar, rss mm.

Alla dessa kan man lägga ihop till en bild och med hjälp av CSS-selektorn background-position kan man flytta bilden och visa endast den önskade ikonen. Med background-position anger man bildens startpunkt.

Under sökningen på Google fick jag även fram ett verktyg som gör automatiskt en CSS-sprite av de bilder man laddar upp, CSS Sprites generator. Dessutom får man varje ikons position i bilden.

CSS Sprites generator

Detta är dock ett väldigt enkelt verktyg och passar bra om man inte har för många bilder. Jag märkte att verktyget la ikonerna ovanpå varandra så om man hade haft 50 st ikoner så skulle bilden blivit en rätt lång bild. Då ska man nog fundera på att göra sina egna CSS-sprites i t ex Photoshop eller GIMP.

CSS-sprite

När man har sin CSS-sprite och vet varje ikons position är det dags att använda sig av bilden och applicera det på sin webbsida. I mitt exempel visar jag hur jag positionerade ut ikonerna vid kategori och kommentar under inläggets rubrik.

Ett litet tips är att kopiera positionerna man får från CSS sprites generator till en .txt-fil och spara den i en mapp på sin dator ifall man råkar glömma bort positionerna eller klicka bort webbsidan.

Utav min CSS-sprite fick jag följande positioner.

CSS sprites generator - Resultat

Men först lägger jag en grundkod som jag kan bygga på.

<dl>
    <dd class="category"><a href="#">Webdesign</a></dd>
    <dd class="comments"><a href="#">Lämna en kommentar</a></dd>
</dl>

Här skapar jag en definition lista. Varje element i listan har jag gett en särskild klass (kan även använda id). Dessa används när jag lägger till ikonerna.

För att detta ska fungera nu måste vi lägga en bakgrundsbild på <dd>-taggen, dvs. den CSS-sprite som vi skapade i generatorn. Så i stilmallen blir koden följande för <dd>

dd {
     background: url(images/css-sprite.png) no-repeat;
}

Härnäst ska vi lägga till första ikonen. För att visa ikonen för kategori tittar vi vilken plats den ligger på i bilden. Därefter går vi och tar samma plats i våran lista över bakgrundspositioner och skriver in de nummer som står där. (I mitt exempel ligger ikonen på 6:e plats)

dd.category {
    background-position: -16px -251px;
}

Med samma metod lägger vi till ikonen för kommentarer.

dd.comments {
    background-position: -16px -204px;
}

Nu återstår det att flytta texten åt höger så att texten inte ligger på ikonen. Det gör vi genom att lägga till padding (utfyllnad) på taggen <dd>.

dd {
   background: url(images/css_sprite.png) no-repeat;
   padding: 2px 0 2px 20px; /* (top, right, bottom, left) */
}

Eftersom ikonerna hade ursprungligen en bredd på 16px så valde jag att ge en vänsterutfyllnad på 20px så att det blir lite mellanrum mellan text och ikon.

För att elementen i listan ska ligga bredvid varandra istället för under så lägger jag till

display: inline;

på taggen <dd>.

Slutkoden blir följande:

dd {
    background: url("images/css_sprite.png") no-repeat;
    padding: 2px 0 2px 20px;
    display: inline;
}
dd.category {
    background-position: -16px -251px;
}
dd.comments {
    background-position: -16px -204px;
}

Resultatet av denna kod blir följande:

Resultat

Jag hoppas att detta har gett dig lite hjälp i att förstå hur CSS Sprites fungerar och hur man gör för att använda sig utav tekniken.

En verkligen intressant artikel om hur Chris Coyier arbetar. Han nämner många användbara tips som jag ska titta på vid ett senare tillfälle. Hoppas att jag kan lägga upp min dag på ett liknande sätt.

Depression12 forum

Forumet som jag har jobbat på till sidan www.depression12.se är snart klart och jag hoppas få ihop det under veckan. Det har tagit lite tid med designen och jag har fått översätta allt till svenska. Plus att jag fixade lite med koden. Nu ska jag enbart fixa till de andra sidorna på Depression12 då de behöver uppdateras lite och jag ska försöka förbättra den för sökmotorerna.

Det svåra med forumet var att förbättra strukturen. De som hade skapat forumet hade lagt bilder och filer tillsammans vilket jag tycker är lite fel. Bilderna ska ligga i en egen mapp enligt mitt egna tycke. Men men, alla har vi olika arbetssätt.

När jag är färdig med Depression12 kommer jag påbörja arbeta att programmera om min portfolio så att den blir bättre. Strukturera om lite bland sidorna och sätta vikten på uppdatering och sökoptimering samt marknadsföring.

Men nu blir det sängen för min del. Sov gott!

Säg gärna vad du tycker om designen!

Jag satt och fixade med depression12:s forum under julen. Tyvärr fick jag efter en hel dags arbete slänga allt. Det fungerade inte med kodningen när det gällde svenska bokstäver. Jag blev besviken efter allt jobb jag har gjort på det forumet. Nu var det bara att leta efter ett nytt forum att kunna modifiera. Egentligen hade det varit kul att skapa ett eget. Men eftersom jag inte har så stor databas och jag har så lite tid nu så får jag skippa det.
Jag har dock ändrat så att jag använder en databas istället för textfiler att spara foruminlägg och annat på.
Jag hittade forumet Quicktalk forum från sidan www.qt-cute.org. Det verkar rätt enkelt att designa om.

Men imorgon måste jag göra lite på mitt projekt i kursen organisationsteori. Det ska ju vara färdigt den 9 januari så det blir mycket att jobba denna veckan och nästa.

Ska titta på ett par avsnitt av CSI nu…

Gott Nytt År om jag inte skriver innan dess!

Men några element fick vara div-taggar då jag tyckte det gick bättre att designa dessa. Jag arbetade i Dreamweaver den här gången för att bli lite mer säkrare nu när jag undervisar i det. Men jag har fortfarande svårt för att använda Dreamweaver. Jag gillar det inte utan gillar att ha koll på koden själv. I Dreamweaver har man inte så mycket möjligheter och det rubbar mitt arbetsflöde.

Här nedan följer en liten bild på mitt designförslag den här gången. Den ligger även publicerad på Hair Fashion

Hair Fashion

Nästa designförslag ska vara inom temat sport.

Jag har gått över från HTML-Kit till Notepad++ då jag blev irriterade på HTML-Kit när det placerade alla fönster bredvid varandra när jag hade flera filer öppna. Notepad++ är betydligt bättre på det och använder flikar samt att Notepad++ har inte lika mycket funktioner att hålla reda på som i HTML-Kit. Dock har Notepad++ en miss. Jag får inte plugin:et filhanteraren att fungera. Den säger att det är fel version så just nu kör jag utan filhantering. Men jag håller fortfarande struktur på sidorna, vilket jag tycker underlättar arbetet en hel del.

Jag har anmält mig till informationsdag på Skatteverket här i Linköping om Starta eget. Jag hoppas att det kan ge något och förtydliga hur det fungerar det här med ekonomin då jag känner att där brister min kunskap. Jag sökte även en kurs i Företagsekonomi som jag hoppas att jag kommer in på trots att det var sen anmälan. (Nu kommer jag äta upp alla mina poäng hos CSN…)

Jag började även den sista delkursen i Programvarudesign denna vecka, Organisationsteori. Det verkar rätt intressant iallafall kring den personen jag läste om, Emile Durkheim. Hans teori om att vi alla är beroende av varandra och samhället är beroende av oss människor. Jag ska läsa lite mer om honom när jag hinner.

Nu ska jag stänga av för idag och titta på film. Imorgon måste jag fortsätta på en digital teckning och eventuellt börja på sportdesignen.

Första blicken vid C++ är att den känns svår jämfört med Java som jag har läst hela våren. Det är inga föreläsningar på kursen vilket gör det lite svårare men jag ska ändå försöka lära mej. Det finns alltid tutorials på Internet ifall jag inte lyckas få ihop det med kurslitteraturen.

Anledningen till att jag skriver är att jag håller på att designa om min portfolio, jotaprojects.se. Jag fick lite uppvaknande angående de senaste uppdragen jag har sökt att jag ligger lite efter med designbiten. Men för mej är det viktigt att sidan blir användbar och inte krånglig oavsett om man är synskadad eller använder sej enbart av tangentbord. Men jag har gjort några kompromisser också. Jag försöker utforska webbgrafik lite mera och hur man använder sej av bilder till t ex menyn och annat.
Här är det nuvarande jobbet: http://jotaprojects.se/testtabs (kommentera gärna)
Just nu är det bara index.html som jag har designat. Om jag får ihop den sidan så är resten utav sidorna fixade.

En annan tanke är att dela upp sidan och använda mej utav php för att göra sidan bättre och slipper ladda nytt för varje sida. Men än så länge kör jag på XHTML Strict 1.0 och CSS.

Jag ska även försöka få in bloggdesignen i samma design som portfolion så att det känns som man fortfarande är på samma sida. Nu känner jag att man kommer bort från min portfolio om man går in på bloggen.

Ska bara tipsa om andra sidor som en annan utvecklare jobbar på, http://www.minkarta.se/. Om du registrerar dej på minkarta.se så kommer du åt de andra sidorna, badkartan, wifikartan och sushikartan. Sidorna är bra ifall man behöver hitta ställen som rekommenderas av andra. Sidan i sej har många olika funktioner vilket jag tycker är bra och man har allt på ett ställe.

Jag har använt mig av temat Barracus water 1.1 by Ivan Garci. Jag gillade detta temat för att det var enkelt och framför allt enkla färger. Jag ville inte ha ett tema som det skriker i från sig. Det enda jag har ändrat på är loggan som jag har gjort om helt själv med hjälp av programmet jag nämnde i ett annat inlägg och även där sa jag att jag var extremt nöjd med loggan.
Det svåraste för min del var när vi skulle lägga in widgets till temat. Detta temat hade först inte en sidkolumn utan jag fick skapa en själv och det var lite trix innan den fungerade. Men när jag väl fick den att fungera valde jag att behålla temats inställningar angående de olika widgets som visas. Dessa la jag in i filen funcions.php som jag var tvungen att skapa när jag skulle få till en sidkolumn.

De plugins som jag har lagt till är:

• Confirgurable Tag Cloud (CTC)
• DDay, DDay Widget
• IM Online
• kPicasa Gallery

CTC gav en mera möjligheter att ändra storlek på texten och även färger samt så kunde jag styla den med hjälp av CSS som jag inte kunde har gjort om jag valt det default tags, vilket hade blivit lite tråkigt.

DDay är mer som en kul grej att ha på bloggen. Just i dessa tider också när det gäller julafton och nyår. Jag vet inte om jag kommer ha kvar det senare men det märks.

IM Online tyckte jag var en trevlig plugin då man kunde lägga upp om man var online på diverse IM-tjänster som YaHoo och MSN. Jag har enbart lagt upp min msn därav rubriken MSN Online.

Jag ville lägga till ett galleri också som jag har på mitt myspace och jag tittade först på ett plugin men det var så svårt att få att fungera så jag tog bort det och valde detta istället, kPicasa. Det hämtar sina galleri man har upplagt på Googles Picasa. Man får även möjligheten att lägga in länkar till galleri i ett inlägg på ett enkelt sätt som gallery[2]. Detta valde jag att lägga som en egen sida då det annars hade blivit för mycket på första sidan.

Det finns fortfarande lite att fixa med CSS och det är svårt när det är så många filer som man ska hålla koll på. Jag får se om jag får något rättsida på det.
Det var iallafall lite om vad jag har hållit på med under helgen.

70-expert-ideas-for-better-css-coding

Även Duckett’s bok kring XHTML och CSS är mycket bra för att lära sej stuktur kring CSS. Jag har haft otrolig nytta av hans böcker. Dock har jag väl utveckla min egna stil när det gäller hur man bygger upp CSS men den kanske inte är den bästa så jag testar mej fram vad som känns bäst.