PS vs CSS

[Grafikdesigner]

Icons direkt in CSS zu bauen ohne Photoshop wäre so, als wenn man ein Auto direkt zusammenschraubt, ohne vorher einen Bauplan zu haben.

Wenn Photoshop Grafiken als CSS-Code ausgeben kann, fein. Wenn nicht, ist CSS als Grafikersatz (wozu überhaupt?) gestorben.

[Himmerlarschundzwirn]

Zum "Wozu überhaupt", würde ich mal anführen, dass bei Vektoren einfach weniger Daten entstehen, als wenn man die Bilder als Dateien über die Leitung schiebt. Das fällt dir mit DSL bei einzelnen Bildchen sicher nicht stark auf, aber da wird's die Masse machen und der Traffic, der beim Provider anfällt, verringert sich auch.

[Hans Schmucker]

*heul* CSS ist kein Grafikersatz. Es geht um Dekorationen. Schlagschatten, Gradients, Borders, Margins (...) die früher in Photoshop auch als Bitmap gerendered und dann exportiert wurden ... für Grafiken nimmt man Bitmaps oder SVG, kein Mensch würde ernsthaft Icons mit CSS bauen außer um zu zeigen, dass es geht.

CSS ist kein Graphicformat. Es ist ein Presentationsformat.

Kennt denn hier keiner SVG?



1 mal bearbeitet, zuletzt am 05.07.10 10:30 durch Hans Schmucker.

[firehorse]

Hans Schmucker schrieb:
--------------------------------------------------------------------------------
> *heul* CSS ist kein Grafikersatz. Es geht um Dekorationen. Schlagschatten,
> Gradients, Borders, Margins (...) die früher in Photoshop auch als Bitmap
> gerendered und dann exportiert wurden ...
>

NUR von PS??????? Na ja.... :(

> für Grafiken nimmt man Bitmaps
> oder SVG, kein Mensch würde ernsthaft Icons mit CSS bauen außer um zu
> zeigen, dass es geht.
>

Zumal dann der Code ständig neu geladen werden müsste.

> CSS ist kein Graphicformat. Es ist ein Presentationsformat.
>

Stimmt. Es ist, wie HTML/XML auch, eine Auszeichnungssprache.

> Kennt denn hier keiner SVG?
>

Logisch aber was hat dies mit CSS zu tun?
Außerdem ist PS kein Vector-Program, sondern ein rein auf Grafik/Bildbearbeitung ausgelegt. Das war nie zur Webentwicklung gedacht.

[Hans Schmucker]

firehorse schrieb:
--------------------------------------------------------------------------------
> NUR von PS??????? Na ja.... :(
Nein, nicht nur von PS. Habs hier nur genommen weil es das häufigste und Titel des Artikels ist.

> > für Grafiken nimmt man Bitmaps
> > oder SVG, kein Mensch würde ernsthaft Icons mit CSS bauen außer um zu
> > zeigen, dass es geht.
> >
>
> Zumal dann der Code ständig neu geladen werden müsste.
Zumindest der DOM Part.

> > Kennt denn hier keiner SVG?
> Logisch aber was hat dies mit CSS zu tun?
> Außerdem ist PS kein Vector-Program, sondern ein rein auf
> Grafik/Bildbearbeitung ausgelegt. Das war nie zur Webentwicklung gedacht.
Geht hier um den Begriff "Graphikersatz" im ersten Post. CSS ist keiner und will auch keiner sein.

[firehorse]

Hans Schmucker schrieb:
--------------------------------------------------------------------------------
> Geht hier um den Begriff "Graphikersatz" im ersten Post. CSS ist keiner und
> will auch keiner sein.

Mein reden ;)

[Hans Schmucker]

Dann sind wir uns einig. Jetzt n Bierchen? ;)

[firehorse]

Hans Schmucker schrieb:
--------------------------------------------------------------------------------
> Dann sind wir uns einig. Jetzt n Bierchen? ;)

Bier? sitze noch von der halben Nachschicht am Rechner vorm Kaffee... und dann bei der Hitze. Da kannste mich nach einem Bierchen vom Boden kratzen :)

[Hans Schmucker]

War auch nicht ganz ernst gemeint. Ich sitz' ebenfalls bei der vierten Tasse Kaffee und Arbeite an SVG Filtern und lenk mich dabei hiermiet ein bissl ab :)

[firehorse]

Hans Schmucker schrieb:
--------------------------------------------------------------------------------
> War auch nicht ganz ernst gemeint. Ich sitz' ebenfalls bei der vierten
> Tasse Kaffee und Arbeite an SVG Filtern und lenk mich dabei hiermiet ein
> bissl ab :)
>

Filter? Für was? Jetzt machste mich neugierig^^

idesign, inkscape, ooo???

sag mal an.

PS: bis 10 noch kurz hingelegt und bei der zweiten Tasse ;)

[Hans Schmucker]

In dem Fall Beispiele für ein Proposal für eine Draft für SVG Filter 2.0... nix was man wirklich gut zeigen kann, aber ich hab bei mir auf dem Blog noch n bissl verrücktes Zeug rumfliegen. Lass mich kurz kramen.

[Hans Schmucker]

OK, hier sind ein paar halbwegs interessante SVG Filter (nur getested in Firefox 4 nightly):

Mario Kart:
http://www.tapper-ware.net/stable/PerspectiveWith6LinesOfXML-CanvasEnhanced/index.xhtml

Drehbare Weltkugel:
http://www.tapper-ware.net/stable/SVGWorld/index.xhtml

Animiertes Displacement:
http://www.tapper-ware.net/stable/web.filter.apng.dynamicTexture/index.xhtml

Pseudo-Voxels:
http://www.tapper-ware.net/stable/web.filter.voxels/index.xhtml

[firehorse]

Hans Schmucker schrieb:
--------------------------------------------------------------------------------
> OK, hier sind ein paar halbwegs interessante SVG Filter (nur getested in
> Firefox 4 nightly):
>
> Mario Kart:
> www.tapper-ware.net
>
> Drehbare Weltkugel:
> www.tapper-ware.net
>
> Animiertes Displacement:
> www.tapper-ware.net
>
> Pseudo-Voxels:
> www.tapper-ware.net

Danke für die Mühe. War aber nach dem vorherigen nicht notwendig. Musste nur erstmal kurz zu "Proposal" nachschlagen. Höre man auch net alle Tage ;)

[Hans Schmucker]

Hat in dem Kontext nichts mit ner Hochzeit zu tun :)

Es geht einfach darum SVG Filter für ein breiteres Einsatzgebiet fit zu machen: Vidoe, WebGL, Canvas usw.

[Finch]

> *heul* CSS ist kein Grafikersatz. ... für Grafiken nimmt man Bitmaps
> oder SVG, kein Mensch würde ernsthaft Icons mit CSS bauen außer um zu
> zeigen, dass es geht.

+++ (zu dumm, daß es hier keine Bewertungsfunktion gibt)

Die "iOS-Icons" finde ich ziemlich abschreckend - da wird schon wieder ein Format für etwas missbraucht, für das es nie gedacht war - und für das es zu allem Überfluss auch nicht sonderlich gut geeignet ist.
Das ist wie Tabellen für's Seitenlayout und JavaScript für ... (alles mögliche, was man besser auf dem Server machen sollte, z.B. "Sicherheitsabfragen" u.v.a.m.)

Ich frage mich schon, was hier der Vorteil ist?! So, wie diese Icons gemacht sind, kann man sie nicht mal skalieren:
-webkit-border-bottom-left-radius: 30px; /* AUTSCH */

Also was?
* Datenmenge:
Kann natürlich bei großen Grafiken mit Verläufen ein Vorteil für CSS sein, bei "Icons" ist der Unterschied sicher marginal und auch sonst eher zu vernachlässigen.

* CPU:
Bin mir ziemlich sicher, daß dieses "CSS-Rendering" wesentlich aufwendiger ist als das Darstellen einer Grafik.

* Lesbarkeit der Seiten:
Bin mir ziemlich sicher, daß der Großteil des so erzeugten CSS außer von seinem Schöpfer von niemandem verstanden wird.

* Flexibilität
ok, die ist wohl höher. Mal schnell ne Farbe ändern ist da einfacher als mit einem Bild, von dem man die "Originaldatei" nicht hat (also vor Reduktion auf JPG/PNG).

* Kompatibilität:
Autsch. Autsch, da wird man sich einen ganzen Sack von Problemen einhandeln! Dann funktionieren selbst die Icons nur auf bestimmten Browsern und bestimmten Betriebssystemen - wie die Demo iOS-Icons ja schon unfreiwillig gezeigt hat (Zitat: "Update: Apparently, there’s a bad bug in Chrome on Windows. I haven’t tested this on a PC yet, but I’m working on a fix.")

Also kurz zusammengefaßt: WARUM? WOZU? Das erinnert mich schmerzhaft an die Leute, die alles und jedes als JPG speichern (Screenshots, Icons, Barcharts), ohne mal einen Moment zu überlegen, welches Format wozu da ist...