Grafik nur mit HTML und CSS umsetzten?

[Klaus]

Hallo,

ist es möglich diese Grafik allein mit HTML und CSS umzusetzen?

[Tabellenkalk]

Hallo,

ist es möglich diese Grafik allein mit HTML und CSS umzusetzen?

ich meine, ja das ist möglich.

sinnvoller wäre aber vielleicht svg

Gruß
Kalk

[MrMurphy1]

Hallo,

der Umschlag ist zwar nicht dabei, aber eventuell hilft dir diese Seite weiter:

http://one-div.com/

Alle Grafiken wurden nur mit CSS3 erstellt.

Gruss

MrMurphy

[marctrix]

Hej MrMurphy1,

Hallo,

der Umschlag ist zwar nicht dabei, aber eventuell hilft dir diese Seite weiter:

http://one-div.com/

Alle Grafiken wurden nur mit CSS3 erstellt.

Wir hatten ja kürzlich einen ähnlichen Thread (den ich jetzt natürlich cniht finde). @@Gunnar Bittersmann hat da auf Performanz-Probleme insbesondere bei Smartphones hingewiesen. Kann dazu vielleicht jemand einen Artikel o. ä. beisteuern?

Marc

[Matthias Apsel]

Hallo marctrix,

https://forum.selfhtml.org/self/2015/dec/1/navigation-mit-pfeil/1656121#m1656121

Bis demnächst
Matthias

[Camping_RIDER]

Aloha ;)

der Umschlag ist zwar nicht dabei, aber eventuell hilft dir diese Seite weiter:

http://one-div.com/

Alle Grafiken wurden nur mit CSS3 erstellt.

Wir hatten ja kürzlich einen ähnlichen Thread (den ich jetzt natürlich cniht finde). @@Gunnar Bittersmann hat da auf Performanz-Probleme insbesondere bei Smartphones hingewiesen. Kann dazu vielleicht jemand einen Artikel o. ä. beisteuern?

Ich finde jetzt, auch unter dem von @Matthias Apsel beigesteuerten Link, keine Aussage zur Performance. Ich bin allerdings nicht sicher, ob Performance hier tatsächlich ausschlaggebend ist, vor allem im Vergleich zu svg - immerhin wird auch svg vom Browser gerendert, ein Performancevorteil wäre afais nur gegeben, wenn stattdessen eine (fertiggerenderte) Pixelgrafik verwendet würde, was dann andere (gewichtige) Nachteile hat.

Ich finde den Hinweis von MrMurphy hier gar nicht so schlecht; immerhin handelt es sich um eine Zierleiste, d.h. ein rein visuelles Element, für das die anderen Nachteile, die sowohl rein-CSS-Bilder als auch iconfonts haben, nicht so sehr greifen.

Wichtig wäre an der Stelle nur, das Markup möglichst nicht darunter leiden zu lassen - d.h. nach Möglichkeit kein <div> einzupflanzen, sondern ein semantisch sinnvolles <hr>.

Wo ich allerdings skeptisch bin ist, ob es eine rein-CSS-Lösung für so ein komplexes Bild wie den Brief im Kreis überhaupt gibt, da stößt man mMn an die Grenzen der Machbarkeit rein mit :before und :after.

Ich würde an der Stelle dazu raten, ein <hr> zu nehmen und das Bildchen in der Mitte (in SVG-Form) mittels ...:before { content:url(...svg); /* weitere Gestaltung */ } per CSS einzubauen.

Grüße,

RIDER