Contao-Camp 2024
Ergebnis 1 bis 5 von 5

Thema: CSS logo.svg mask und background

  1. #1
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard CSS logo.svg mask und background

    Hallo,

    ich bräuchte Hilfestellung bei der Darstellung eines SVG-Logos.

    Code:
    <div class="logo">
      <a href="./" title="Lupus">
        <div class="logoImg"></div>
      </a>
    </div>
    Code:
    .logo .logoImg {
        mask: url(/files/theme/img/logo.svg);
        display: block;
        height: 160px;
        width: auto;
        background-size: cover;
        background-color: #fff;
        mask-repeat: no-repeat;
        overflow: visible;
        transition: all 0.3s ease;
    }
    Firefox stellt das Logo einwandfrei dar.
    Opera, Brave, Vivaldi und Chrome stellen nur das Rechteck in der Hintergrundfarbe dar.

    Warum benötige ich diese Ausführung?
    SOLL:
    - das SVG-Logo in Weiss soll mit transparentem Hintergrund im Header (keine Hintergrundfarbe) mit "buntem" Bild sichtbar sein.
    - scrollt man die Seite nach unten bekommt der Header die Klasse .shrink und damit einen weissen Hintergrund und das Logo wird schwarz dargestellt

    Code:
    .shrink .logo .logoImg {
        height: 80px;
        background-color: #000;
    }
    caniuse.com sagt wohl, dass mask: bei modernen Browsern funktioniert ...

    Kann mir hier jemand unter die Arme greifen und weiterhelfen, wie ich den Farbwechsel Browserübergreifend hinbekomme.
    Grüsse
    Bernhard


  2. #2
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    da verbläst man Stunden mit Recherche und kaum fragt man öffentlich um Hilfe, springt einem doch noch die notwendige Info an

    mask-image ist die richtige Schreibweise. Und dann braucht's noch die Prefixes ...

    Code:
      .logoImg {
        -webkit-mask-image: url(/files/theme/img/logo.svg);
        mask-image: url(/files/theme/img/logo.svg);
        display: block;
        height: 160px;
        width: auto;
        background-size: cover;
        background-color: #fff;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        overflow: visible;
        transition: all .3s ease;
      }
    Grüsse
    Bernhard


  3. #3
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Könnte man in der svg nicht auch einfach currentColor setzen und dann via css die color ändern?

    s.a.:
    https://css-tricks.com/cascading-svg-fill-color/
    https://kulturbanause.de/blog/das-cu...yword-von-css/
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  4. #4
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    828

    Standard

    @Franko

    Das geht aber doch nur wenn man es so wie hier beschrieben direkt in HTML einbindet - leider , denn nicht immer ist es möglich oder sinnvoll dass so einzubinden.

  5. #5
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard

    Zitat Zitat von Bennie Beitrag anzeigen
    @Franko

    Das geht aber doch nur wenn man es so wie hier beschrieben direkt in HTML einbindet - leider , denn nicht immer ist es möglich oder sinnvoll dass so einzubinden.
    Yepp - aber wenn ich schon svg's nutze möchte ich auch die max. Möglichkeiten nutzen können.
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •