Neues 📌

CSS mix-blend-mode

Erlaubte Werte

• normal: keine Vermischung, der Farbwert ist der des Vordergrundes, Standardwert
• multiply: die Farbwerte werden multipliziert, das Ergebnis ist nicht heller als die Ausgangsfarben
• screen: die Farbwerte der Komplementärfarben werden multipliziert, das Ergebnis ist nicht dunkler als die Ausgangsfarben
• overlay: multiply oder screen, abhängig von der Hintergrundfarbe
• darken: die dunklere der beiden Farben
• lighten: die hellere der beiden Farben
• color-dodge: hellt die Hintergrundfarbe auf
• color-burn: dunkelt die Hintergrundfarbe ab
• hard-light: multiply oder screen, abhängig von der Vordergrundfarbe
• soft-light: darken oder lighten, abhängig von den Farbwerten
• difference: die dunklere Farbe wird von der helleren subtrahiert
• exclusion: ähnlich wie difference
• hue: erzeugt eine Farbe mit dem Farbton der Vordergrundfarbe und der Sättigung und Helligkeit der Hintergrundfarbe
• saturation: erzeugt eine Farbe mit der Sättigung der Vordergrundfarbe und dem Farbton und der Helligkeit der Hintergrundfarbe
• color: erzeugt eine Farbe mit dem Farbton und der Sättigung der Vordergrundfarbe und der Leuchtkraft der Hintergrundfarbe
• luminosity: erzeugt eine Farbe mit der Leuchtkraft der Vordergrundfarbe und dem Farbton und der Sättigung der Hintergrundfarbe

Quelle: selfhtml.org

CSS position-anchor

Das funktioniert so: ein Element wird mit anchor-name: anker; als anchor definiert. Ein anderes Element wird an diesem anchor "verankert":

.anker {
    anchor-name: anker;

    }

    .element {

        position-anchor: anker;

        position: absolute;

        ...

    }

Diese Eigenschaft wird noch nicht von allen wichtigen Browsern unterstützt.

Pseudo-Klasse :target

Mehr anzeigen

Diese Pseudo-Klasse ist ziemlich cool. Dadurch ergeben sich viele Möglichkeiten Klick-Ereignisse nur durch CSS zu steuern.

HTML

<a href="#details">Mehr anzeigen</a>
<section id="details">
    <p>
        Dieser ausgeblendete Text ist nun sichtbar!<br>
       <a href="#">Weniger anzeigen</a>
    </p>
</section>

CSS

#details {
    display: none;
}

#details:target {
    display: block;
}

css @container

Letzte Änderung am 15.06.2025