In deze tutorial leer je een sprite maken, en we duiken ook gelijk in het technische gedeelte waarmee we met CSS en XHTML een spectaculair hover effect gaan maken.
De onderstaande afbeelding gaan we gebruiken als sprite.
Sla deze op, of maak zelf een vergelijkbare sprite van 400 x 100 pixels.
De HTML ziet er als volgt uit:
Zoals je mischien al gezien had, maken we gebruik van een unordered list.
De anchors in de list items gaan we nu opmaken door middel van CSS.
Eerst verwijderen we de margin en de padding van #menu, hierna zetten we de list-style-type op none, zodat het opsommingsteken niet meer te zien is.
In deze stap verwijderen we opnieuw de margin en padding, dit keer van de list items in #menu.
Ook maken we de span onzichtbaar zodat de tekst niet over de achtergrond afbeelding valt.
Het laatste wat we toevoegen is het hover aspect.
Als de muis over de li gaat, verschuift de achtergrond 50 pixels omlaag.
De stylesheet ziet er nu als volgt uit:
Als het goed is veranderd de knop, zodra je er overheen gaat van kleur.
Is dit niet het geval, of heb je vragen of opmerkingen?
Laat dan even een reactie achter!
Bekijk de demo
Download de bestanden
De onderstaande afbeelding gaan we gebruiken als sprite.
Sla deze op, of maak zelf een vergelijkbare sprite van 400 x 100 pixels.
De HTML ziet er als volgt uit:
<ul id="menu">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Home</span></a></li>
</ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Home</span></a></li>
</ul>
Zoals je mischien al gezien had, maken we gebruik van een unordered list.
De anchors in de list items gaan we nu opmaken door middel van CSS.
#menu {
margin: 0px;
padding: 0px;
list-style-type: none;
}
margin: 0px;
padding: 0px;
list-style-type: none;
}
Eerst verwijderen we de margin en de padding van #menu, hierna zetten we de list-style-type op none, zodat het opsommingsteken niet meer te zien is.
#menu li {
margin: 0px;
padding: 0px;
}
#menu span {
display: none;
}
margin: 0px;
padding: 0px;
}
#menu span {
display: none;
}
In deze stap verwijderen we opnieuw de margin en padding, dit keer van de list items in #menu.
Ook maken we de span onzichtbaar zodat de tekst niet over de achtergrond afbeelding valt.
#menu li a {
width: 400px;
height: 50px;
display: block;
background-image: url('sprite.jpg');
}
width: 400px;
height: 50px;
display: block;
background-image: url('sprite.jpg');
}
Het laatste wat we toevoegen is het hover aspect.
Als de muis over de li gaat, verschuift de achtergrond 50 pixels omlaag.
#menu li a:hover {
background-position: 0px -50px;
}
background-position: 0px -50px;
}
De stylesheet ziet er nu als volgt uit:
#menu {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
margin: 0px;
padding: 0px;
}
#menu span {
display: none;
}
#menu li a {
width: 400px;
height: 50px;
display: block;
background-image: url('sprite.jpg');
}
#menu li a:hover {
background-position: 0px -50px;
}
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu li {
margin: 0px;
padding: 0px;
}
#menu span {
display: none;
}
#menu li a {
width: 400px;
height: 50px;
display: block;
background-image: url('sprite.jpg');
}
#menu li a:hover {
background-position: 0px -50px;
}
Als het goed is veranderd de knop, zodra je er overheen gaat van kleur.
Is dit niet het geval, of heb je vragen of opmerkingen?
Laat dan even een reactie achter!
Bekijk de demo
Download de bestanden
Reacties
Own Identity
Geplaatst op: 2 oktober 2009, om 09:18 uurBedankt Peter, het is aangepast!
Peter
Geplaatst op: 1 oktober 2009, om 12:39 uurDe css code die je in deze tutorial geeft is anders dan die in je bron bestanden.
De bron werkt, dit op de site niet.
Reactie plaatsen