Bei Eingabefeldern (z.B. in Formularen oder bei der Suche) ist es sinnvoll, einen optischen Effekt zu erzeugen, sobald der Nutzer das Input-feld anklickt. Mit Hilfe von CSS box-shadows kann man diesen Effekt sehr schön erreichen und sogar einen richtigen Leuchteffekt erzeugen. Im Artikel erkläre ich noch einmal kurz, wie die CSS box-shadow Eigenschaft funktioniert. Außerdem habe ein Beispiel (mit CSS Angaben und Demo) erstellt, um den Effekt noch einmal zu verdeutlichen.

1. CSS box-shadow kurz erklärt

Es gibt zwei Varianten der CSS-Eigenschaft box-shadow: Schatten nach außen und Schatten nach innen. Standardmäßig wird der Schatten nach außen angezeigt.

Schatten nach außen

CSS box-shadow

Du musst die folgenden Werte im Stylesheet angeben:

[php]
box-shadow mit Hex-Farbwert:
-webkit-box-shadow: 0px 4px 10px 4px #999;
-moz-box-shadow: 0px 4px 10px 4px #999;
box-shadow: 0px 4px 10px 4px #999;
[/php]

Und für einen box-shadow mit RGBA-Farbwert:

[php]
-webkit-box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.3);
box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.3);
[/php]
Erklärung der Angaben:
  1. horizontaler Versatz des Schattens (positiver und negativer Wert möglich)
  2. vertikaler Versatz des Schattens (positiver und negativer Werte möglich)
  3. Stärke der Unschärfe (blur)
  4. Ausweitung des Schattens (spread)
  5. Farbwert oder RGBA-Wert. Bei RGBA ist der letzte Wert die Transparenz (alpha) und liegt zwischen 0.1 und 1.
Schatten nach innen (inset)

In der Variante „inset“ für box-shadow wird der Schatten nach innen angezeigt.

CSS box-shadow
CSS box-shadow mit inset-Wert

Im Stylesheet sieht der box-shadow mit inset dann so aus:

[php]
-webkit-box-shadow: inset 0px 4px 8px 2px , 0.4);
-moz-box-shadow: inset 0px 4px 8px 2px , 0.4);
box-shadow: inset 0px 4px 8px 2px , 0.4);
[/php]

Mit Hilfe des Online-Tools CSS3 Generator kannst du dir übrigens deinen CSS-Code praktisch erstellen lassen. Über die Live-Vorschau kannst du deinen Schatten direkt überprüfen.

Im Artikel über CSS box-shadow bei CSS-Tricks findest du auch eine Fallback-Lösung für dein Internet Explorer.

2. Input-Feld mit CSS box-shadow und Gloweffekt

Für die Erstellung von Eingabefeldern kannst du den box-shadow sehr schön verwenden, vor allem wenn du bei der CSS Pseudoklasse :focus den Wert des box-shadows änderst. So wird dem Nutzer des input-Feldes sehr benutzerfreundlich verdeutlicht, in welchem Feld er sich gerade mit der Maus befindet. Hier ein Beispiel:

Der CSS-Code für das Beispiel Input-Feld:

[php]
input {
width: 260px;
margin:30px 30px 40px;
padding: 10px 5px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 1px solid #cfcfcf;
-webkit-box-shadow: inset 0 0 4px 2px rgba(0,0,0, 0.1);
-moz-box-shadow: inset 0 0 4px 2px rgba(0,0,0, 0.1);
box-shadow: inset 0 0 4px 2px rgba(0,0,0, 0.1);
}
input:focus {
outline:0;
border:1px solid #95D2DF;
-webkit-box-shadow: 0 0 5px 4px rgba(36,184,194, 0.10);
-moz-box-shadow: 0 0 5px 4px rgba(36,184,194, 0.10);
box-shadow: 0 0 5px 4px rgba(36,184,194, 0.10);
}
[/php]

Zusätzlich zur box-shadow Eigenschaft, die im Beispiel bei :focus von innen nach außen wechselt, habe ich im Beispiel noch den Rahmen (border) des Eingabefeldes bei :focus in einer blauen Farbe angepasst. So wird der Effekt sogar noch deutlicher.

Ich hoffe dir gefällt dieses kleine CSS-Beispiel und du kannst den Code für deine eigenen Programmierung gebrauchen. Wenn du weitere schöne Beispiele für Eingabefelder mit box-shadow kennst oder hast du weitere Vorschläge, wie Inputfelder zusätzlich optimiert werden können? Über deiner Tipps freue ich mich sehr!