Formulare stylen
Verleihe deinen Formularen Glanz mit CSS
Du willst aus schnöden Formularen wahre Kunstwerke erschaffen? Mit den richtigen magischen Sprüchen werden deine Eingabefelder, Buttons und Textbereiche zu funkelnden Juwelen. Ein Hauch von padding? Schon schweben die Inhalte sanft wie auf Wolken. Ein eleganter Rahmen? Schon sieht dein Formular aus, als wäre es in feinstes Pergament gehüllt. Und background-color? Damit webst du Farben ein, die deine Seite zum Strahlen bringen.
Hier lernst du, wie du mit einer Brise Magie deine Formularfelder verzauberst, bis sie vor Eleganz und Benutzerfreundlichkeit nur so glitzern. Jedes input-Feld ist eine kleine Herausforderung, aber mit den richtigen Zaubersprüchen machst du aus deinem Formular eine echte Augenweide!
Formulare im CSS
Stylen, optimieren, hervorheben – mach Eingaben benutzerfreundlich und schön!
Allgemeine Stile für Formulare
Nutze, was du gelernt hast
Rahmen und Abstände
Ein gutes Formular beginnt mit einem stabilen Rahmen, der wie die Wände einer Zaubererakademie alles zusammenhält. border sorgt für die Mauern, padding für die bequeme Inneneinrichtung, und margin hält neugierige Besucher auf Abstand.
Hintergrund, Farben und Schatten
Der Hintergrund ist die Leinwand für deine magische Schriftrolle. Mit background-color bestimmst du, ob die Stimmung mystisch, fröhlich oder dramatisch sein soll. Und color zaubert die Worte, die darauf tanzen.
Schriftarten und -größen
Keine epische Erzählung kommt ohne majestätische Schriftarten aus. font-family ist dein Zauberstab für Stil, während font-size dafür sorgt, dass selbst der Drache in der hintersten Höhle alles lesen kann.
Ausrichtung
text-align hilft dir, die Worte in Reih und Glied zu bringen. Und wenn Elemente ihre Position nicht finden, bringt vertical-align die Ordnung zurück.
Interaktionen
Mit den Zaubersprüchen :hover, :focus und :active bringst du deine Felder zum Leben. Ein Hauch von Magie, und sie leuchten, verändern sich oder laden zur Interaktion ein.
Übergänge und Animationen
Kein Magier tritt ohne Showeinlage auf. Mit transition gleiten Farben und Schatten sanft von einem Zustand in den nächsten, als würde ein Zauberer gerade ein Portal öffnen.
Flexbox und Grid für Layout
display: flex und grid-template-areas sind die Architekten unter den Zaubern. Sie richten alles aus und sorgen für ein harmonisches Zusammenspiel.
Formularfelder im Fokus
Aktiviere das magische Leuchten
Wenn ein Formularfeld vom Benutzer aktiviert wird, tritt der focus-Zustand in Kraft. Hier kannst du dein magisches Händchen zeigen und das Feld mit einem besonderen Glanz versehen. Ändere die Rahmenfarbe, den Hintergrund oder an-dere Stile, um es richtig hervorzuheben. Schließlich soll jeder wissen, dass dieses Feld jetzt im Rampenlicht steht!
input:focus {
border-color: orange;
background-color: black;
}Hier gestaltest du deine Inputs so, dass sie ihren Rahmen und Hintergrundfarbe im Focus-Zustand ändern.
Stilvolle Anweisungen
Gib dem Placeholder magische Eleganz
Der Placeholder-Text muss nicht unsicht-bar bleiben! Mit der Pseudoklasse ::placeholder kannst du ihn so gestalten, dass er sich elegant ins Design deiner Webseite einfügt. Farbe, Schriftart und Größe – all das liegt in deiner Macht. So wirkt der Placeholder wie eine flüsternde Stimme, die den Benutzer sanft leitet, ohne die Ästhetik deiner Seite zu stören.
input::placeholder {
color: #9e9e9e;
font-style: italic;
}Dieses Beispiel gibt dem placeholder-Text eine graue Farbe und eine kursive Schriftart
Type
Die geheime Magie der Input-Attribute
Mit den mächtigen Attributen der Input-Types entfesselst du gezielte Styling-Zauber. Mit input[type=“text“] zauberst du dein Styling nur auf Textfelder, ohne für jedes einzelne Feld eine spezielle Klasse zu benötigen. Diese präzise Magie gibt dir die Kontrolle, verschiedene Input-Felder wie type=“text“, type=“email“ oder type=“password“ gezielt zu gestalten, sodass jedes Feld die Aufmerksamkeit erhält, die es verdient – und dein Formular ein harmonisches Design ausstrahlt.
input[type="text"] {
padding: 10px;
border: 2px dotted #ccc;
border-radius: 5px;
background-color: purple;
color: white;
}Hier gestaltest du deine Texteingabefelder gezielt mit unterschiedlichen Stilen
In dieser Lektion hast du gelernt…
- Wie du mit CSS Formularfelder optisch gestaltest, indem du Rahmen, Abstände, Farben, Schriftarten und Hintergründe anpasst.
- Auf welche Weise du interaktive Effekte wie
:hover,:focusoder:activeeinsetzt, um deine Formulare lebendig und benutzerfreundlich zu machen. - Wie du den
::placeholder-Text elegant designst, um dezente Hinweise stilvoll in dein Formular einzubetten. - Wozu du die Input-Typen im Selektor verwendest, um gezielt unterschiedliche Formularfelder – z. B.
input[type="text"]– individuell zu stylen.
Hier siehst du den Code, den du gelernt hast – aber fühl dich frei, zu experimentieren! Probiere Änderungen aus, teste neue Ideen und sieh, was passiert. Das ist dein Raum zum Tüfteln!
Die verzauberte Schriftrolle
In einem verlassenen Winkel eines uralten Archivs liegt sie – die magische Schriftrolle, die einst die Geheimnisse der Waldhüter bewahrte. Doch wehe, wer sie ohne Sorgfalt behandelt! Nur wenn ihre Felder stilvoll gestaltet und bei Berührungen aktiviert werden, enthüllt sie ihre Inhalte. Deine Aufgabe: Verwandle Formularfelder mit CSS in wahre Kunstwerke. Lass sie schimmern, wenn der Mauszeiger sie streift, und erstrahlen, wenn der Fokus sie trifft. Selbst die Platzhalter sollten so ansprechend sein, dass selbst ein mürrischer Zauberer einen zweiten Blick riskiert.
Deine Aufgabe: Gestalte ein Formular
- Grundlegende Eingabefelder gestalten:
Verwende padding, border, border-radius, background-color, und color, um die Eingabefelder und das Textfeld zu gestalten. - Platzhalter (::placeholder) stylen:
Passe die Platzhalterfarbe an und verändere deren Transparenz, um sie optisch abzuheben. - Hover- und Fokus-Effekte anwenden:
Erstelle CSS-Regeln für :hover und :focus, um die Eingabefelder bei Interaktionen zu verändern. - Button-Gestaltung:
Verwende background-color und border-radius, um den Button zu gestalten, und füge einen Hover-Effekt hinzu.
Öffne Visual Studio Code und lasse diese Worte auf der Seite erscheinen. Oder probiere es direkt hier im Editor aus!
/* Grundlegende Gestaltung der Eingabefelder */
input[type="text"],
input[type="number"],
textarea {
width: 100%;
padding: 10px;
margin: 5px 0;
border: 2px solid darkgreen;
border-radius: 5px;
background-color: #f0f0f0;
color: black;
}
/* Platzhaltergestaltung */
input::placeholder,
textarea::placeholder {
color: grey;
opacity: 0.7;
}
/* Hover-Effekt */
input[type="text"]:hover,
input[type="number"]:hover,
textarea:hover {
border-color: green;
background-color: #e0ffe0;
}
/* Fokus-Effekt */
input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus {
border-color: darkblue;
background-color: white;
outline: none;
}
/* Button-Gestaltung */
button {
padding: 10px 20px;
background-color: darkgreen;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: green;
}