Grafik mit CSS

[Kerstin R.]

Guten Abend,

ist so eine Grafik allein mit CSS umsetzbar?
Linkbeschreibung

Leider habe ich im Netz keine passende Vorlage / passenden Code gefunden. Vielleicht könnt ihr mir weiterhelfen?

[MudGuard]

Hi,

ist so eine Grafik allein mit CSS umsetzbar?

ich würd mal sagen: nein.

CSS regelt das Aussehen von Elementen. Es muß also ein Element vorhanden sein ⇒ es braucht noch was anderes als CSS (z.B. ein HTML-Dokument oder eine svg-Grafik oder …)

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

ist so eine Grafik allein mit CSS umsetzbar?

ich würd mal sagen: nein.

Ich würd mal sagen: ja. 😏

foo
{
  background:
    linear-gradient(… 50%, … 50%) 0px 0px,
    linear-gradient(… 50%, … 50%) 0px 2px,
    linear-gradient(… 50%, … 50%) 0px 4px,
    ⋮
    linear-gradient(… 50%, … 50%) 0px 398px,
    linear-gradient(… 50%, … 50%) 1px 0px,
    ⋮
    linear-gradient(… 50%, … 50%) 399px 398px;
  background-size: 2px 1px;
  background-repeat: no-repeat;
}

(mal beispielhaft für eine 400 × 400 Pixel große Grafik; … stehen für die Farbwerte der einzelnen Pixel; ⋮ für ein paar Zeilen mehr)

LLAP 🖖

[MudGuard]

Hi,

ist so eine Grafik allein mit CSS umsetzbar?
ich würd mal sagen: nein. Ich würd mal sagen: ja. 😏

foo
{

oh - ein foo-Element-Selektor. Also brauchst Du ein foo-Element, um Deine Gradienten usw. zur Anzeige zu bringen. Ist also nicht mit CSS allein umsetzbar.

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

ist so eine Grafik allein mit CSS umsetzbar?
ich würd mal sagen: nein. Ich würd mal sagen: ja. 😏

foo
{

oh - ein foo-Element-Selektor. Also brauchst Du ein foo-Element, um Deine Gradienten usw. zur Anzeige zu bringen. Ist also nicht mit CSS allein umsetzbar.

Menno.

LLAP 🖖

[MudGuard]

Hi,

Menno.

hatte ich schon mal erwähnt, daß mich mein Neffe als "Genaunehmer" tituliert hat? 😉

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

hatte ich schon mal erwähnt, daß mich mein Neffe als "Genaunehmer" tituliert hat? 😉

Hatte ich schon mal erwähnt, dass ich dadurch in meinen Anfangsjahren hier im Forum viel gelernt habe? 💐

LLAP 🖖

[MudGuard]

Hi,

hatte ich schon mal erwähnt, daß mich mein Neffe als "Genaunehmer" tituliert hat? 😉

Hatte ich schon mal erwähnt, dass ich dadurch in meinen Anfangsjahren hier im Forum viel gelernt habe? 💐

dann zitiere ich mal Udo Jürgens: Vielen Dank für die Blumen …

cu,
Andreas a/k/a MudGuard

[Tabellenkalk]

Hallo,

hatte ich schon mal erwähnt, daß mich mein Neffe als "Genaunehmer" tituliert hat? 😉

Es ist etwa ein Jahr her :)

Gruß
Kalk

[Matthias Apsel]

Hallo Kerstin R.,

ist so eine Grafik allein mit CSS umsetzbar?
Linkbeschreibung

Du brauchst die Büroklammer als Grafik. Der Rest sollte mit CSS umsetzbar sein. Für einen Anfang siehe https://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Bilder_mit_Bildunterschriften.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Matthias Apsel,

Ohne Büroklammer: http://codepen.io/MatthiasApsel/pen/WpdEMP

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Ohne Büroklammer: http://codepen.io/MatthiasApsel/pen/WpdEMP

Mit Büroklammer: http://codepen.io/gunnarbittersmann/pen/mWpMNj

Ich hätte ein drittes Pseudoelement von figure gebraucht, um die zwei Ebenen der Büroklammer unterzubringen. Gut dass ich einen footer habe.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Mit Büroklammer: http://codepen.io/gunnarbittersmann/pen/mWpMNj

Ich hatte auch überlegt, figcaption für den gelben Zettel zu verwenden. Ich denke jedoch, dass das falsch ist. „42“ oder auch „2“ ist nicht die Beschriftung des Bildes.

The first figcaption element child of the element, if any, represents the caption of the figure element's contents. (HTML5 4.4.11)

Vielleicht ist header ein geeignetes Element?

The header element represents introductory content for its nearest ancestor (HTML5 4.3.7)

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Ich hatte auch überlegt, figcaption für den gelben Zettel zu verwenden. Ich denke jedoch, dass das falsch ist. „42“ oder auch „2“ ist nicht die Beschriftung des Bildes.

Mir war auch etwas mulmig dabei.

Um einschätzen zu können, ob figcaption passt oder nicht, müsste man aber den Kontext wissen.

Es ist aber gar nicht so unwahrscheinlich, dass du recht hast.

LLAP 🖖

[Gunnar Bittersmann]

@@Matthias Apsel

Ich hatte auch überlegt, figcaption für den gelben Zettel zu verwenden. Ich denke jedoch, dass das falsch ist. „42“ oder auch „2“ ist nicht die Beschriftung des Bildes.

Wobei: Wenn kein figcaption, dann ist vermutlich auch figure das falschee Element.

Manchmal ist ein div einfach nur ein div.

LLAP 🖖