[HTML+CSS] Dynamische Buttons&Textfelder

~~business247~~ · 12/16/2011, 19:08

CSS Tutorial - Dynamische Buttons&Textfelder

In diesem Texttutorial möchte ich euch erklären, wie ihr eure Buttons&Textfelder dynamischer gestalten könnt.
Damit alles funktioniert solltet ihr folgendes tun:

-Erstellt euch einen neuen Ordner namens "XYZ".Anstatt "XYZ" könnt ihr den Ordner auch beliebig anders nennen.Ich habe nur XYZ geschrieben, damit es gleich anschaulicher ist.
-Erstellt eine index.html Datei
-Dann erstellt einen Unterordner namens css.In den Ordner css erstellt ihr wiederum eine styles.css , wo wir dann später unseren Style einschreiben werden.

Nun haben wir folgendes:

-Hauptordner "XYZ"
-index.html
-Unterordner css indem sich die styles.css befindet

Ich habe jetzt einfach mal eine kleine index.html mit 1x Textfeld und 1x Button erstellt

index.html

Code:

<html>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<form action="index.html" method=POST>
<fieldset>
<fieldset style="width:100px">
Text: <input type="text" name="name" class="label"><br>
<input type="submit" value="klicken" class="button">
</fieldset>
</form>

Wir haben jetzt 2 classes für den Style-Sheet erstellt.Einfach label für das Textfeld und einmal button für den submit-button.

styles.css

Code:

.label {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
}.label:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}.label:active {
	position:relative;
	top:1px;
}

.button {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2e8cff), color-stop(1, #1c5cff) );
	background:-moz-linear-gradient( center top, #2e8cff 5%, #1c5cff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2e8cff', endColorstr='#1c5cff');
	background-color:#2e8cff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #ffffff;
	display:inline-block;
	color:#fffaff;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #000000;
}.button:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1c5cff), color-stop(1, #2e8cff) );
	background:-moz-linear-gradient( center top, #1c5cff 5%, #2e8cff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c5cff', endColorstr='#2e8cff');
	background-color:#1c5cff;
}.button:active {
	position:relative;
	top:1px;
}

Wenn ihr jetzt alles gespeichert habt und die index.html öffnet solltet ihr sehen, dass das Textfeld und der Button anders aussieht als sonst viel "dynamischer".
Die Farben könnt ihr selbstverständlich ändern.Ich hoffe ich konnte euch mit dieses Tutorial helfen.

Ich würde mich sehr über euer Feedback und ggf. einem Thanks freuen.

Lg.

NotEnoughForYou · 12/19/2011, 18:55

Code teilweise invalide.

MKD_BoY · 12/16/2012, 17:57

Like it!

Unleashed! · 12/28/2012, 00:40

Der Code ist nicht nur teilweise invalide, die index.html wird so wahrscheinlich nicht mal richtig laufen, <html> wird nirgends geschlossen, <head> sowie <body> -Tags fehlen komplett, viele der CSS Befehle werden nur in den neuesten Browsern funktionieren und auch hier nur teilweise. Ansonsten frag ich mich, was sowas in dieser Section zu suchen hat, für sowas braucht man doch kein Tutorial, wenn man sich einigermaßen damit beschäftigt?