CSS Menu

Deze tutorial zal ik laten zien hoe je een css menu maakt..
We maken (un-typical) list menu met behulp van de position waarde.

Hier is een overzicht van het menu (je kunt het downloaden als rar bestand).

overzicht

Achtergrond:

Open de Photoshop-bestand. Schakel alle layers uit behalve de achtergrond en logo en sla de achtergrond op als menu-bg.jpg.

background

Buttons:

Zet de achtergrond en logo layer uit en laat alleen de menu teksten zichtbaar.
Maak een rechthoekige selectie van de “home” knop, ga naar menu Edit > Copy Merged.

copy-merged

Maak een nieuw bestand en kijk naar de bestands dimensie (bxh), in mijn geval is “home” 82 x 40px.
Verdubbel de hoogte van het nieuwe bestand dus 82 x 80px.
Plak nu de afbeelding en plaats deze aan de onderkant. Dupliceer nu de laag en plaats dit aan de bovenkant.
Wis nu de omlijsting van de bovenste laag.

duplicate-layer

Herhaal deze stap voor de andere knoppen.

HTML code

We beginnen met het maken van een un-ordered list

Download Bestanden Bekijk Demo


Geplaatst

in

, , ,

door

Tags:

Reacties

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *