am 23.02.2009 um 10:12 Uhr
Grafiken Flash HTML & CSS PHP & MySQL Javascript Fertige Skripte Anderes Statistik
|
|
Anzeigen
|
4x bewertet
Hi ich bin der SmaX und bin neu hier. Das ist mein 1. Tut und ich hoffe euch gefällts.
Ich will euch heute zeigen, wie man einfach triste weiße Textfelder ein bisschen schöner macht.
Den Code beginnen wir mit einem einleitenden Style-tag:
Jetzt kommt erst der eigendliche Css code mit dem wir die Textfelder bestimmen:
Schrift
Als erstes bestimmen wir die Schriftart;
Anschließend die Schriftgröße;
Dann noch die Schriftfarbe;
Abstand der Schrift zum Rand des Textfeldes;
Ihr könnt natürlich auch nur padding: 1px;
schreiben, dann wird für jede seite der gleiche Abstand übernommen. Falls ihr verschiedene abstände haben wollt, ist die Reihenfolge der Abstände so: oben, rechts, unten, links.
eigendliches Textfeld
Als erstes braucht das Textfeld einen Rahmen, den ihr natürlich
auch weglassen könnt;
Jetzt kommen noch die Hintergrundeigenschaften;
Bei url() könnt ihr ein Hintergrund-Bild einfügen, bei background-color die Hexcode-Hintergrundfarbe, background-position legt die Position des Hintergrundbildes fest, ihr könnt statt bottom auch top, center nehmen. Bei background-repeat könnt ihr wenn
das bild wiederhohlt werden soll, die art von wiederhohlung einstellen, repeat-x heißt, dass das Bild waagerecht wiederhohlt wird und repeat-y heißt dass das Bild senkrecht wiederhohlt wird.
Zum Schluss schließen wir den tag mit:
Hier nochmal der komplette Code:
Viel Spaß bei meinem Tutorial!
MfG SmaX
Ich will euch heute zeigen, wie man einfach triste weiße Textfelder ein bisschen schöner macht.
Den Code beginnen wir mit einem einleitenden Style-tag:
<style>
input, textarea{
Jetzt kommt erst der eigendliche Css code mit dem wir die Textfelder bestimmen:
Schrift
Als erstes bestimmen wir die Schriftart;
font-family:Arial;
Anschließend die Schriftgröße;
font-size:13px;
Dann noch die Schriftfarbe;
color:#0077CC;
Abstand der Schrift zum Rand des Textfeldes;
padding: 1px 1px 1px 1px;
Ihr könnt natürlich auch nur padding: 1px;
schreiben, dann wird für jede seite der gleiche Abstand übernommen. Falls ihr verschiedene abstände haben wollt, ist die Reihenfolge der Abstände so: oben, rechts, unten, links.
eigendliches Textfeld
Als erstes braucht das Textfeld einen Rahmen, den ihr natürlich
auch weglassen könnt;
border:1px solid #0071C1;
Jetzt kommen noch die Hintergrundeigenschaften;
background-image:url();
background-position:bottom;
background-repeat:repeat-x;
background-color:#1A1A1A;
Bei url() könnt ihr ein Hintergrund-Bild einfügen, bei background-color die Hexcode-Hintergrundfarbe, background-position legt die Position des Hintergrundbildes fest, ihr könnt statt bottom auch top, center nehmen. Bei background-repeat könnt ihr wenn
das bild wiederhohlt werden soll, die art von wiederhohlung einstellen, repeat-x heißt, dass das Bild waagerecht wiederhohlt wird und repeat-y heißt dass das Bild senkrecht wiederhohlt wird.
Bedenkt, das es auch größere Textfelder gibt, wenn ihr also ein Hintergrundbild erstellen möchtet, sollte es immer so groß wie das größte Textfeld auf euerer Seite werden, sonst wird das Bild wiederhohlt.
Wichtig!:
Zum Schluss schließen wir den tag mit:
}
</style>
Hier nochmal der komplette Code:
<style>
input, textarea{
font-family:Andale Sans;
font-size:13px;
border:1px solid #0071C1;
color:#0077CC;
padding:-1px -1px -1px -1px;
background-image:url();
background-position:bottom;
background-repeat:repeat-x;
background-color:#1A1A1A;
}
</style>
Viel Spaß bei meinem Tutorial!
MfG SmaX
4 Kommentare
Danke. Das ist toll <3
Nekoji
Hm, also mir sind da ein paar Mängel aufgefallen. Da solltest du vielleicht nochmal nach schauen.Zum einen ist der Titel etwas unpassend. Du erklärst ja nicht, wie man solche Felder definiert, sondern wie man sie mittels CSS stylen kann. Ich würde daher eher auf etwas wie "Formularfelder stylen" oder "Formularfelder formatieren" zurückgreifen.
Dann finde ich die Formulierung beim ersten Schritt etwas komisch. Schreibe statt "einleitenden Css/Html code" lieber "einleitender style-tag". Ebenso beim vorletzten Schritt. Dort statt "Zum Schluss schließen wir den Code mit:" einfach "Zum Schluss schließen wir den Tag mit:". Ist ja schließlich ein HTML-Tag und die richtigen Begriffe sind bei solchen Tutorials sehr wichtig.
Bei "... background-position und background-repeat können die Bildeigenschaften eingestellt werden" finde ich die Erklärung etwas knapp. Background-position legt die Position des Hintergrund-Bilder fest (top, center, bottom, left, right) und background-repeat legt fest ob das Hintergrund-Bild wiederholt werden soll, also repeat-x für horizontal wiederholen, repeat-y für vertikal wiederholen und no-repeat für nicht wiederholen. Wäre schön, wenn du das noch mit anfügst.
Als Schriftart würde ich eine der Standard-Schriftarten benutzen (Arial, Verdana, Tahoma, Times, Courier usw.). Wenn du andere Schriftarten verwenden willst, solltest du immer eine Ausweichschriftart angeben. Bei deinem Beispiel also so: font-family: Andale Sans, Arial, sans-serif;
Wenn du bei padding für jede Seite den gleichen Abstand hast, reicht folgende Schreibvariante: padding: 1px; Ansonsten schreibe noch dazu welche der vier Zahlen für welche Seite stehen (oben, rechts, unten, links), das wäre vielleicht noch wichtig für die Leser. In deinem Beispiel verstehe ich außerdem nicht warum du für den Abstand einen negativen Wert gewählt hast.
Ansonsten solltest du zu input und textarea noch das select-Feld ergänzen.
Wäre schön, wenn du das Tutorial nochmal ein wenig überarbeiten könntest. ;)
LG Nekoji
am 23.02.2009 um 15:02 Uhr
SmaX
Danke, Nekoji!Ich habe jetzt alle Fehler behoben!
Aber bei meinem ersten richtigen Tutorial kann das ja mal passieren
MFG SmaX
am 23.02.2009 um 19:50 Uhr
Nekoji
Freut mich, dass du es korrigiert hast! :)
am 24.02.2009 um 09:20 Uhr