Windows Bevel met CSS

Info 
Door: Snessiram Moeilijkheidsgraad: 2/3
Views:16.116Reacties: 12(Bekijken)
  Log in om zelf te reageren
 Waardering:9.3/10 (4 stemmen)



In navolging van een Windows bevel effect door skralan voor afbeeldingen, hier eens hoe je het kan doen met css.

Windows bevel is het standaard 3d effect van knoppen in Windowsversies ouder dan winXP.

Het ziet er bijvoorbeeld zo uit:
http://www.websitemaken.be/item_pics/59.jpeg

Dit zijn de kleuren die we gaan gebruiken:
http://www.websitemaken.be/item_pics/56.jpeg#97FF92

http://www.websitemaken.be/item_pics/58.jpeg#6FBC6C

http://www.websitemaken.be/item_pics/57.jpeg#5E9E5A

http://www.websitemaken.be/item_pics/55.jpeg#487546

Hoe kan je dit nu in css doen?
We willen het gebruiken voor een menu (altans in dit voorbeeld, dit hoeft niet). We gaan dus gebruik maken van de html code a (link). We zetten in onze body een link, en we geven als class "menu".

<a class="menu" href="http://www.websitemaken.be">websitemaken.be</a>

Nu gaan we beginnen met het aangeven van de kleuren van onze knop. De achtergrond kleuren we #5E9E5A. Vervolgens is het tijd om de borders te kleuren. De bovenste en linkse border worden #97FF92, de onderste en rechtse #487546.
In onze css-code krijgen we het volgende:

a.menu
{
background: #5E9E5A;
border-left: 1px solid #97FF92;
border-top: 1px solid #97FF92;
border-right: 1px solid #487546;
border-bottom: 1px solid #487546;
}

Ziezo, onze knop is gereed voor gebruik. Nu kan je nog wel enkele elementen toevoegen om de knop wat mooier te maken. Zo geven we als tekstkleur wit (#FFFFFF) op, en geven we aan dat de tekst niet onderlijnd moet worden. (textdecoration: none;). Ook willen we graag wat ruimte tussen de border en de tekst, dit geven we aan met padding.

Onze css-code komt er nu zo uit te zien:

a.menu
{
background: #5E9E5A;
border-left: 1px solid #97FF92;
border-top: 1px solid #97FF92;
border-right: 1px solid #487546;
border-bottom: 1px solid #487546;
color: #FFFFFF;
text-decoration: none;
padding: 0 5px 0 5px;
}

Ziezo, nu ziet onze knop er mooi en degelijk uit!

Tijd voor een rollover effectje. Het rollover-effect bestaat erin de achtergrond te wijzigen in #6FBC6C. Dit doen we met volgende code:

a.menu:hover{background: #6FBC6C}

We moeten de overige opmaak niet herhalen, deze blijft dezelfde.

Nu we een rollover effectje hebben, willen we natuurlijk het effect van een knop bereiken, dus dat hij indrukt als we erop drukken. Dit doen we door gebruik te maken van a:active.
We wisselen de kleur van de bovenste en linkse border om met de onderste en rechtse border.
We verkrijgen volgende css-code:

a:active
{
background: #6FBC6C;
border-left: 1px solid #487546;
border-top: 1px solid #487546;
border-right: 1px solid #97FF92;
border-bottom: 1px solid #97FF92;
}

Nu kunnen we ten slotte nog aangeven wat de kleur moet zijn wanneer de link reeds bezocht is. Dit doen we door gebruik te maken van a:visited. Als achtergrondkleur kiezen we #6FBC6C. We maken dus de kleur van de reeds bezochte link dezelfde als de kleur van de rollover.
Hierdoor zal je geen verschil zien tussen de gewone knop en de rollover knop. Logisch, want beide hebben de zelfde kleur. Wil je dat je wel nog een rollover hebt, gebruik dan een andere kleur als background bij deze code.
Dit is de css-code die we verkrijgen:

a:visited{background: #6FBC6C;}

Dat zit erop, nog even de eindcode geven:

<html>
<head>
<style>
a.menu
{
padding: 0 5px 0 5px;
background: #5E9E5A;
border-left: 1px solid #97FF92;
border-top: 1px solid #97FF92;
border-right: 1px solid #487546;
border-bottom: 1px solid #487546;
color: #FFFFFF;
text-decoration: none;
}

a.menu:hover{background: #6FBC6C}

a.menu:active
{
background: #6FBC6C;
border-left: 1px solid #487546;
border-top: 1px solid #487546;
border-right: 1px solid #97FF92;
border-bottom: 1px solid #97FF92;
}

a.menu:visited{background: #6FBC6C;}
</style>
</head>
<body>
<a class="menu" href="http://www.websitemaken.be">websitemaken.be</a>
</body>
</html>

Uiteraard kan je de code nu nog naar wensen aanpassen, andere effecten verkrijgen enzovoort.

12 reacties
Help ik kan er niets van! Geplaatst op 07-07-2009 om 22:24
 

Regular
Mijn a.menu:active werkt wel maar als in de website naast de knop klik dan wordt hij weer normaal, hoe komt dit?
Kan ik op een of andere manier ervoor zorgen dat de knop aangeklikt blijft totdat er een andere knop aangekikt wordt?
Onbekend lid Geplaatst op 22-06-2006 om 18:39
 

Spammer
Thanks
Onbekend lid Geplaatst op 06-05-2006 om 13:17
 

Spammer
Het werkt zeer goed

Danku
Onbekend lid Geplaatst op 28-07-2005 om 23:27
 

Spammer
krijg je met de css eigenschap

border: 1px outset #333333;

niet hetzelfde? (alleen een andere kleur)
aRAchNiON Geplaatst op 06-04-2005 om 01:18
Avatar van aRAchNiON

Moderator
Quote:

Is wel raar hoor, zogauw ik de link op .nl zet dan doet de muisover het niet meer, wie legt mij uit hoe dat kan??????? Groetjes...................

op niet bestaande links negeren sommige browsers de a:hover

Pagina 1 2 3 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder