msgbartop
Alles über Google Chrome & Google Chrome
msgbarbottom

07 Juni 12 Google Chrome beschleunigt die Fancy CSS Filtereffekte


Treffen Sie Fuzzy Brown Affe, WT Monkey 's CSS-Filter-beladenen Vetter. Bild: Screenshot / Webmonkey

CSS-Filter bieten Web-Entwickler einige sehr mächtige Werkzeuge, mächtig genug, dass es nicht allzu schwierig sein, erstellen Sie eine Web-App in der Lage, die Art von Effekt-beladenen Fotos popularisiert durch Instagram. Es gibt nur ein Problem: CSS-Filter können auf der CPU hart.

Nur wenige Dinge im Web zu veröffentlichen Ihren PC-Lüfter dreht ganz wie CSS-Filter - rufen Sie die Google- abstrakten Malerei Demo-Seite einen Versuch für sich selbst sehen. Filter allein können uns Ihre Fan-Spinnen, sondern kombinieren sie mit einigen CSS-Übergänge und Animationen und Sie haben ein Rezept für Batterie-Entleerung über.

Dass, kombiniert mit der Tatsache, dass so weit sie nur in WebKit-Browsern funktionieren, bedeutet gerade jetzt sollten Sie CSS-Filter mit Vorsicht verwenden.

Glücklicherweise ist die brüllenden Klang Ihrer Fan kann bald ein Ding der Vergangenheit sein, zumindest für Google Chrome-Nutzer. Der Chrome-Blog Berichte dass CSS-Filter mit GPU-Beschleunigung haben in Chrom gelandet. Es wird einige Zeit dauern, bis die Beschleunigung macht seinen Weg in die stabile Version von Google Chrome, aber es wird kommen und das ist eine gute Nachricht für die Zukunft der CSS-Filter. Stephen White, ein Software Engineer bei der Chromium-Projekt, schreibt, "GPU-Beschleunigung dieser Filter bringt ihre Leistung bis zu dem Punkt, wo sie für die Animation Elemente in Verbindung mit CSS-Animationen durch-webkit-Übergang oder auch HTML5-Video-Tags betrieben eingesetzt werden können."

Es könnte noch eine Weile dauern, bevor Adobe startet eine webbasierte Version seines Video-Editor Premiere, aber damit rechnen, andere Browser auf Chrome-Blei bei der Unterstützung und Beschleunigung der CSS-Filter folgen.

Es ist erwähnenswert, dass, während die Instagram Use Case neigt dazu, all die Presse bekommen, CSS-Filter können viel mehr als nur Sepia Toning Bilder. In der Tat Einsatzmöglichkeiten gehen weit darüber hinaus nur Bilder oder Videos. Zum Beispiel, CSS-Filter verwendet werden, um Hintergründe zu verwischen werden (oder machen sie schwarz und weiß) Damit unterstreicht Vordergrund Inhalte in Online-Diagramme, Diagramme oder pädagogische Anwendungen. CSS-Filter konnte Image Sprites in Navigationselemente ersetzen (weniger zum Download bedeuten schnellere Ladezeiten) und könnte auch in Verbindung mit einigen Animation verwendet werden, damit Benutzer wissen, dass etwas auf einer Seite hat sich geändert.

Für weitere Informationen über CSS-Filter, Check out unserer früheren Abdeckung und haben einen Blick auf die Website HTML5Rocks, das bietet eine schöne Überblick über die CSS-Filter zusammen mit einigen Beispiel-Code.

Artikel Quelle: http://www.webmonkey.com/2012/06/google-chrome-speeds-up-fancy-css-filter-effects/

Stichworte: , , , , ,

Kommentare sind geschlossen.