CSS – Wie man einen Gradienten überschreibt

Manchmal will man einen Gradienten des Elternelementes am Kindelement wieder deaktivieren. Folgender kleiner CSS-Schnippsel zeigt eine Lösung. Die Erstbeste.


Ich hatte mal die Ecke einer Bootstrap-Navigation mittels CSS-Gradient abgeschnitten. Das Untermenü sollte diese Ecke dann nicht mehr haben.

Nach langem Rumprobieren und Suchen bin ich dann auf diese erstbeste Lösung gestoßen, um den Gradienten wieder komplett zu überschreiben. Dazu muss man zuerst den background auf „none“ setzen und dann die Farbe.

background: none;
background: blue;

Hier ein Beispiel in Less, um den Effekt in der oberen Abbildung zu bekommen.


.menu-1 {
    min-width: @nav-width;
    color: #fff;
    .gradient(@color-light);
    a {
        &:hover {
            .gradient(@color);
        }
    }

    &.active {
        a {
            &:hover {
                .gradient(@color);
            }
        }
    }
}

.menu-2 {
    a {
        &:hover {
            .gradientOff(@color-light);
        }
    }

    &.active {
        a {
            &:hover {
                .gradientOff(@color);
            }
        }
    }
}

/* Gradient an */
.gradient(@color) {
    background-color: @color;
    background: linear-gradient(225deg, transparent 10px, @color 0) top right;
}

/* Gradient aus */
.gradientOff(@color) {
    background: none;
    background: @color;
}

Ich hoffe wie immer, diese erstbeste Lösung war hilfreich.

Ähnliche Beiträge

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert