SchreibMalWas

HTML Tastatur

"
C
S
S

Mit Hilfe von CSS lassen sich auf einer Webseite Texte, Blöcke, Wörter und sogar einzelne Buchstaben Designen.
Hier habe ich verschiedene Buchstaben der Computertastatur zuammengetragen und mit Hilfe von CSS designt.
In vielen Tuturials auf diversen Webseiten sieht man immer wieder, wie verschiedene Programme und deren Tastenkombinationen mit solchen Buchstaben erklärt werden. Viele verwenden hierzu Grafiken von den Buchstaben.
Dies muss nicht sein, denn es lässt sich schon mit ein wenig Zeilen CSS ein gewöhnlicher Div-Block mit einem Buchstaben darin zu einer Tasterturtaste umdesignen.
Hier der Code:
<style type="text/css">
.taste{
height:25px;
width:30px;
float:left;
-moz-border-radius: 3px;
border-radius: 3px;
font-family: sans-serif;
font-weight: bold;
background-color:rgb(200, 200, 200);
color:rgb(50, 50, 50);
text-align: center;
cursor:pointer;
border-right:6px solid rgb(80, 80, 80);
border-bottom:5px solid rgb(60, 60, 60);
border-left:2px solid rgb(160, 160, 160);
border-top:2px solid rgb(190, 190, 190);
}
.taste:hover{
border-right:4px solid rgb(80, 80, 80);
border-bottom:3px solid rgb(60, 60, 60);
border-left:4px solid rgb(160, 160, 160);
border-top:4px solid rgb(190, 190, 190);
}
br{clear:left}
</style>

<div class="taste">A</div>
In diesem Beispiel wird der Buchstabe A als Tasterturtaste dargestellt. Natürlich lassen sich auch Sonderzeichen darstellen, indem man den Unicode hierfür statt dem A eingiebt.
Es werden alle Div's mit der class="taste" automatisch mit diesem Code zu Computertastaturtasten formatiert.
Im Folgenden ein par weitere Beispiele:

Pfeile:
Pfeil nach Links

Pfeil nach oben

Pfeil nach rechts

Pfeil nach unten


...und so kann man eine ganze Tastatur erstellen:
°
^
!
1
"
22
§
33
$
4
%
5
&
6
/
7{
(
8[
)
9]
=
0}
?
ß
`
´

|⇐
⇒|
Q@
W
E
R
T
Z
U
I
O
P
Ü
*
+ ~

A
S
D
F
G
H
J
K
L
Ö
Ä
'
#

>
< ¦
Y
X
C
V
B
N
Mµ
;
,
:
.
_
-

Strg
■■
■■
Alt
[Leerzeichen]
Alt Gr
■■
■■
_
_
_
_
Strg


Mit ein wenig Javascript lassen sich damit dann auch Eingabefelder beschreiben.





Kommentare zu dieser Seite:
Kommentar von:31.03.2016 um 09:16 (UTC)
mein-kids-treff
mein-kids-treff
Offline

Cool



Kommentar zu dieser Seite hinzufügen:
Ihr Name:
Ihre Homepage:
Ihre Nachricht:

Sie sind der 28687 Besucher auf Schreibmalwas-homepagetools Statistiken
=> Willst du auch eine kostenlose Homepage? Dann klicke hier! <=
"