Welkom bij de Tweaking4All gemeenschapsforums!
Voor je gaat deelnemen, bekijk de Forum Regels!
Specifieke onderwerpen: Start het onderwerp met de naam van het programma of systeem.
Bijvoorbeeld “MacOS X – Jouw vraag“, of bijvoorbeeld “MS Word – Jouw Tip of Truc“.
Merk op: Omschakelen naar een andere taal zal niet werken als je een post aan het lezen bent aangezien er waarschijnlijk geen vertaling beschikbaar is.
Hier een voorbeeld hoe je eenvoudig met CSS een toetsenbord knop kunt maken.
In dit voorbeeld zet ik de tekst die op de knop moet worden weergegeven tussen HTML span tags, en dit mag op een willekeurige plaats in jouw tekst staan.
Zo kunnen we bijvoorbeeld een "Enter" toets weergeven (alles wat in de span staat werkt, dus zelfs een <i class="icon-xyz"></i> zoals je die ziet bij IcoMoon voorbeelden, bijvoorbeeld om de Windows toets te reproduceren):
<span class="keyboardkey">Enter</span>
Je kunt uiteraard ook andere HTML tags gebruiken, maar in dit voorbeeld gebruik ik de "span" tag omdat het een van de meest gebruikelijke is.
De CSS voor "keyboardkey" voor een dergelijke span ziet er dan zo uit:
span.keyboardkey { box-shadow: rgb(132 132 132 / 0.16) 1px 1px 4px 1px; text-shadow: none; font-weight: bold; margin-right: 4px; margin-left: 4px; font-family: Lucida Sans Unicode,Lucida Grande,sans-serif; font-size: 14px; padding: 0.2em 1em; border: 1px solid; border-color: #d6d6d6 #b4b4b4 #b4b4b4 #d6d6d6; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background-color: #F2F2F2; background-image: -moz-linear-gradient(top, #FCFCFC, #E0E0E0); background-image: -o-linear-gradient(top, #FCFCFC, #E0E0E0); background-image: -webkit-linear-gradient(top, #FCFCFC, #E0E0E0); background-image: linear-gradient(top, #FCFCFC, #E0E0E0); }
Dit genereert dan een knop zoals in dit voorbeeld:
Uiteraard zou je het argument kunnen maken dat toetsen niet bol staan, en je liever de knop ziet zoals hieronder:
Met een kleine CSS modificatie kun je ook dat bereiken (de kleuren in de dikke rode tekst zijn omgedraaid):
span.keyboardkey {
box-shadow: rgb(132 132 132 / 0.16) 1px 1px 4px 1px;
text-shadow: none;
font-weight: bold;
margin-right: 4px;
margin-left: 4px;
font-family: Lucida Sans Unicode,Lucida Grande,sans-serif;
font-size: 14px;
padding: 0.2em 1em;
border: 1px solid;
border-color: #d6d6d6 #b4b4b4 #b4b4b4 #d6d6d6;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #F2F2F2;
background-image: -moz-linear-gradient(top, #E0E0E0, #FCFCFC);
background-image: -o-linear-gradient(top, #E0E0E0, #FCFCFC);
background-image: -webkit-linear-gradient(top, #E0E0E0, #FCFCFC);
background-image: linear-gradient(top, #E0E0E0, #FCFCFC);
}