Formular Design mit CSS3 - Visuelle Gestaltung und der Verzicht auf Grafiken

Formular Design mit CSS3 - Gestaltung und der Verzicht auf GrafikenFormular Design mit CSS3 - Durch die Möglichkeiten die einige der Browser-Hersteller mit der Unterstützung von Webstandards wie CSS3 den Anwendern mittlerweile zur Verfügung stellen, sind insbesondere grafisch aufwendige(re) Formulare ohne große Aufwände mittels CSS realisierbar. Vorteil dieser Herangehensweise ist neben der größeren Vielfalt bei der Gestaltung, aber auch die Minimierung von HTTP-Requests durch den reduzierten Einsatz von Grafiken, auf die aufgrund vorhandener CSS3-Eigenschaften verzichtet werden kann. Ausgangspunkt dieses Kommentar-Formulars, welches sich auch im Internet Explorer durchaus sehen lassen kann, ist folgende grafische Vorlage aus Photoshop.

CSS3 Kommentar- / Kontakt-Formular - Vorlage
CSS3 Kommentar- / Kontakt-Formular - PSD-Vorlage

Kommentar- / Kontakt-Formular - HTML Struktur

Um nicht mehr Daten von potentiellen Kommentatoren abzufragen als nötig und um die Gestaltung durch CSS von der Strukturierung der Daten durch entsprechende HTML-Elemente weitestgehend voneinander zu trennen, ist folgender HTML-Code die Grundlage des nun anstehenden CSS Tutorials.

Kommentar-Formular
...
<form class="commentForm" action="#" method="post">
  <fieldset>
  <legend>Kontaktformular</legend>
  <ol class="clearfix">
    <li>
      <label for="firstname">Vorname:</label>
      <input type="text" name="firstname" id=""firstname" value="" />
    </li>
    <li>
      <label for="email">E-Mail: (optional)</label>
      <input type="text" name="email" id="email" value="" />
    </li>
    <li>
      <label for="content">Inhalt:</label>
      <textarea cols="32" rows="7" name="content" id="content">
      ...
      </textarea>>
    </li>
    <li class="last">
      <input type="submit" name="submit" id="submit" value="Absenden" />
    </li>
  </ol>
  </fieldset>
</form>
...

Das Ergebnis dieses Kommentar- bzw. Kontakt-Formulars ohne CSS ist (noch) nicht sonderlich ansehnlich, lässt aber bereits jetzt einen Ausblick zu, auf das was potentielle Kommentatoren erwartet.

CSS3-Formular - HTML ohne CSS
CSS3-Formular - Abbildung der Browser basierend auf HTML ohne CSS

Schritt 1 - CSS Form Basics

Einzig und allein für den Formularhintergrund wird für dieses Formular-Layout auf ein Bild zurückgegriffen. Für das Formular und das Fieldset wird ein großes Hintergrundbild geladen, sodass das Formular bspw. in mulitlingualen Context flexibel in der Höhe wäre und problemlos weitere Felder enthalten könnte. Zuerst werden einige Abstände und die Gesamtbreite des Formulars festgelegt. Für die Formularfelder, die in einer geordneten Liste gebettet sind, werden ebenfalls einige Voreinstellungen vorgenommen.

CSS Code
form {
  background: #fff url(comments-bg.png) no-repeat 0 0;
  padding: 3px 0 0;
  margin: 10px auto;
  width: 520px;
}
fieldset {
  background: #fff url(comments-bg.png) no-repeat 0 100%;
  border: none;
  margin: 0;
  padding: 10px 20px 25px;
}
ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  float: left;
  padding: 10px;
}
li.last {
  float: none;
  clear: both;
text-align: right;
}
...

Neben dem Legend-Element, erhalten auch die Labels für die Formularfelder ihre CSS-Angaben - cursor: pointer bewirkt, dass der Mauszeiger beim Überfahren der Labels zur Hand (wie bei Hyperlinks) wird. Da die Labels klickbar sind, wird so auf die "Klickbarkeit" der Texte hingewiesen. Ein Klick auf das Label bewirkt somit, dass der Mauszeiger in das dem Label zugehörige Feld springt.

CSS Code
...
fieldset legend {
  font-weight: bold;
  font-size: 22px;
  margin:15px 0 0 6px;
}
label {
  display:block;
  cursor: pointer;
  font-weight: bold;
  line-height: 24px;
}
...

Schritt 2 - input-Felder und textarea

Die Schriftart für Input-Felder und Textareas wird nicht von Elternelementen vererbt, deshalb sollte diese nochmal gesondert zugewiesen werden.

CSS Code
...
input, textarea {
  background-color: #fff;
  color: #4d4d4d;
  border: 1px solid #c4c4c4;
  font: 13px Helvetica, Arial, "Nimbus Sans L", FreeSans, sans-serif;
  padding: 8px 12px;
  width: 190px;
}
textarea {
  width: 425px;
  overflow: auto;
}
...

Wer von Euch dem aktuellen Stand der Dinge, eventuell mittels jQuery ein wenig Bewegung zukommen lassen möchte, der kann mit dem Plugin Sliding Labels einen durchaus sehenswerten Effekt erzeugen.

CSS3-Formular - Ansicht mit CSS-Voreinstellungen
CSS3-Formular - Ansicht nach den "Voreinstellungen" (FF 3.6, Windows Vista)

Schritt 3 - CSS3 für input-fields

Zuerst erhalten die Input-Felder und die Textarea runde Ecken und einen Schatten über die CSS3-Eigenschaft box-shadow. Die CSS3-Eigenschaft box-shadow unterstützt nativ bisher nur Oera ab Version 10.5 - alle anderen modernen Browser brauchen einen Vendor-Prefix (-moz, -webkit). Dem Internet-Explorer kann über die Filter-Funktion auch ein Außenschatten hinzugefügt werden.

CSS Code
...
input, textarea {
...
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
...
  -webkit-box-shadow: 2px 2px 5px #e2e2e2, inset 2px 2px 5px #e2e2e2;
  -moz-box-shadow: 2px 2px 5px #e2e2e2, inset 2px 2px 5px #e2e2e2;
  box-shadow: 2px 2px 5px #e2e2e2, inset 2px 2px 5px #e2e2e2;
...
  filter:progid:DXImageTransform.Microsoft.Shadow
  (color=#e2e2e2, Direction=135, Strength=5);
  -ms-filter:"progid:DXImageTransform.Microsoft.Shadow
  (color=#e2e2e2, Direction=135, Strength=5)";
}
...

Die Eigenschaft box-shadow kann mehrere kommagetrennte Werte annehmen. Die beiden ersten Pixelangaben sind der Versatz in x- und y-Achse – dies können sowohl positive als auch negative Werte sein, der dritte Wert ist der Wert für den Weichzeichner, also der Blur-Wert. Einen vierten Wert könnte man noch für die Schattenausweitung angeben (Beispiel: box-shadow: 2px 2xp 5px 2px #ccc). Schließlich wird noch der Farbwert des Schattens angegeben. Bei Angabe dieser Werte ist der Schatten immer außerhalb (hinter) der Box. Ausgangspunkt ist durch den positiven Versatz so gesehen unten rechts. Mit der zusätzlichen Angabe inset kann man einen Innenschatten erzeugen. Hier ist der Ausgangspunkt oben links. So kann man gleichzeitig einen Schatten innen und außen hinzufügen.

CSS3-Formular - Border-Radius
CSS3-Formular - Ansicht mit border-radius und box-shadow (FF 3.6, Windows Vista)

Schritt 4 - Der Submit-Button

Um den Submit-Button anzusprechen nutzen wir den Attribut-Selektor für das input-Feld mit dem Wert type="submit". Diesen Selektor unterstützen alle Browser, lediglich ältere Browserversionen wie der IE6 nicht. Für den Submit-Button wird eine andere Schriftart verwendet. Die Angaben für die Schriftart decken zu 99,5% alle Systeme wie Linux, Mac und PC ab.

CSS Code
input[type="submit"] {
  background-color: #c50a1f;
  color: #fff;
  cursor: pointer;
  font: italic bold 1em/1.2 Georgia, "Times New Roman ", Times, Cambria, "Nimbus Roman No9 L ", serif;
  border: 1px solid #e35061;
  padding: 5px 10px;
  width: auto;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius: 0;
}
...

CSS3-Kommentar - Submit-Button
CSS3-Formular - Submit-Button mit Hintergrundfarbe und anderer Schriftart (FF 3.6, Windows Vista)

Der Submit-Button bekommt eine Hintergrundfarbe und einen dünnen Rand. Wir setzen die Weite des Buttons auf den Wert auto, da sonst die Weite der anderen Input-Felder verwendet werden würde. Ebenfalls muss der Border-Radius auf 0 zurückgesetzt werden.

Schritt 5 - CSS3 Hintergrundverlauf (gradient)

Eine umfangreiche CSS3-Eigenschaft die im folgenden Abschnitt zum Einsatz kommt und oftmals die Ursache für den übertriebenen Einsatz von Hintergrundgrafiken ist, ist der Farbverlauf.

CSS Code
input[type="submit"] {
...
  background: -moz-linear-gradient(top, #e1001a, #c50a1f);
  background: -webkit-gradient(linear, left top, left bottom,
  color-stop(0, #e1001a), color-stop(1, #c50a1f));
...
  filter: progid:DXImageTransform.Microsoft.gradient
  (startColorStr=#e1001a, EndColorStr=#c50a1f);
...
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient
  (startColorStr=#e1001a, EndColorStr=#c50a1f)";
}
...

Schritt 6 - CSS3 Schatten (box-shadow)

Die Photoshop-Vorlage besitzt für den Submit-Button einen leichten "Doppelrahmen", dieser wird über die zuvor schon bereits angewandte CSS3-Eigenschaft box-shadow realisiert. Wir vergeben also mehrere Kommagetrennte Schatten-Werte.

CSS Code
input[type="submit"] {
...
  -webkit-box-shadow: 1px 0 0 #c50a1f, -1px 0 0 #c50a1f,
  0 1px 0 #c50a1f, 0 -1px 0 #c50a1f, 0 5px 10px -5px #666;
...
  -moz-box-shadow: 1px 0 0 #c50a1f, -1px 0 0 #c50a1f,
  0 1px 0 #c50a1f, 0 -1px 0 #c50a1f, 0 5px 10px -5px #666;
...
  box-shadow: 1px 0 0 #c50a1f, -1px 0 0 #c50a1f,
  0 1px 0 #c50a1f, 0 -1px 0 #c50a1f, 0 5px 10px -5px #666;
}
...

Die ersten vier kommagetrennten Werte sind jeweils ein leichter, nicht weichgezeichneter Schatten an allen vier Seiten. Der fünfte Wert ist ein leichter "Drop-Shadow" unterhalb des Buttons.

Submit-Button mit CSS3 box-shadow
CSS3-Formular - Ansicht Submit-Button mit CSS3 box-shadow (FF 3.6, Windows Vista)

Schritt 7 - CSS3 Text-Schatten (text-shadow)

Abschließend wird dem Absenden-Button noch die CSS3 Eigenschaft text-shadow für mehr Kontrast zugewiesen.

CSS Code
input[type="submit"] {
...
  text-shadow: 1px 1px 3px #333;
}
input[type="submit"]:hover {
  background: #c50a1f;
  text-shadow: none;
}
...

Für ein interaktiveres Verhalten kann man dem Submit-Button noch einen Hover-Status zukommen lassen. Wenn man dann mit der Maus über den Button fährt, wird die Hintergrundfarbe auf diese Weise rot eingefärbt, ohne Farbverlauf. Zudem wird für die "Aktion" der Text-Shadow entfernt.

Submit-Button mit CSS3 text-shadow
CSS3-Formular - Ansicht Submit-Button mit CSS3 text-shadow (FF 3.6, Windows Vista)

Schritt 8 - "Browseroptimierung"

Soweit, so gut. In den modernen Browsern, wie Firefox ab 3.5, Safari ab 4, Chrome ab 4 und Opera ab Version 10.5 sind kaum Unterschiede zu erkennen. Einzig Opera unterstützt keinen Hintergrundverlauf und keinen text-shadow. Aber selbst im Internet Explorer sieht das Formular, bis auf die fehlende CSS3-Unterstützung von border-radius, box-shadow, sowie text-shadow, recht ansehnlich aus. Einzig die Angaben der Breiten bzw. Abstandangaben müssen für den IE7 "nachjustiert" werden:

CSS Code für IE7
*+html legend {margin-left: 0px}
*+html textarea {width: 430px}
*+html li.last {padding: 5px}
*+html input[type="submit"] {width: 100px}

CSS3-Formular im Internet Explorer
CSS3-Formular im Internet Explorer (IE7, Windows Vista)

Fazit

Wer einen Teil seiner Website-Besucher ein besseres Surf-Erlebnis durch den Einsatz von CSS3 geben möchte, kann viele CSS3-Eigenschaften schon heut implementieren ohne zusätzliche Grafiken verwenden zu müssen. Microsoft arbeitet fleißig an der Implementierung von CSS3 in der neuen Version des Internet Explorer 9. Wir können hoffen, dass bald der Browsern Support vieler CSS3 Eigenschaften so allumfassend ist, dass zudem auch keine Vendor-Prefixe mehr von Nöten sein werden. Mein Fazit: einfach ausprobieren und jetzt schon einsetzen!

View Tutorial Demo

Informationen über den Gastautoren

Gastbeitrag - CSS SpriteVerfasst hat diesen Artikel "Formular Design mit CSS3 - Gestaltung und der Verzicht auf Grafiken" Sven Wolfermann. Er ist freier Webentwickler mit Schwerpunkt Frontendentwicklung HTML und CSS. Zudem ist Sven zertifizierter TYPO3 Integrator und schreibt für das TYPO3 Magazin TY-MA. Er beschäftigt sich seit ca. 2 Jahren intensiv mit dem Thema Frontend Performance und führt zu diesem Thema seit kurzem auch einen Tumblr-Blog: maddesigns.tumblr oder twittert darüber. In seiner Freizeit entspannt sich der 32-jährige im Garten und tobt mit seiner 2-jährigen Tochter.

Werde auch du Gastautor im Webstandardblog!

Um Themengebiete wie diese, für die sich die Leser interessieren anbieten zu können, möchten wir über diesem Wege weiterhin anderen Bloggern die Möglichkeit geben, ihr Fachwissen mit unseren Lesern teilen zu können. Voraussetzung ist lediglich, dass sich diese Artikel in den vorhanden Kategorien unseres Blogs untergebracht werden können und der jeweilige Autor über entsprechendes Fachwissen verfügt.

Artikel zur Optimierung der Ladegeschwindigkeit von Webseiten:
  1. Thomas 12 Jul 2010, 14:53

    Schönes Tutorial!
    Progressive Enhancement mit css3 rockt :)

    Leider hab ich keinen Link zu einer Demo-Seite gefunden...
    und so konnte ich auch nicht rausfinden, wofür die das Hintergrundbild benutzt hast, das Formular auf den Screenshots wäre mit box-shadows doch auch ohne Bilder machbar
    ( siehe http://nimbupani.com/demo/css3-drop-shadows.html )


  2. Webstandard-Team
    12 Jul 2010, 15:11

    @Thomas: Der Link zur Demo-Version ist direkt unter dem Fazit positioniert und aufgrund der "grünen" Gestaltung doch eigentlich recht gut sichtbar, oder ;o)

    Danke für den Linktipp, denn die Umsetzung des Schattens bei dem von dir genannten Beispiel ist wirklich klasse.


  3. Marion 12 Jul 2010, 15:22

    Die Frage von Thomas bezüglich des Demo-Links kann ich nicht ganz nachvollziehen, waren doch die bisherigen Links zu den Demo-Versionen wesentlich unauffälliger ;o))

    BTW: Wieder ein klasse Tutorial!


  4. Sven Wolfermann
    12 Jul 2010, 15:31

    @Thomas: tatsächlich, mit der Umsetzung wie beim Linktipp zu "css3 drop shadows" könnte man wahrscheinlich komplett auf Grafiken verzichten. Man lernt nie aus! :)


  5. Chris 13 Jul 2010, 08:37

    Seit wann ist ein Formularfeld eine geordnete Liste? Das würde bei einer Anmeldung vllt zutreffen, aber bei einem Kontaktformular nicht.

    Eine geordnete Liste setzt voraus, dass der derauffolgende Punkt erst abgearbeitet werden kann, wenn der vorhergehende gelesen worden ist. D.h. die Punkte bauen aufeinander auf (ähnlich wie bei einem Inhaltsverzeichnis einer interpretation).

    Ebenfalls fehlt das legend-Element.

    Gruß
    Chris


  6. Webstandard-Team
    13 Jul 2010, 09:30

    @Chris: Dieses Kontaktformular steht beispielhaft für die Umsetzung von Formularen.
    Nur um eine Strukturierung durch eine geordnete List zu rechtfertigen, muss ein Formularbeispiel wie dieses nicht den Umfang eines umfangreiches Anmelde- oder Registrierungsformulars besitzen, da der Artikel ansonsten aufgrund der Codeabschnitte und Screenshots zu unübersichtlich werden würde. Daher an dieser Stelle die Reduzierung auf Eingabefeld, Textfeld und Submitbutton.

    Eine geordnete Aufzählung ist eine Auflistung von Elementen, die in einer logischen Verbindung zu einander stehen und in einer besonderen Reihenfolge aufgezählt werden (Vorname, E-Mail, Kommentar, Versenden).

    Das zu einem Formular auch das Legend-Element gehört ist sowohl Sven als auch mir bewusst, wie der bereits vier Jahre alte Beitrag hinter dem Link im ersten Absatz von Schritt 1 dieses Tutorials hier belegt).


  7. Mißfeldt
    13 Jul 2010, 09:32

    Super Artikel. Danke.


  8. Simon
    16 Jul 2010, 10:03

    Wow ich staune immer wieder was mit CSS3 alles möglich ist!

    Danke für das Tutorial!


  9. Alex 26 Jul 2010, 16:07

    Hi,

    ist denn ein legend-Element zwingend notwendig? Das Styling von legend und fieldset bekommt man ja ohnehin nicht dazu, das es in jedem Browser gleich aussieht.


  10. Groo 27 Okt 2010, 16:47

    Den IE-Filter würde ich glaub ich rauslassen. Zumindest siehts jetzt auf den IE9 nicht mehr gut aus. Sollen doch die alten IEs ohne Schatten leben...


  11. jansteffen 28 Dez 2010, 17:36

    Die Benutzung einer Klasse "last" für das letzte li Element ist sehr dämlich, ich dachte wir sind in einem Blog mit Css3 Kennern... dafür gibt's doch jetzt :last-child. außerdem muss man für ded doppelrahmen keine 4 box-shadows benutzen, da man den radius bei diesen erhöhen kann, d.h.,

    box-shadow: 1px 0 0 #c50a1f, -1px 0 0 #c50a1f,
    0 1px 0 #c50a1f, 0 -1px 0 #c50a1f

    lässt sich durch

    box-shadow: 0 0 0 1px #c50a1f, 0 5px 10px -5px #666;

    ersetzen.
    wie bereits gesagt fehlt im code das legend element und das mit dem schatten, öhm, ja da gibts ja schon einen neuen artikel zu ^^


  12. Webstandard-Team
    29 Dez 2010, 09:31

    @jansteffen: Wie du dem letzten Arbeitsschritt entnehmen kannst, sollen die CSS Eigenschaften dieses Tutorials auch vom IE7 weitestgehend verstanden werden. Da der IE7 :last-child nicht versteht, ist die Vergabe einer zusätzlichen Kennzeichnung der Elemente durch eine ID oder Klasse für den letzten Listenpunkt nicht dämlich, sondern notwendig.


  13. Henry 17 Nov 2011, 14:09

    Hi miteiander, bitte nicht streiten, aber Zwecks kompatibler Führung in allen Browsern habe ich diese Variante genutzt. Um ein einheitliches Credo auf allen Browsern zu schaffen hat es mir geholfen ein wenig web 2.o style in meine Seiten reinzubekommen.

    Vielen Dank für den Tipp :)


  14. Pantherpfote 07 Dez 2011, 21:14

    Schönes Tutorial!
    Ich muss mich auch mal mehr mit ansprechenden Formular-Designs beschäftigen, das macht aber schon eine Menge her.


  15. Klaus
    04 Jan 2012, 13:37

    Vielen Dank für die tolle Beschreibung.

    Mir hat es bei meiner Umsetzung in unserem Kontaktformular sehr geholfen.

    Alles Gute für 2012 wünscht
    Klaus


  16. Len 05 Jun 2012, 15:30

    Ich bin totaler Neuling und hab das mal getestet - mit mäßigem Erfolg.

    Kann mir jemand sagen, wie genau ich das machen muss.

    Und warum lagert man CSS immer aus? Kann man das nicht in den HEAD-Bereich reinschrieben?

    Danke :)


  17. Len 05 Jun 2012, 15:56

    Also bei mir hat alles bis auf die die Umrandung des gesamten Formulars mit dem Schatten rechts und links unten geklappt.

    Muss ich theoretisch nicht den Pfad für das Hintergrundbild ändern?

    Hilfe...


  18. liskel
    30 Aug 2012, 20:55

    Wow! Super Zusammenstellung und Beschreibung. Großartig, werde ich mir aneignen!
    Danke!


  19. helmut 27 Sep 2012, 19:13

    Darf ich Teile davon (ich will nicht alles übernehmen) auf meine Website kopieren? Unter welcher Lizenz steht das?


  20. Webstandard-Team (Heiko)
    27 Sep 2012, 20:42

    @helmut: Für einen Link zu diesem Blog hier, kannst du von diesem Tutorial die Informationen verwenden, die du benötigst.


Artikel kommentieren





HTML ist erlaubt und ausdrücklich erwünscht, wobei folgende Tags eingesetzt werden können: <a href="" title=""></a> <b></b> <cite></cite> <code></code> <em></em> <strong></strong>


authimage