Pseudoelement positionieren

[Matthias Apsel]

Hallo alle,

in der unteren rechten Ecke des Viewports soll eine dezente Schmuckgrafik und ein ebenso dezenter Hinweis dargestellt werden. Meine derzeitige Lösung sieht so aus:

body::after {
  content: "dezenter Hinweis";
  position: fixed;
  z-index: -1;
  left: 0;
  top: 0;
  right: 0;
  height: 100vh;
  line-height: 100vh;
  background-image: url(dezente-grafik.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  text-align: right;
  line-height: 195vh;
  color: #ddd;
  padding-right: 30px; /* passend zur Grafik */
  font-size: .8em;
}

Es funktioniert, aber so richtig mag mir das nicht gefallen. Das geht doch bestimmt besser. Hat jemand eine Idee?

Bis demnächst
Matthias

[Tabellenkalk]

Hallo,

dezenter Hinweis

Bist du sicher, dass dein Hinweis, so dezent er auch sein mag, ins CSS gehört, statt Inhalt zu sein?

Gruß
Kalk

[Matthias Apsel]

Hallo Tabellenkalk,

Bist du sicher, dass dein Hinweis, so dezent er auch sein mag, ins CSS gehört, statt Inhalt zu sein?

Ja.

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

lass top, left, line-height und line-height (sic!) weg. Nimm right: 0 und bottom: 0.

Setze width und height passend zum Bild. Ob Du padding-right brauchst, musst Du dann gucken.

Rolf

[Matthias Apsel]

Hallo Rolf B,

lass top, left, line-height und line-height (sic!)

😂

weg. Nimm right: 0 und bottom: 0.

Setze width und height passend zum Bild. Ob Du padding-right brauchst, musst Du dann gucken.

Leider nein. Der Text ist dann am oberen Rand des Bildes und ich müsste wieder mit line-height hantieren. Das stellt also keine Verbesserung dar.

EDIT: Spielwiese

Bis demnächst
Matthias

[Rolf B]

Hallo Matthias,

keine Verbesserung

Very well. Definiere: "Verbesserung".

Weniger CSS Text?

Weniger magische Zahlen? width und height wirst Du brauchen, weil Du nur ein ::after Element haben kannst und darin auch kein HTML, d.h. du kannst die Elementgröße nicht an's Bild anpassen.

Kein padding-top oder line-height, um den Text nach unten zu bekommen? vertical-align:bottom greift nur bei display:table-cell, aber das hilft nicht, weil sich table-cell mit position:fixed beißt.

Aber

display:flex; flex-direction: column; justify-items: flex-end;

würde gehen. Ist nur sehr verbös.

Verbleibende Magics sind die 30px für den Abstand rechts und die Maße der Box.

Rolf

[Gunnar Bittersmann]

@@Rolf B

display:flex; flex-direction: column; justify-items: flex-end;

würde gehen. Ist nur sehr verbös.

Na dann nimm halt @include align-bottom;. 😜

(Die Definition des Mixins steht irgenwo zur mehrfachen Verwendung parat.)

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Gunnar Bittersmann]

@@Matthias Apsel

Es funktioniert, aber so richtig mag mir das nicht gefallen.

Besonders der Missbrauch von line-height gefällt mir gar nicht.

line-height gibt den Zeilenabstand bei Mehrzeiligkeit an, sonst nichts. Nicht die vertikale Ausrichtung des Texts, nicht den Abstand des Texts – dafür gibt es entsprechende andere CSS-Eigenschaften.

Und wer jetzt sagt ‚Mein Text ist nie mehrzeilig‘ – sag niemals nie.

Das geht doch bestimmt besser. Hat jemand eine Idee?

Hold my beer.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Und wer jetzt sagt ‚Mein Text ist nie mehrzeilig‘ – sag niemals nie.

Er ist nie mehrzeilig. Und wenn doch ist er nicht lesbar. Das ist nicht schlimm. Der Text steht nicht ohne Grund nur im CSS.

Das geht doch bestimmt besser. Hat jemand eine Idee?

Hold my beer.

Kein Bier vor vier.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Er ist nie mehrzeilig.

Auch nicht, wenn ein Smart-Watch-Nutzer die Schrift auf 300% setzt?

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Rolf B]

Hallo Gunnar,

display: flex;
flex-direction: column;
justify-content: flex-end;

Dann sind wir uns ja einig... Bei mir war's immerhin nach vier.

Rolf

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Hold my beer.

Flex hat @Rolf B auch schon empfohlen, danke euch beiden. Mal sehen, wie es im IE aussieht.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

body::after {

Muss es denn ::after sein? Bei ::before kannst du (vermutlich) z-index: -1 einsparen.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Muss es denn ::after sein?

nein.

Bei ::before kannst du (vermutlich) z-index: -1 einsparen.

Leider nein.

Bis demnächst
Matthias