Bernd: Anordnung von Wörtern

Hallo,

ist es möglich nur mit CSS so eine Anordnung von Wörtern hinzubekommen?
https://nest-one.com/leistungen/

Oder sollte ich wie auch auf der Seite mit einer Grafik arbeiten? Die Anordnung gefällt mir sehr.

  1. Hallo Bernd,

    die Wörter sind relativ einfach. Der gemusterte Hintergrund von Brand etc müsste auch machbar sein (Textbox mit color:transparent und background:white, die ein Bild mit dem Muster überlagert. Eventuell geht auch was mit SVG, darin bin ich nicht fit.

    SVG könnte eh interessant sein, dass skaliert besser als ein Bild.

    Wenn die Wörter nicht anklickbar sein sollen, bist du mit einem Bild aber vermutlich am schnellsten fertig. Zwei Boxen übereinander sollte auch relativ leicht sein. Um es mit SVG zu bauen, brauchst du schon etwas Übung darin.

    Rolf

    -- sumpsi - posui - clusi
  2. "früher" hieß das Tag-Cloud 😉

    Meine erste Idee:

    • dislpay: grid
    • text-indent
  3. @@Bernd

    ist es möglich nur mit CSS so eine Anordnung von Wörtern hinzubekommen?
    https://nest-one.com/leistungen/

    Welche Wörter?

    Oder sollte ich wie auch auf der Seite mit einer Grafik arbeiten? Die Anordnung gefällt mir sehr.

    Du meinst die Anordnung der Quadrate?

    ⬛︎ ⬛︎
    ⬛︎ ⬛︎

    Sonst ist da ja nichts zu sehen. Nach 30 Sekunden Wartezeit hab ich dem Leiden ein Ende gesetzt.

    LLAP 🖖

    -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Hallo Gunnar Bittersmann,

      Du meinst die Anordnung der Quadrate?

      ⬛︎ ⬛︎
      ⬛︎ ⬛︎

      Sonst ist da ja nichts zu sehen. Nach 30 Sekunden Wartezeit hab ich dem Leiden ein Ende gesetzt.

      Ich war nicht so geduldig.

      Bis demnächst
      Matthias

      -- Pantoffeltierchen haben keine Hobbys.
      ¯\_(ツ)_/¯
  4. Nein, das ist nicht möglich, jedenfalls nicht skalierbar, denn du hast mit CSS ja nur die Möglichkeiten diplay:inline, diplay:inline-block oder float:left bzw. float:right. Die Inline-Möglichkeiten scheiden aus, da analog zu deinem Vorbild ja explizit kein Item auf gemeinsamer Grundlinie mit einem anderen stehen soll. Float scheidet aus, da nichts mehrzeilig um die Ecke floaten kann.

    1. Hallo,

      Nein, das ist nicht möglich, jedenfalls nicht skalierbar, …

      Doch, ist es. Hier nur ein paar Anregungen.

      lg.

      1. Die Frage war, ob es allein mit CSS möglich sei, und die Antwort ist und bleibt: NEIN! (jedenfalls nicht skalierbar, d.h. ohne vorher zu wissen, welche Begriffe da in der Cloud erscheinen)

  5. Hej Bernd,

    Oder sollte ich wie auch auf der Seite mit einer Grafik arbeiten? Die Anordnung gefällt mir sehr.

    Für mich ist das ein reines Demo-Element, das nett aussehen soll (mein Geschmack ist es nicht) und das nur beliebige Business-Platzhalter enthält. Daher würde ich es als Hintergrund über CSS einbinden. Ein weiterer Hinweis auf die Belibigkeit des Bildes ist das nicht gefüllte alt-Attribut. offenbar ist der Betreiber der Seite nicht daran interessiert, unter den abgebildeten Begriffen in einer Suchmaschine gefunden zu werden…

    Ob das mit CSS möglich ist? — Ja, weil man die Worte kennt (@gernotback hat dieselbe Antwort andersrum gegeben: nein, weil man die Worte nicht kennt). Also hängt es davon ab. Hast Du Begriffe, die dir bekannt sind, kannst du Worte in einem CSS-Grid oder per absoluter Positionierung beliebig ausrichten.

    Probleme wird es aber geben, wenn sich Schriftarten, Schriftgrößen usw ändern, weil der Nutzer in der Hinsicht eingreift.

    Einem Nutzer diese Möglichkeit mittels SVG zu nehmen bedeutet dann natürlich, dass einem Teil Deiner Besucher die dort enthaltenen Infos nicht oder nur schwer zugänglich wären (wenn es sich denn in Deinem Fall um Infos und nicht um Schmuck handeln wird).

    Das durscheinende Bild habe ich nie probiert. Sollte aber möglich sein. Ich meine das mal bei Sven Wolfermann (maddesigns.de) gesehen zu haben. Habe das nie verfolgt, weil es praktisch unmöglich ist auf diese Weise vernünftig lesbare Texte zu erhalten.

    Die Begriffe (ich habe mal nach roadshow im Angebot gesucht) finden sich im gesamten Auftritt nicht. Daher sind die offenbar ohne Bezug zu der Firma, die die Seite betreibt. Vielleicht findest du das Bild ja bei Adobe Stock oder pixelio oder Verwandte. Dann kannst du es auch genauso als Schmuckgrafik verwenden.

    Marc

    -- Ceterum censeo Google esse delendam
    1. Hallo Marc,

      Probleme wird es aber geben, wenn sich Schriftarten, Schriftgrößen usw ändern, weil der Nutzer in der Hinsicht eingreift.

      Einem Nutzer diese Möglichkeit mittels SVG zu nehmen bedeutet dann natürlich, dass einem Teil Deiner Besucher die dort enthaltenen Infos nicht oder nur schwer zugänglich wären (wenn es sich denn in Deinem Fall um Infos und nicht um Schmuck handeln wird).

      warum? Ist svg nicht skalierbar?

      Gruß
      Jürgen

      1. Hej JürgenB,

        Hallo Marc,

        Probleme wird es aber geben, wenn sich Schriftarten, Schriftgrößen usw ändern, weil der Nutzer in der Hinsicht eingreift.

        Einem Nutzer diese Möglichkeit mittels SVG zu nehmen bedeutet dann natürlich, dass einem Teil Deiner Besucher die dort enthaltenen Infos nicht oder nur schwer zugänglich wären (wenn es sich denn in Deinem Fall um Infos und nicht um Schmuck handeln wird).

        warum? Ist svg nicht skalierbar?

        Nein, aber man kann sich IMHO keine eigene Schriftart auswählen (bei Legasthenikern beliebt), ich wüsste jetzt auch nicht, wie man die ablenkende Wirkung der Hintergrundgrafik ändert, eigene Hintergrund- und Vordergrundfarben dürften auch ignoriert werden… - was mir jetzt so auf Anhieb einfällt.

        Bei einer Schmuckgrafik alles unerheblich und wenn die wie empfohlen als Hintergrund-Grafik eingebunden wird, ist sie eh futsch, wenn jemand eigene Farben verwendet…

        Marc

        -- Ceterum censeo Google esse delendam