Webkit mit neuen erstaunlichen CSS-Features

von meggs | 0 | 3603 Aufrufe

Anzeige Hier werben

Würde man die Internet-Nutzerzahl auf die Safari-Nutzerzahl reduzieren, wären JavaScripts wie das beliebte "ImageFlow" bald Geschichte: Apple wartet mit verblüffenden neuen Implementierungen für CSS auf:

CSS Masks (CSS-Alpha-Masken)

In einer der kommenden Versionen wird Apples Browser Safari mit CSS-Alpha-Masken umgehen können:

Auf Surfin' Safari, dem Blog der WebKit-Entwickler, erklärt Dave Hyatt: Mit Masken kann man den Inhalt einer Box mit einem Muster überlagern und dieses dazu verwenden, um Teile von ihr in der Seitenansicht ganz auszublenden.

Web-Designern stehen damit eine Reihe neuer Befehle zur Verfügung, die sie beim Erstellen von Seiten zunächst einmal ausprobieren können - sofern sie ein Nightly Build des WebKit herunterladen. Bis Safari die neuen Befehle auch versteht und Internetsurfer den Effekt sehen können, muss aber noch einiges passieren: Dave Hyatt hat jedenfalls vor, die Erweiterungen dem CSS-Team vorzustellen, damit sie als Standardbefehl in eine kommende CSS-Version einfließen.

Eigenschaften:

-webkit-mask: background;
-webkit-mask-attachment: background-attachment;
-webkit-mask-clip: background-clip;
-webkit-mask-origin: background-origin;
-webkit-mask-image: background-image;
-webkit-mask-repeat: background-repeat;
-webkit-mask-composite: background-composite;
-webkit-mask-box-image: border-image;

Bild zu Webkit mit neuen erstaunlichen CSS-Features
Masken mit StyleSheets
Quelle: webkit.org

CSS Reflections (CSS-Spiegelung)

Nur zwei Tage später wartete die Webkit-Entwicklung mit einer weiteren Implementierung auf: CSS-Reflections. Wie das in der Praxis aussehen kann, demonstrierte Hyatt anhand eines Fotos. Auch Videos können in der Spiegelung ablaufen. Auch bis dieser Effekt in eine finale Safari-Version einfließt, wird noch einige Zeit vergehen. Erst muss die Erweiterung vom CSS-Team abgesegnet werden - zum sofortigen Test der Codeschnippsel muss bis dahin ein Nightly Build verwendet werden.

Eigenschaft:

-webkit-box-reflect: direction offset mask-box-image;

Bild zu Webkit mit neuen erstaunlichen CSS-Features
Reflexion mit StyleSheets
Quelle: webkit.org

Weitere Implementierungen sind z.B. CSS Canvas, CSS Gradients, ...

Download der aktuellen Nightly Build der Webkit-Engine.

Über den Autor: meggs
hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
Profilseite betrachten