CSS-Tipp: Inputfelder mit CSS box-shadow und Leuchteffekt

von

Ellen Bauer

•

29. August 2011

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:

horizontaler Versatz des Schattens (positiver und negativer Wert möglich)
vertikaler Versatz des Schattens (positiver und negativer Werte möglich)
Stärke der Unschärfe (blur)
Ausweitung des Schattens (spread)
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 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!

von

Ellen Bauer

Coding, CSS

Kommentare

David

•

29. August 2011

Antworten

Der Screenshot für „Schatten nach innen“ zeigt denselben Screenshot wie für „Schatten nach außen“, oder? Ansonsten: danke für den Artikel, wie so häufig hier sehr fein!
Matthias

•

29. August 2011

Antworten

Wieder ein praktischer Artikel, der mir gerade recht kommt.
Marco

•

30. August 2011

Antworten

Vielen Dank einmal mehr!
Gerade auch der Link zum CSS3 Generator gefällt mir. So kann man mal eben …
Leider wird sich mein größtes Problem nicht lösen: ich kann mir einfach die Parameter für bestimmte CSS-Regeln nicht merken. Das bedeutet also, dass jedes Mal wieder irgendwo nachgesehen werden muss. Der Generator macht es einem einfach, auf die Schnelle code zu erzeugen, fördert aber vermutlich das Vergessen. Das ist wie mit den Telefonnummern im Handy. Die merkt man sich ja auch kaum noch, denn das Handy kennt sie ja. Aber ich schweife ab ….

Ich habe da mal eine Frage. Es gibt viele schöne Möglichkeiten, was man mit HTML5 und CSS3 so anstellen kann. Ältere Browser habe damit aber ja bekanntlich Probleme. Gerade im Hinblick auf CSS3, setzt Du bei Deiner Arbeit auf Fallbacks, so dass jeder Browser nach seinen Möglichkeiten die Seite darstellen kann, auch wenn ein paar Effekte fehler, oder sagst Du, alles was nicht mind. IEx wird einfach n icht mehr bedient? Wo ist die Grenze?
1. Sascha Fuchs
  
  •
  
  30. August 2011
  
  Antworten
  
  Bin zwar nicht Ellen schreib dennoch :)
  
  Vorteil der Generatoren du bekommst ein schnelles Feedback wie es ungefähr aussehen wird. Damit kann man gerade am Anfang einfach spielen. Die Syntax hat man relativ leicht im Kopf.
  
  Das Knifflige ist die eigentliche Pflege, da man für viele CSS3 Features auf die proprietären Browsertags zurückgreifen muss. Damit erhöht sich der Pflegeaufwand.
  
  Will man viel mit CSS3 arbeiten; empfiehlt es sich daher auf eine CSS Metasprache wie SASS/Compass oder LESS auszuweichen, damit reduziert sich der Pflegeaufwand und du vergisst die Syntax nicht.
  
  http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ Damit kannst du im Bedarfsfall auf zusätzliche IE Klasse im Stylesheet zugreifen (ohne Starhacks oder externen CSS Dateien) und im Falle von Boxshadows noch Borders hinzufügen – damit IE das Feld auch noch anzeigen kann.
  
  Eleganter wird es dann mit Hilfe von Javascript über dem Weg kann man der IE Family einige CSS3 Geschichten beibringen. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills weiter unten da findest du JS Fallbacks für CSS3 Features.
  
  Da muss man aber genau abwägen wie weit man gehen will, weil das eben auch Zeit kostet. Gerade wenn auf dem Gebiet der CSS Polyfills die Erfahrung fehlt – ich bin bei der ersten Verwendung von CSSPie förmlich ausgerastet weil es auf dem Kundenserver ums Verrecken nicht laufen wollte :)
  
  Es ist halt abhängig vom Budget, vom Kunden und dessen Zielgruppe. Ich kam selbst schon in die Situation dass ich Boxshadows wieder ausbauen musste, mein Kunde bestand darauf dass der IE6 das genauso darstellt wie Firefox. Da flog Boxshadow raus und alle Browser wurden mit Borders bedient. Ein anderer Kunde ist damit völlig zufrieden dass seine Seite auf modernen Browsern einfach moderner wirkt.
  
  IE7 würde ich heute als Grenze hernehmen, will ein Kunde IE6 Optimierungen dann nur gegen einen saftigen Aufschlag.
2. Ellen
  
  •
  
  1. September 2011
  
  Antworten
  
  @Marco, @Sascha Fuchs,
  
  schaut doch einmal meinen neusten Artikel an, da habe ich das Thema auch noch einmal aufgegriffen: https://www.elmastudio.de/css/diskussionsanregung-sollte-man-html5-und-css3-heute-schon-in-webseiten-projekten-einsetzen/
  
  Viele Grüße,
  Ellen
Albi

•

30. August 2011

Antworten

Also ich hätte jetzt als i-Tüpfelchen das ganze noch animiert mit CSS Animationen :-)
Grandy

•

30. August 2011

Antworten

Hallo Ellen,

versuch mal eine CSS3 Transition dazuzumachen, dann hast bischen wie die Buttons im neuen Firefox (unter Windows =P) ist sicher auch cool:

input {
box-shadow: inset 0 0 4px 2px rgba(0,0,0, 0.1), 0 0 0px 0px rgba(36,184,194, 0.1)

transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
…
}
input:focus {
box-shadow: inset 0 0 0px 0px rgba(0,0,0, 0.1), 0 0 5px 4px rgba(36,184,194, 0.1);
}

Ich habs jetzt nicht probiert, aber ich denke du musst immer beide Shadows angeben so wie oben, sonst wirds warscheinlich nicht klappen ;)
1. Julian
  
  •
  
  31. August 2011
  
  Antworten
  
  Danke für den Beitrag und die Hinweise auf die Animation, direkt mal testen.
Timm

•

1. September 2011

Antworten

Schade, das dieses CSS3-Hacks nicht w3c-konform sind. Und wenn ich daran denke, dass das alles erst 2014 integriert und genehmgt sein soll ..
Schade, ich würde gerne die neuen Möglichkeiten voll ausnutzen können. Dazu kommt noch das immer eine Kompatibilität zum IE hergtellt werden muss.

Naja. Es wird noch viel Wasser den Fluss herunterfließen müssen, bis der Traum einer einheitlichen Kompatibilät Wirklichkeit wird.

So lange „Fehler“ auf dem Blog abgewertet werden, werde ich wohl auf die Neuerungen verzichten müssen.

Derweil bietet CSS3 so viele Möglichkeiten, die ich gerne nutzen würde.

LG
Timm
Klaus

•

7. September 2011

Antworten

Die Inputfelder mit Leuchteffekt habe ich auf meiner Website bei dem Kontaktformular auch realisiert. Ich finde den Effekt sehr schön, habe habe allerdings noch zusätzlich den Effekt bei hover umgesetzt.
So sieht der Bediener den Effekt bereits beim Überfahren mit der Maus.

Herzliche Grüße
Klaus
Alex

•

25. Oktober 2012

Antworten

Hallo,

sehr cooles TUT. Gibt es die Möglichlkeit das auch für den IE zu realisieren?

Ich habe noch den htc-Hack eingebunden, somit hab ich ja schon mal runde Ecken, aber den Farbeffekt abe ich nicht hinbekommen

Gruss

Alex
compot

•

2. Januar 2013

Antworten

Hallo, aber ich hab zwei Vorschläge zum Verbessern:
A) Box-Shaddow:
Gut, dass hier Screenshots zeigen, worum es geht – zu viele Seiten von Besserwissern haben das nicht gerafft und zwingen einen zeilenweise Codemüll zu analysieren, bevor man weiss, was dabei rauskommt.
Noch besser wäre, die geweigten Parameter-Felder wären interaktiv zu bedienen!

B) „2. Input-Feld mit CSS box-shadow und Gloweffekt“
Hier funzt weder in FF17 oder Opera 12 die Vorschau, nur ein einfaches Rechteck mit blauem 1px-Rahmen ist zu sehen – ohne Shadow und Gloweffect.

C) Code-Beispiel:
Die Zeielnnummerierung sieht ja ganz professionell aus, aber beim Kopieren störts dann gewaltig, die Zeilennummern wieder rauslöschen zu müssen. Griff ins Klo.