Ändra utseende på bilder med CSS

Författare: Tony Sundström Langlet

Datum: 2010-07-15

Nyckelord: CSS, Bilder, Xhtml, webbdesign.

Inledning

Vad menas med "Ändra utseende på bilder med CSS"?

Tanken med denna tutorial/guide är att förklara hur du kan ändra utseendet på en bild med hjälp utav olika knep. Jag kommer att visa olika tillvägagångssätt att ändra utseende på en bild med hjälp utav CSS.

Uppbyggnad utav Tutorial/guide

1. Jag börjar med att förklara hur vi kommer gå tillväga för att lägga in en bild.
2. Sedan hur vi kan ändra utseende på den på det lättaste sättet men kanske inte det bästa.
3. Därefter kommer vi gå igenom olika tekniker för att förbättra hemsidans prestanda vid ändring utav utseendet på en bild.

Syfte med Tutorial/guide

Till en början är denna guide en uppgfiten given från kursen Internetprogrammering 3 från Stockholms Universitet men den ska troligen publiceras på min hemsida till slut.

Tutorial/Guide

Steg 1: Implementera en bild

Jag börjar ganska simpelt med att stoppa in en bild på min sida. bilden är vid namnet "bild1"

Resultatet utav koden ovan:

Steg 2: Ändra bildens utseende med hjälp utav CSS

Under detta steg kommer jag gå igenom ett antal sätt som kan användas då vi vill ändra utseendet på en bild. Det finns antagligen ett flertal olika sätt som jag missar att ta med, men ideen med guiden är att förklara några ideer och därifrån kan användaren ta sig vidare och kanske tänka själv på nya sätt att utforska området.

Jag kommer att använda mig utav musens pekare som aktiverare för ändringen utav bilden. Detta kan simpelt göras med hjälp utav CSS:en och en funktion som heter "hover".

XHTML dokument

CSS dokument

Eftersom vi sätter bilderna som bakgrund på ett objekt inom CSS:n måste vi ange hur stora bilderna är för att hela bilden ska synas.

Resultatet utav koden ovan:

Steg 3: Implementera en bild i en lista

Jag kommer nu gå igenom hur vi kan använda oss utav en Lista för att få fram samma effekt som ovan. Detta används ofta i menyer och liknande.

Vi börjar med att titta på hur vi stoppar in bilder i en lista med hjälp av CSS "background" funktionen och jobbar oss därifrån.

XHTML dokument

CSS dokument

Resultatet utav koden ovan:

Som ni ser så är det ingen skillnad från föregående exempel för tillfället. Men det kommer mera. För att få in den effekten vi söker lägger vi lätt till ungefär samma kod som i tidigare exempel

CSS dokument

Resultatet utav koden ovan:

Nu använder vi oss utav två stycken separata bilder som vi hoppas imellan då vi drar muspekaren över bilderna. Vi kan göra detta på ett smidigare sätt och även spara utrymme på hemsidan. Vi kommer att återkomma till användningen utav listor i ett sammanfattande exempel i slutet.

Steg 4: Visa upp delar utav en bild

Under detta steg kommer jag att gå igenom hur vi kan visa upp vissa delar utav en bild vilket vi kommer använda oss utav lite senare i denna guide. Detta kan även vara intressant i andra syften än det som är tänkt med just denna guiden...

Vi börjar med att lägga till en bild och i detta falet har jag tagit en bild från en sida där dessa bilder kan användas som bakgrundsbilder för din dator. (Alla rättigheter tillhör Disney). Bilden lägger jag som en bakgrundsbild till ett objekt i CSS:n vilket vi kommer se i koden nedan.

Bildens storlek är 600x400 vilket kan vara bra att veta för nästa steg. På bilden nedan markerar jag det område som jag hade tänkt mig att visa upp. Först väljer jag en storlek på området som ska tas ut och sedan måste man fintjustera så att rätt område visas.

XHTML dokument

CSS dokument

Resultatet utav koden ovan:

Vi har nu gått igenom hur vi tar och visar upp delar utav en bild. Om vi skulle göra på detta sättet skulle det vara onösigt mycket utrymme som användes för att visa en sådan liten bild, vi använder 150x150 utav en bild på 600x400... Nu ska vi gå vidare med detta exempel och utnyttja det vi redan har använt.

Steg 5: Skapa en knapp som använder mindre utrymme

Jag har nu skapat en ny bild med knappar på som visas nedan. Vi kommer att visa ett annat område då muspekaren dras över knappen och en annan då den är i ett passivt stadie.

XHTML dokument

CSS dokument

Som du kan se fungera denna knapp som de tidigare exemplen, nu behöver vi dock bara en fil och denna filen tar även upp mindre plats på hårddisken.

Resultatet utav koden ovan:

Steg 6: Skapa en meny med det vi lärt oss

Denna del utav guiden kommer vi att lägga ihop allt det vi har lärt oss för att skapa ett meny/navigations -system. Detta kommer att ta upp mindre plats och även fungera ganska smidigt vad det gäller responstid till skillnad mot en del Javascript som kan ta ett litet tag att ladda om de är någorlunda stora.

Vi börjar med att skapa en horizontel lista som använder de bilder vi använt oss utav i de första exempel och gå därifrån. Vi skapar en lista med tre kolumner

XHTML dokument

Resultatet utav koden ovan:

Om vi nu lägger till det vi har lärt oss från det senaste exemplet och använder oss utav bild3.png så kommer koden att se ut följande.

CSS dokument

Resultatet utav koden ovan:

Fullständig kod för denna meny:

XHTML dokument

CSS dokument

Steg 7: Utveckling utav steg 6

Det finns flertal saker som går att ordna till för att få en ännu mindre filstorlek men detta kanske inte är värt tiden det tar att ordna. Jag tänkte visa här ett litet simpelt sätt att göra så att du slipper att skriva text till varje knapp utan istället använda dig utav List och Linkar.

Det första vi börjar med att göra är att ta bort texten som finns innuti knapparna och gör dem tomma som i exemplet nedanför.

Nu måste vi dock göra om lite i våran CSS kod och lite i XHTML koden för att vi ska kunna se texten och även för att den ska vara centrerad etc.

XHTML dokument

CSS dokument

1. Vi lägger till en klass till texten som kommer att skrivas för att kunna få till önskvärd effekt.

2. Vi börjar med att ta bort en kod rad under ".nav ul" där det stod "text-indent: -999em;", detta för att texten vi skriver i ruttorna ska synas

3. Vi tar sedan och lägger till "transparant" bakom bakgrund inställningarna för säkerhets skull.

4. Därefter lägger vi till en ny klass som heter .txt (vilket inte har något som helst med själva filformatet utan är en förkortning för text)

5. Denna klass lägger vi även till en :hover på så vi kan ändra färg på texten då en muspekare kommer över den, för att få till lite extra effekt.

Resultatet utav koden ovan:

Bild information

I första delen utav guiden använde vi oss utav två stycken filer med olika bilder i för att ändra utseendet medans vi i de sista stegen utav guiden använde oss utav en ihopsatt bild. Vi ska nu se skillnaden på dessa i storlek.

Steg	Antal filer	Filformat	Storlek	Storlek på HDD
Steg 1:	1	PNG	1.14KB	4.00KB
Steg 2:	2	PNG	2.64KB	8.00KB
Steg 5-7:	1	PNG	2.48KB	4.00KB

Som vi ser i tabellen så sparar du dubbelt så mycket utrymme på hårddisken då du använder dig utav den tekniken vi gjorde i de sista stegen. Annledningen till varför det tar upp mer utrymme på hårddisken än vad de egentligen gör är eftersom hårddiskar är uppdelade i kluster där den sparar informationen och varje sådant kluster är 4KB på ett vanligt NTFS system. Om du vill veta mer om NTFS klicka HÄR

Storleken kan variera från dubbelt så mycket till ännu mer om vi använder oss utav större filer. detta beror helt och hållet på kluster uppbyggnaden.

Slutord

Jag tackar för visat intresse och hoppas att min tutorial/guide har hjälpt dig/er att förbättra er hemsida och kanske även få er att se CSS på ett annat sätt.

Website