CSS zum Wochenende

[Matthias Apsel]

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

[MudGuard]

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

[Matthias Apsel]

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

[Gunnar Bittersmann]

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

[Gunnar Bittersmann]

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

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Du sollst doch nicht immer gleich alles verraten.

Bis demnächst
Matthias

[MudGuard]

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

[Rolf b]

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

[Nomo der Ator]

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

fröhliches Rätseln!

[MudGuard]

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

[Matthias Apsel]

Hallo MudGuard,

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

Oder Knobelei.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

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

Oder Knobelei.

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

LLAP 🖖

[Gunnar Bittersmann]

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

[Gunnar Bittersmann]

@@Gunnar Bittersmann

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

Aufgelöst.

LLAP 🖖