DD Background Clip Text

Přidá k bloku nadpisů možnost výběru obrázku v písmu, jeho velikosti a pozice.

Příklad #1 – základní

Pevná velikost písma.

BAHNO

RETRO

RETRO

Příklad #2 – responzivní s efektem

Velikost písma se přizpůsobuje šířce nadřazeného elementu + efekt vtištěného nadpisu.

BAHNO

.example-2.dd-bg-clip-text {
    font-size: clamp(2rem, 15cqi, 14rem);
    container-type: inline-size;
    filter: 
        drop-shadow(0 3px 2px rgba(255, 255, 255, 0.35)) 
        drop-shadow(0 -3px 2px rgba(0, 0, 0, 0.8));
}

Příklad #3 – animace

Responzivní s animovaným gifem.

VESMÍR

.example-3.dd-bg-clip-text {
    font-size: clamp(2rem, 15cqi, 14rem);
    container-type: inline-size;
}

Screenshots