CSS3 Formular Tutorial - Webdesign ohne Grafiken dank CSS Transform

CSS3 Formular Tutorial - Webdesign ohne Grafiken dank CSS TransformCSS Transform - Mit dem hier anfangs der Woche vorgestellten CSS Formular Tutorial Formular Design mit CSS3 sollte neben der Präsentation von CSS3 Eigenschaften, insbesondere die Reduzierung von Grafiken die für die Umsetzung von Webseiten-Elementen wie Formularen verwendet werden, im Vordergrund stehen. Diejenigen Browser die die im weiteren Verlauf des Artikels verwendeten CSS3 Eigenschaften nicht unterstützen, bekommen ein Formular welches nicht weniger brauchbar ist. Dank des Tipps eines Lesers, wird euch heute ein Zusatz zu diesem Tutorial vorgestellt, welcher mittels CSS Transform die noch einzig im Tutorial verbliebene Grafik, den gebogenen Schatten unterhalb des Formulars, verzichtbar werden lässt.

Modernes Webdesign mit CSS - Das neue Buch!

Das Formular mit CSS "in seinen Ausmaßen eingrenzen"

Die dem form- und fieldset-Tag zur Verfügung gestellte Hintergrundgrafik comments-bg.png, die bisher für die obere Umrandung des Formulars inklusive dem kleinen Radius zustündig war, wird auskommentiert. Diese "Aufgaben" übernehmen nun die Eigenschaften border und border-radius in den Zeilen 6 bis 9. Damit der im weiteren Verlauf zu erstellende gebogene Schatten sich auch hinter dem Formular "versteckt" und somit dezent am unteren Rand sichtbar wird, muss dieses Element relativ positioniert werden. Um den Schatten oben, rechts und unten zu realisieren wird die CSS3 Eigenschaft box-shadow in den Zeilen 11 bis 13 definiert. Der dezente Grau-Ton für die Hintergrundfarbe des Formulars der bisher in der Hintergrundgrafik enthalten war, wird dem form-Tag nun direkt zugewiesen.

CSS Formular - Die Ausmaße
form {
  /*background: #fff url(comments-bg.png) no-repeat 0 0;*/
  padding: 3px 0 0;
  margin: 10px auto;
  width: 520px;
  border: 1px solid #d8d8d8;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  position: relative;
  -webkit-box-shadow: 2px 0 2px #e2e2e2;
  -moz-box-shadow: 2px 0 2px #e2e2e2;
  box-shadow: 2px 0 2px #e2e2e2;
  background-color: #f6f6f6;
}
...
fieldset {
  /*background: #fff url(comments-bg.png) no-repeat 0 100%;*/
  border: none;
  margin: 0;
  padding: 10px 20px 25px;
}

Die daraus resultierende Abbildung entspricht bis auf den fehlenden Schatten nun bereits der Zielsetzung des Tutorials. Für alle Browser die die CSS3 Eigenschaft Transform allerdings nicht unterstützen, ist dieses Tutorial bereits an dieser Stelle beendet. Was bei den Lesern des Webstandard-Blogs, auf lediglich 12% der Besucher zutrifft. Diese Verteilung der Browser ist natürlich nicht repräsentativ für andere Blogs, aber auf jeden Fall von Vorteil für die nun folgenden CSS3 Eigenschaften.

CSS3 Kommentar- / Kontakt-Formular - ohne Schattenwurf
CSS3 Kommentar- / Kontakt-Formular - ohne Schattenwurf

Anmerkung: Da die nun folgenden CSS Eigenschaften für die Gestaltung dieses Online-Formulars allesamt neu hinzukommen, wird auf die grüne Farbgebung im weiteren Verlauf verzichtet.

Mit Pseudo-Elementen den Schatten des CSS Formulars erzeugen

Die nun anstehende Aufgabe der Abbildung eines Schattens, wird von CSS Eigenschaften übernommen, die dank der Pseudo-Elemente :before und :after ohne zusätzliche HTML-Elemente auskommen. Auch wenn sich diese nur in Verbindung mit der Eigenschaft "content" (Zeile 10) formatieren lassen. Die ursprünglich aus CSS2 stammende Syntax :before, wird in CSS3 zu ::before. Hierdurch können Pseudo-Elemente einfacher von Pseudoklassen unterschieden werden.

CSS Formular - Der Schatten
form::before, form::after {
  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7);
  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
  position: absolute;
  bottom: 18px;
  z-index: -1;
  width: 50%;
  height: 20%;
  content: "";
  background: rgba(0, 0, 0, 0.7);
}

Der vor und nach dem Formular-Element angelegte CSS Eigenschaft content ist "nur Mittel zum Zweck". Es werden keine Inhalte angelegt oder hinzugefügt, daher muss die Eigenschaft im weiteren verlauf auch ohne Wert auskommen. Die bisher vorgenommen Eigenschaften für die Ausrichtung, Positionierung und Darstellung sorgen dafür, dass zwei schwarze Blöcke die über 20% der Höhe und 50% der Breite des Formulars aufgrund ihrer bisher gemeinsamen Eigenschaften hinter dem Formular bei korrekter Position (bottom: 18px;) überlagern.

CSS3 Kommentar- / Kontakt-Formular - Schatten
CSS3 Kommentar- / Kontakt-Formular - Sich überlagernde Schatten ohne Drehung

Damit die Darstellung und die Eigenschaften besser verstanden werden können, wird die eigentlich korrekte Position der mit CSS erstellten Schatten erst einmal so verändert, dass sie mit bottom: -118px deutlich unterhalb des Formulars sichtbar (!) werden.

CSS Formular - Die Schatten ausrichten
form::before, form::after {
...
  bottom: -118px;
...
}

CSS3 Kommentar- / Kontakt-Formular - Schatten
CSS3 Kommentar- / Kontakt-Formular - Sich überlagernde Schatten ohne Drehung mit veränderter Position

Mit CSS Transform den Schatten positionieren (drehen)

Das Pseudo-Element ::before übernimmt die Bereitstellung der Eigenschaften und Werte für die Darstellung des Schattens im linken unteren Bereich des Formulars. Die wichtigste Eigenschaft in diesem Schritt ist die Drehung des Schattens um 3° (3deg) und eine Einrückung vom Rand des Formulars um 5 Pixel.

CSS Formular - Drehen der Schatten (links)
  form::before {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  transform: rotate(3deg);
  right: auto;
  left: 5px;
}

Aufgrund der noch fehlenden Eigenschaften und Werte wie der Drehung für den rechten Bereich des Schattens, überlagern sich die beiden Elemente (wenn auch versetzt) immer noch.

CSS3 Kommentar- / Kontakt-Formular - Schattenwurf
CSS3 Kommentar- / Kontakt-Formular - Schatten mit Drehung (links) - Schatten ohne Drehung (rechts)

Damit auch der der rechte Bereich des Schattens die für ihn vorgesehene Position einnehmen kann, müssen dem Pseudo-Element ::after die gleichen Eigenschaften und Werte zugewiesen werden. Mit einem Unterschied - Die Drehung (-3deg) muss entgegengesetzt des Schattenwurfs auf der linken seite (3deg) sein!

CSS Formular - Drehen der Schatten (rechts)
  form::after {
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  transform: rotate(-3deg);
  right: 5px;
  left:auto;
}

Der auf diese Weise mittels CSS3 Transform erzeugte Schattenwurf des Formulars, wäre bis auf seine korrekte Position soweit umgesetzt.

CSS3 Kommentar- / Kontakt-Formular - Schattenwurf
CSS3 Kommentar- / Kontakt-Formular - Schatten mit Drehung für links und rechts

Um nun die ursprüngliche Position des mit CSS erzeugten Schattens für das Formular zu erreichen, wird lediglich noch die weiter oben zum besseren Verständnis geänderte Position von bottom:-118px auf bottom:18px korrigiert.

CSS Formular - Die absolute Positionierung
form::before, form::after {
...
  bottom: 18px;
...
}

Wer sich nun das Formular ohne Hintergrundgrafik ansieht, wird im Vergleich zum "Vorgänger-Model" mit Hintergrundgrafik, ein nahezu identisches Formular vorfinden.

CSS3 Kommentar- / Kontakt-Formular - ohne jegliche Grafiken
CSS3 Kommentar- / Kontakt-Formular - ohne jegliche Grafiken!

Wer sich von Euch nun davon überzeugen möchte, dass der eigene aktuell verwendete Browser die hier beschriebenen Eigenschaften unterstützt, kann sich auf dem dafür angelegten Demo gern davon überzeugen:

View CSS3 Transform Demo

Fazit

Dank Sven, der im übrigen nach einer neuen beruflichen Herausforderung im Raum Berlin sucht, dem Kommentar von Thomas und CSS3 konnte dieses beispielhafte Kontakformular, auch wenn es auf den ersten Blick nicht den Anschein macht, ohne jegliche Grafik realisiert werden. Auch wenn die Überschrift dieses Artikels mit "Webdesign ohne Grafiken dank CSS Transform" ein wenig überspitzt formuliert wurde, zeigt der doch positive Trend der Browser bei der Unterstützung von Webstandards, dass es mittlerweile zahlreiche Möglichkeiten für den Verzicht von (Hintergrund)Bildern gibt.

Artikel Zum Thema CSS3 & Tutorials:
  1. Marion 14 Jul 2010, 13:11

    Eine lobenswerte Idee und Umsetzung, die ich gleich mal bei meinen Bilder-Galerien testen werde. DANKE!


  2. Sven Wolfermann
    14 Jul 2010, 14:01

    schön aufgearbeitet! Danke!


  3. Webstandard-Team
    14 Jul 2010, 14:16

    @Sven: Soll ja auch verständlich sein ;o) Danke Dir noch mal!


  4. Bärbel Loy 16 Jul 2010, 10:33

    Gut geschrieben und schön detailliert dargestellt.
    Dann bleibt ja nur noch zu hoffen, dass der IE 9.0 ebenfalls alles richtig interpretiert.


  5. Webstandard-Team
    16 Jul 2010, 10:44

    @Bärbel: Die aktuelle Platform Preview des IE9 kann zwar mit den Pseudo-Elementen umgehen, die Eigenschaft Transform und damit die Drehung (rotate) funktionieren allerdings (noch) nicht.


  6. Bärbel Loy
    16 Jul 2010, 10:50

    hallo @webstandard-team
    Ja genau das habe ich mir schon gedacht! lol
    Aber es ist doch schon mal ein Seegen, dass die Unterstützung mit pseudo elementen nun funktioniert.
    Dann wollen wir mal alle hoffen, daß der Rest auch bald lauffähig (ohne die typischen ie-bugs) läuft.


  7. Sönke
    24 Okt 2010, 13:00

    Alles natürlich sehr schöne Features, aber bis sie von allen Browsern unterstützt werden (IE) wird es wahrscheinlich noch ein bisschen dauern :)


  8. Helmut 10 Aug 2011, 13:27

    Man, das hat ein bischen gedauert, bis bei mir der Groschen gefallen ist. Warum eigentlich, so schwer war das doch nicht.
    Ich habs erst richtig verstanden, als ich es mal auf einer Website ausprobiert habe. Einfach toll.


  9. Alexander 20 Sep 2011, 15:05

    Hallo zusammen,
    ich mische mich sehr ungern ein, aber sollte doch jedem Besucher, ganz gleich ob Anfänger oder Fortgeschritten, die Möglichkeit geboten werden, hier auch einen Lösungsweg via IE zu finden.
    Man kann nämlich sehr wohl auch im IE den shadow einfügen.
    Wie immer, ist dies die komplizierteste Lösung, aber wir kennen ja alle MS :/, einfach gibt es in deren Firmenphilosophie nicht!

    filter:progid:DXImageTransform.Microsoft.Shadow(sProperties)

    Natürlich funktioniert auch der Rotationseffekt, aber(!) sehr eingeschränkt, leider:

    1 - Keine Rotation
    2 - 90° Rotation
    3 - 180° Rotation
    4 - 270° Rotation
    /*Bildrotation in "IE"*/
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation:1-4);

    Soviel von mir, berichtigt mich bitte, wenn ich etwas falsches geschrieben haben sollte.

    Liebe Grüße,

    Alexander


  10. peter 29 Jan 2014, 14:10

    Super, sehr gut und sauber beschrieben.
    Vielen Dank.
    Gruß
    Peter


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