CSS Box-Reflect - Spiegelung ohne JavaScript und Photoshop

CSS Box-Reflect - Spiegelung ohne JavaScript und PhotoshopCSS Box-Reflect - Um Reflexionen von grafischen, aber auch von Text-Elementen wie bspw. Überschriften realisieren zu können, wurde hierzu bisher in der Vergangenheit fast ausschließlich auf Grafikprogramme wie Photoshop zurückgegriffen, mit den dann die entsprechenden Bereiche gespiegelt wurden. Dank CSS und der Unterstützung der vom Safari- und Chrome-Browser genutzten Browser-Engine Webkit, gibt es auch hier die ein oder andere Möglichkeit gänzlich ohne Grafikprogramme oder auch JavaScript-Erweiterung für solche Anforderungen auskommen zu können. Denn die CSS Eigenschaft "box-reflect" ermöglicht eine Spiegelung von Elementen die den entsprechenden Wert und die dazugehörigen Eigenschaften erhalten.

Modernes Webdesign mit CSS - Das neue Buch!

Um dieses Feature ein wenig näher vorzustellen, wurde hierzu ein aus meinem Buch "CSS-Design" enthaltender Workshop zum Thema Mikroformate verwendet. Ziel ist es im weiteren Verlauf, die hier abgebildete "fiktive Visitenkarte" der Berliner Konditorei Max Mustermann ausschließlich mit CSS zu spiegeln.

Original sucht Spiegelbild

Da die Eigenschaft "Box-Reflect" nicht nur bei Bildern sondern auch bei anderen Elementen angewandt werden kann, wird diese im folgenden Arbeitsschritt dem allumfassenden div-Element mit der Klasse .vcard zugewiesen.

Code-Beispiel
...
<div class="vcard">
  <address>
    ...
  </address>
</div>
...

Nach der gestalterischen Umsetzung des HTML-Codes für die Visitenkarte via CSS, auf deren Umsetzung hier in diesem Tutorial nicht weiter eingegangen wird, sieht der Ist-Stand ohne Spiegelung wie folgt aus.

CSS Tutorial - Box-Reflect ohne CSS-Eigenschaft Box-Reflect
Abb. 1: CSS Tutorial - Box-Reflect ohne CSS-Eigenschaft Box-Reflect

Box-Reflect - from transparent to white

Da die Werte bezüglich der Spiegelung sich nicht wie vielleicht meistens gewohnt auf einen oder vier Werte beschränken, wurden diese auch zum besseren Verständnis im folgenden CSS Code-Ausschnitt über mehrere Zeilen "verteilt". Neben Ausrichtung der Spiegelung (below) und der Definition des Abstandes zwischen "Original" und "Spiegelung" (1px), wird in dieser Eigenschaft auch die Ausrichtung (linear) festgelegt. Desweiteren wird ein "farblicher Start- und Stop-Punkt" (from -> color-stop), sowie ein End-Punkt (to) definiert.

Code-Beispiel
div.vcard {
  ...
  -webkit-box-reflect:below 1px -webkit-gradient
  (linear, 0 0, 0 100%,
  from(transparent),
  color-stop(.66, #FFF),
  to(#FFF));
}

CSS Tutorial - Box-Reflect mit CSS-Eigenschaft Box-Reflect
Abb. 2: CSS Tutorial - Box-Reflect mit CSS-Eigenschaft Box-Reflect

Box-Reflect - Optimierung

Da der aktuelle Zustand der Spiegelung noch nicht den an sie gestellten Anforderungen entspricht, wird dem "Stop-Punkt" der Wert transparent zugewiesen, womit das gleichgroße virtuelle Spiegelbild, in ihrer Höhe verkleinert abgebildet wird. Um diese Höhe einer solch gewollten Spiegelung zu verändern, kann natürlich auch durch die Veränderung des Wertes für den "Stop-Punkt" hierfür herangezogen werden.

Code-Beispiel
div.vcard {
  ...
  -webkit-box-reflect:below 1px -webkit-gradient
  (linear, 0 0, 0 100%,
  from(transparent),
  color-stop(.66, transparent),
  to(#FFF));
}

CSS Tutorial - Box-Reflect mit optimierter CSS-Eigenschaft Box-Reflect
Abb. 3: CSS Tutorial - Box-Reflect mit optimierter CSS-Eigenschaft Box-Reflect

Box-Reflect - The Demo

Wenn der Browser mit dem du dieses CSS3-Tutorial besuchst, Eigenschaften wie den hier vorgestellten Box-Reflect unterstützt, dann dürfte die Darstellung dieses Features in etwa der Abbildung 3 entsprechen, wenn nicht dann wird das Ergebnis der Abbildung 1 entsprechen.

View Tutorial Demo

Fazit

Diejenigen von Euch, die die erwähnten Browser verwenden und das ist bei den Besuchern dieses Blogs immerhin schon jeder vierte Besucher, besitzen mit "Box-Reflect" einen durchaus interessanten Ansatz Webseiteninhalte ohne jegliche Grafiken und ohne JavaScript und ausschließlich mit CSS spiegeln zu können! Das heißt, die für solche Layoutaspekte notwendig werdenden Grafiken egal welches Datei-Formates, sind nicht mehr notwendig, wodurch auch die daraus resultierenden Requests eingespart werden könnten.

Allerdings ist "Box-Reflect" noch Zukunftsmusik, da dieses Feature wegen der noch nicht existenten Syntax der browserspezifischen CSS -Präfixe für Mozilla-Browser (-moz-) und aufgrund der noch fehlenden Unterstützung insbesondere des Firefox nicht alltagstauglich ist. Nichtsdestotrotz hoffe ich Euch, hat dieser kleine Ausblick auf das was eventuell mit CSS in Zukunft möglich sein wird gefallen.

Ähnliche Artikel zum Thema CSS:
  1. Manuel 19 Mär 2010, 16:38

    Auch wenn diese Eigenschaft noch nicht von einem nennenswerten Anteil der am Browsermarkt vertretenen Browser korrekt interpretiert wird, zeigt dieses Tutorial ( wie im übrigen auch die letzten CSS3-Tutorials ) wunderbar auf, in welche Richtung es mit CSS in Zukunft gehen kann.


  2. Helen 19 Mär 2010, 17:23

    mmmmh nette CSS-Spielerei, aber der HTML-Code für die hCard der "Konditorei" würde mich fast mehr interessieren, da die auf jeden Fall alltagstauglich ist ;o)


  3. alex
    19 Mär 2010, 22:58

    Ich befürchte bis sich das durchgesetzt hat sind wir alle in Rente :)


  4. Daniel
    20 Mär 2010, 09:16

    geniale css 3 eigenschaft. wichtig ist auch, imo, dass mit dieser einfachen anweisung der neo-browser das macht, was wir bis dato noch mit viel aufwand und mühen manuell machen.

    zu wissen, wie es die browser jetzt machen, bedeutet auch zu wissen, wie es die browser dann "von selbst" in der zukunft machen :)


  5. simonnickel
    20 Mär 2010, 09:47

    Sind ja ganz cool solche Effekte. Jedoch hader ich irgendwie die ganze Zeit damit, ob solche Effekte wirklich in eine CSS Spezifikation gehören sollen oder nicht ... es dauert ja schon lang genug bis grundlegende Eigenschaften und Selektoren usw. weit genug verbreitet sind.
    Klar, wenn niemand anfängt passiert auch nichts, aber irgendwie fänd ich es schöner solche Sachen vom Rest zu trennen damit man irgendwann mal wenigstens eine aktuelle Version hat die flächendeckend unterstützt wird.


  6. Felix de Ruiter
    20 Mär 2010, 10:00

    Toller Artikel! Genau wegen solcher Tutorials liebe ich das Webstandard-Blog. =)


  7. Florian Lerch
    20 Mär 2010, 12:10

    Das ist ja mal cool. Zukünftig wirds dann wohl ziemlich schwer sein, noch den Überblick darüber zu haben, was mit CSS zu machen ist und was man alternativ lösen muss. Bisher hat man das ja immer noch irgendwie Intuitiv im Gefühl, was CSS kann und muss es nur googlen. Aber bei solchen Dingen kann ich mir das irgendwie gar nicht so recht vorstellen.


  8. pehbehbeh
    22 Mär 2010, 23:02

    Schönes Tutorial!

    Aber wie das nun mal so ist, werden wir noch lange Zeit auf Workarrounds zurückgreifen müssen... :(


  9. Klaus Guntlach 23 Mär 2010, 21:44

    Eine wirklich nette CSS-Spielerei und ein Interessanter Artikel. Bleibt uns nur noch abzuwarten, ob der IE9 und andere Brwoser diese Funktion in der Zukunft unterstützen werden.


  10. Thomas Kluth 05 Apr 2010, 16:08

    Das sind ja mal schöne Aussichten - die Eigenschaft "box-reflect" sollte sich möglichst schnell durchsetzen, ist ja zum Vorteil aller User wenn möglichst viel CSS und weniger von dem anderen "Zeugs" eingesetzt wird.
    Bloß - wie bekommt man FF (+ IE) dazu, diese Eigenschaft zu übernehmen und darzustellen?
    Gibt es dort einen "Browser-Minister" dem man eine Petion schreiben könnte ;-) ?!


  11. Niko
    22 Apr 2010, 17:58

    Wow, ich kann es kaum erwarten bis CSS3 endlich zum Standart wird.

    Ich hoffe, dass ich es noch erlebe.....

    Klasse Tutorial mal wieder, zeigt sehr schön die Möglichkeiten von CSS3 auf.

    Gruß Niko


  12. Simon
    27 Apr 2010, 14:15

    Ahh, wie wäre das schön, wenn sich dieser Effekt dann tatsächlich für alle Browser durchsetzen würde. Ich hoffe dass ein gewisser Browser, *hust*..IE..*hust*, dem nicht später mal im Wege steht. Bis jetzt macht dessen Entwicklerteam nämlich noch nicht einmal Anstalten um HTML 5 zu integrieren.


  13. Dannie 12 Mai 2010, 13:20

    he he he...das spart ne menge arbeit. schöner artikel! vielen dank.

    liebe grüße,
    dannie


  14. pawel
    09 Jun 2011, 12:17

    Ich habe mal das Beispiel aufgegriffen und den Effekt auch für den Firefox verfügbar gemacht.
    Hier der Artikel dazu und dazu dasBeispiel mit Fox


  15. website background video
    20 Apr 2014, 22:23

    Sehr schön. Hat auf Anhieb funktioniert.


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