Kerstin R.: Grafik mit CSS

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?

  1. 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

    1. @@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 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. 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

        1. @@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 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. Hi,

            Menno.

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

            cu,
            Andreas a/k/a MudGuard

            1. @@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 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. 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

            2. Hallo,

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

              Es ist etwa ein Jahr her :)

              Gruß
              Kalk

  2. 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

    --
    Rosen sind rot.
    1. Hallo Matthias Apsel,

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

      Bis demnächst
      Matthias

      --
      Rosen sind rot.
      1. @@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 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. 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

          --
          Rosen sind rot.
          1. @@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 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          2. @@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 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory