CSS zum Wochenende
Matthias Apsel
- css
- sonstiges
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
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
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
@@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 🖖
@@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 🖖
Hallo Gunnar Bittersmann,
Du sollst doch nicht immer gleich alles verraten.
Bis demnächst
Matthias
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
"XXXX zum Wochenende" von Matthias Apsel. Wie deutlich muss er denn noch werden? :)
"XXXX zum Wochenende" von Matthias Apsel. Wie deutlich muss er denn noch werden? :)
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
Hallo MudGuard,
Ein "Rätsel"-Tag wäre genug ;-)
Oder Knobelei.
Bis demnächst
Matthias
@@Matthias Apsel
Ein "Rätsel"-Tag wäre genug ;-)
Oder Knobelei.
Ich hab das Tag „rätsel“ vorhin kreiert.
LLAP 🖖
@@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
Wenn Ihr ein Rätsel wollt, da ist noch eins offen.
LLAP 🖖