kostenloser Webspace werbefrei: lima-city


Einfügen von Bildern via CSS3

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    noxious

    Kostenloser Webspace von noxious

    noxious hat kostenlosen Webspace.

    Hallo,

    folgendes Problem: Ich möchte in eine Dropdown-Navigation kleine Icons einbinden, um die Navigation ansprechender zu gestalten Der Schwierigkeitsgrad entsteht dadurch: Da es sich um reine Design-Elemente handelt, möchte ich das ganze machen, ohne den HTML-Code direkt zu verändern - also ohne konkret Elemente hart Reinzucoden.

    Meine erste Idee war, Unicode-Emojis zu verwenden. Diese lassen sich einfach über Codepoints in
    ::before
    -, bzw.
    ::after
    -Pseudo-Elemente einfügen.Problem an der Sache: Sie sind weder konsistent über unterschiedliche Browser/Platformen, noch ist sicher gestellt, dass sie überhaupt verfügbar sind.

    Beispiel

    Meine erste Idee war, das ganze schlicht über
    .class::before{ content: url('/path/to/image.png'); }
    zu regeln, was jedoch daran scheitert, dass sich das Bild dann nicht mehr dimensionieren oder gar einer Klasse zuordnen lässt.
    Als nächstes hatte ich die Idee, dass man - so wie das Beispiel aktuell aufgebaut ist - ja auch mit
    list-style-image
    arbeiten könnte. Da ich jedoch auch unterschiedliche Bilder innerhalb einer Liste brauche, fällt das leider weg.
    Dann kam mir die Idee, ein leeres Pseudo-Element zu verwenden, welches dann das entsprechende Bild als Hintergrund-Bild bekommt. Leider fällt es mir schwer, hier exakt das Ergebnis (Im Prinzip genau so, wie es im Beispiel aussieht - nur eben konsistent) auf die Reihe zu bekommen.

    Möglicherweise hat ja jemand eine Idee, wie man das sauber auf die Reihe bekommt?
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. prinz-und-gloeckner

    prinz-und-gloeckner hat kostenlosen Webspace.

    Naja, dimensionieren oder skalieren lassen sich SVGs besser als Pixelbilder.
    Das ist insbesondere relevant, wenn Schrift im Bild steckt, die Größe von SVGs kann man ja auch in em oder ex festlegen.

    Bei dem Beispiel sehe ich leider nur eine hüpfende Wolke.

    Wenn du etwa eine Liste (ul/ol) als Navigation mit Elementen li ohne Attribute wie class oder id hast, kannst du immer noch über :nth-child(an+b) auf jeden Listeneintrag zugreifen, das sollte ebenfalls mit list-style-image gehen, denn das wirkt ja auf einzelne li-Elemente.


    Achso, der CR 'CSS Backgrounds and Borders Module Level 3' bietet auch noch 'background-size'


    https://www.w3.org/TR/selectors-3/#nth-child-pseudo
    https://www.w3.org/TR/css-backgrounds-3/#the-background-size

    Beitrag zuletzt geändert: 17.9.2019 16:20:21 von prinz-und-gloeckner
  4. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!