Matthias Apsel: CSS zum Wochenende

problematische Seite

Hallo alle,

benn man Codepen eine Box (HTML, CSS, JS) schmaler als 10em macht, ändert sich deren Beschriftung und das auch noch schön animiert.

Wie geht das?

Bis demnächst
Matthias

-- Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
  1. problematische Seite

    Hi,

    benn man Codepen eine Box (HTML, CSS, JS) schmaler als 10em macht, ändert sich deren Beschriftung und das auch noch schön animiert.

    Nö, die Beschriftung bleibt, nur deren Ausrichtung ändert sich.

    Wie das geht: CSS animation, Media Query, transform: rotate ...

    cu,
    Andreas a/k/a MudGuard

    1. problematische Seite

      Hallo MudGuard,

      Nö, die Beschriftung bleibt, nur deren Ausrichtung ändert sich.

      Stellt sich schon die Frage, wer überhaupt die Beschriftung ist?

      <h2 class="box-title" id="css-editor-title"> <span class="box-title-name">CSS</span> </h2>

      Das span-Element jedenfalls nicht.

      body.layout-top .top-boxes .box .box-title-name { visibility: hidden; }

      und ein h2::after auch nicht.

      .box-title::after { font-size: 12px; font-weight: normal; margin-left: 5px; position: relative; }

      Wie das geht: CSS animation, Media Query, transform: rotate ...

      Darfs a bissel mehr sein?

      Bis demnächst
      Matthias

      -- Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
      1. problematische Seite

        @@Matthias Apsel

        Stellt sich schon die Frage, wer überhaupt die Beschriftung ist?

        Die gibt’s doppelt. Warum auch immer.

        Darfs a bissel mehr sein?

        Bei CodePen offenbar ja.

        LLAP 🖖

        -- „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
    2. problematische Seite

      @@MudGuard

      Wie das geht: CSS animation,

      Du meinst transition.

      Media Query

      Nö. Media queries beziehen sich ja auf den Viewport, nicht auf die Ausmaße einzelner Elemente.

      Hier wird mit JavaScript die Breite überwacht und dem div der Klasse "editor-resizer" unter einer bestimmten Breite zusätzlich noch die Klasse "is-horiz-skinny" verpasst.

      transform: rotate ...

      Das allerdings:

      body.layout-top .is-horiz-skinny .box-title--resizer { -webkit-transform: translate(-45px, -11px) rotate(90deg) scale(0.8); transform: translate(-45px, -11px) rotate(90deg) scale(0.8); }

      Alles zu finden im Entwicklerwerkzeug.

      LLAP 🖖

      -- „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
      1. problematische Seite

        Hallo Gunnar Bittersmann,

        Du sollst doch nicht immer gleich alles verraten.

        Bis demnächst
        Matthias

        -- Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        1. problematische Seite

          Hi,

          Du sollst doch nicht immer gleich alles verraten.

          Wenn das ein Rätsel hätte sein sollen, hättest Du das deutlich dazuschreiben sollen.

          cu,
          Andreas a/k/a MudGuard

          1. problematische Seite

            "XXXX zum Wochenende" von Matthias Apsel. Wie deutlich muss er denn noch werden? :)

            1. problematische Seite

              "XXXX zum Wochenende" von Matthias Apsel. Wie deutlich muss er denn noch werden? :)

              fröhliches Rätseln!

            2. problematische Seite

              Hi,

              "XXXX zum Wochenende" von Matthias Apsel.

              das könnte auch was Lustiges oder Nachdenkliches sein.

              Wie deutlich muss er denn noch werden? :)

              Ein "Rätsel"-Tag wäre genug ;-)

              cu,
              Andreas a/k/a MudGuard

              1. problematische Seite

                Hallo MudGuard,

                Ein "Rätsel"-Tag wäre genug ;-)

                Oder Knobelei.

                Bis demnächst
                Matthias

                -- Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                1. problematische Seite

                  @@Matthias Apsel

                  Ein "Rätsel"-Tag wäre genug ;-)

                  Oder Knobelei.

                  Ich hab das Tag „rätsel“ vorhin kreiert.

                  LLAP 🖖

                  -- „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
          2. problematische Seite

            @@MudGuard

            Wenn das ein Rätsel hätte sein sollen, hättest Du das deutlich dazuschreiben sollen.

            Wenn Ihr ein Rätsel wollt, da ist noch eins offen.

            LLAP 🖖

            -- „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
            1. problematische Seite

              @@Gunnar Bittersmann

              Wenn Ihr ein Rätsel wollt, da ist noch eins offen.

              Aufgelöst.

              LLAP 🖖

              -- „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe