Pagina1 van 1
Forum

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.





Deel:
Meldingen
Alles wissen

CSS - Hoe maak je een toetsenbord knop met CSS


 Hans
(@hans)
Noble Member Admin
Deelgenomen: 8 jaar geleden
Berichten: 1774
Topic starter  

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);
}

 


BeantwoordenCiteren
Onderwerp trefwoorden

Bevalt je wat je hier ziet, en wil je graag helpen? 

Uiteraard is de beste manier van helpen, door anderen hier te helpen met hun vragen. Maar je kunt ons ook op andere manieren helpen:

- Shop bijvoorbeeld bij Amazon, het kost je niks extra, maar het kan zijn dat wij een kleine commissie ontvangen,
- stuur me een koffie via PayPal ($5, $10, $20, or zelf kiezen),
- je kunt ook een Patreon worden,
- of BitCoin (BTC), of BitCoinCash (BCH) doneren.

Deel: