Artiklar » (X)HTML/CSS » CSS-sprite - Egna designade knappar

 
 

CSS-sprite - Egna designade knappar

Författare: mactommy
Datum: den 25 juli 2009
Antal lästa: 4600
Ej stjärnmärkt

Nu tänkte jag visa hur man kan designa upp egna knappar med CSS-sprite och till det så tänkte jag återanvända koden ifrån artikeln http://www.aspsidan.se/default.asp?page=readarticle&artId=666

Vi har en meny som ser ut så här, Kod:
<div id="menu">
  <h2>Meny</h2>
  <ul>
    <li><a href="start.aspx" title="Start">Start</a></li>
    <li><a href="sida1.aspx" title="Sida 1">Denna är längre än de andra</a></li>
    <li><a href="sida2.aspx" title="Sida 2">Sida 2</a></li>
  </ul>
</div>

Skillnaden mot tidigare är att "Sida 1" har fått en längre text, för att visa CSS-spritens möjlighet.

Återigen så kommer jag bygga min CSS-sprite utefter min "#menu" i min CSS-fil. Som ni kan se så har jag heller inte tillfört en enda class på mina HTML-element.

Vi börjar med att skapa våran design på knappen, jag har här valt att göra en så enkel knapp som möjligt eftersom det är ointressant att se en välsvarvad knapp i detta exempel.
Klicka för att se bilden i full skala...

Som ni kan se har jag placerat vänstra runden på en egen rad och höger på raden under. Jag har även valt att lägga en dublett så att vi ha möjlighet att lägga en blå eller orange knapp. Bilden är 1000px bred och det är den största bredden som våran knapp får ha är således 1008px. Jag har lagt möjlighet till 2st olika knappar till den enorma mängden av 1kB bild och en request mot servern. Om ni gör den mer avancerad så kommer den att växa, men fortfarande enbart vara en request.

Vi börjar med att formatera <ul>-elementet, Kod:
#menu ul
{
  list-style-type: none;
}

Det denna gör är att ta bort pluppen som är standardformateringen för <ul> listor. Det är faktiskt allt vi behöver göra på våran <ul>.

Vi kör vidare på våra <li>-element, Kod:
#menu ul li
{
  float: left;
  height: 17px;
  margin-right: 10px;
  background: transparent url(knapp.gif) no-repeat left -0px;
  padding-left: 8px;
}

Det som vi gör här är att lägga <li>-elementen med float: left; så att menyn hamnar på samma rad och efter varandra. Vi sätter en höjd utefter designade knappens och anger margin-right för att vi ska få mellanrum mellan knapparna, hur mycket är upp till er.
Det som nu följer är själva CSS-spriten, vi lägger ut bilden som en bakgrund som vi designade och visar raden med den vänstra rundningen. Vi anger padding i våran <li>-element för att länken inte ska börja dikt mot kanten på <li>:n. Lämpligt värde är bredden på rundningen och i mitt fall så är rundningen 8px bred.

Nu formaterar vi upp våran länk, Kod:
#menu ul li a
{
  display: block;
  height: 17px;
  padding-right: 8px;
  background: transparent url(knapp.gif) no-repeat right -18px;
  font-size: 12px;
  color: white;
}

Vi sätter våran länk till ett "block" för att få möjligheten att sätta höjden på <a>-elementet, detta för att den ska anpassas till våran designade knapp. Gör vi inte detta så funkar inte "height" på våran länk och typsnittets storlek är den som gör höjden. Vi sätter padding-right för att få samma mellanrum som vi har på vänster sida av rundningen, samma värde som från <li>-elementets padding-left: 8px;. Vi lägger ut samma bild, men väljer här att visa den nedre "blåa" raden, låst med utgångspunkt från höger. I <li>-elementet så utgick vi ifrån vänster del på bilden och den korta delen. Våra bakgrundsbilder är satta att de inte ska repeteras utan endast användas en gång, det gäller både <li>- och <a>- elementet.

Vi har nu skapat oss en liggande meny med knapp-rundningar som anpassar sig efter texten i våran länk, utan att ange en enda class i våran HTML-kod.

Varför jag har valt att ha en kort rundning och en lång är för att det är det bästa och lättast sättet att lösa egna designade knappar på.

Alla bilder som används i CSS:er bör placeras i samma bibliotek som själva CSS-filen. Det gör att ni aldrig behöver fippla med bibliotek i sökvägarna utan det räcker med att ange bildens namn. Bygger ni teman så kan ni t.ex. köra /css/tema1/ och /css/tema2/ där man lägger de färdiga CSS-filerna tillsammans med bilderna i tillhörande bibliotek och ifrån <head> ange hela sökvägen fram till CSS-filen. Bilderna plockas automatiskt upp ifrån samma bibliotek om man enbart angett bildens namn.

Vill man ha en designer som ska fixa något på sidan så kan man med lätthet skapa ett eget FTP-konto som gör att man enbart kommer åt /CSS/-mappen och dess undermappar och denne har då fritt att lägga till egna teman, bilder och CSS-filer utan att ta del av övrig kod på sidan.
 
     

  » Logga in  
 
Användarnamn

Lösenord

 
     

  » Bli medlem  
  Bli medlem på ASPsidan!  
     

     
  Microsoft  
     

  » Partners  
  Comsolvia  
     
  » ANNONS  
  ingen annons än  
     

  » Senast online  
  Endast för inloggade  
  Antal inloggade: 1  
     

Copyright © 2007 www.ASPsidan.se
ingen sponsrar längre ASPsidan med Dedikerad Server
ASPsidan RSS
   
 XHTML / CSS
Det tog 0,0625 sekunder att ladda sidan