Version: 1.1
hypetech.pl
Wygląd

Filtr tła

Klasy pozwalające na backdrop-filter

backdrop-filter: blur

Rozmycie elementu pod filtrem

Klasa Styl CSS
backdrop-blur-<dim> 
backdrop-filter: blur(<dim>);

<div>
    <div class="d-flex gap-8 px-6 py-3">
        <div>
            <p>backdrop-blur-1</p>
            <div class="pos-rel d-flex items-center justify-center">
                <img class="maxh-150px w-auto aspectratio-1 border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
                <div class="pos-abs w-50p aspectratio-1 bgcolor-white/30 backdrop-blur-1"></div>
            </div>
        </div>
        <div>
            <p>backdrop-blur-2</p>
            <div class="pos-rel d-flex items-center justify-center">
                <img class="maxh-150px w-auto aspectratio-1 border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
                <div class="pos-abs w-50p aspectratio-1 bgcolor-white/30 backdrop-blur-2"></div>
            </div>
        </div>
        <div>
            <p>backdrop-blur-3</p>
            <div class="pos-rel d-flex items-center justify-center">
                <img class="maxh-150px w-auto aspectratio-1 border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
                <div class="pos-abs w-50p aspectratio-1 bgcolor-white/30 backdrop-blur-3"></div>
            </div>
        </div>
    </div>
    <div class="d-flex gap-8 px-6 py-3">
        <div>
            <p>backdrop-blur-1px</p>
            <div class="pos-rel d-flex items-center justify-center">
                <img class="maxh-150px w-auto aspectratio-1 border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
                <div class="pos-abs w-50p aspectratio-1 bgcolor-black/30 backdrop-blur-1px"></div>
            </div>
        </div>
        <div>
            <p>backdrop-blur-2px</p>
            <div class="pos-rel d-flex items-center justify-center">
                <img class="maxh-150px w-auto aspectratio-1 border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
                <div class="pos-abs w-50p aspectratio-1 bgcolor-black/30 backdrop-blur-2px"></div>
            </div>
        </div>
        <div>
            <p>backdrop-blur-3px</p>
            <div class="pos-rel d-flex items-center justify-center">
                <img class="maxh-150px w-auto aspectratio-1 border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
                <div class="pos-abs w-50p aspectratio-1 bgcolor-black/30 backdrop-blur-3px"></div>
            </div>
        </div>
    </div>
</div>

backdrop-filter: brightness

Rozjaśnienie tła za pomocą filtra

Klasa Styl CSS
backdrop-brightness-<int> 
backdrop-filter: brightness(<int>%);

<div class="d-flex gap-8 px-6 py-3">
    <div>
        <p>backdrop-brightness-50</p>
        <div class="pos-rel d-flex items-center justify-center">
            <img class="maxh-150px w-auto aspectratio-1 border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
            <div class="pos-abs w-50p aspectratio-1 bgcolor-white/30 backdrop-brightness-50"></div>
        </div>
    </div>
    <div>
        <p>backdrop-brightness-100</p>
        <div class="pos-rel d-flex items-center justify-center">
            <img class="maxh-150px w-auto aspectratio-1 border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
            <div class="pos-abs w-50p aspectratio-1 bgcolor-white/30 backdrop-brightness-100"></div>
        </div>
    </div>
    <div>
        <p>backdrop-brightness-150</p>
        <div class="pos-rel d-flex items-center justify-center">
            <img class="maxh-150px w-auto aspectratio-1 border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
            <div class="pos-abs w-50p aspectratio-1 bgcolor-white/30 backdrop-brightness-150"></div>
        </div>
    </div>
</div>

backdrop-filter: contrast

Kontrast tła za pomocą filtra

Klasa Styl CSS
backdrop-contrast-<int> 
backdrop-filter: contrast(<int>%);

<div class="d-flex gap-8 px-6 py-3">
    <div>
        <p>backdrop-contrast-50</p>
        <div class="pos-rel d-flex items-center justify-center">
            <img class="maxh-150px w-auto aspectratio-1 border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
            <div class="pos-abs w-50p aspectratio-1 bgcolor-white/30 backdrop-contrast-50"></div>
        </div>
    </div>
    <div>
        <p>backdrop-contrast-100</p>
        <div class="pos-rel d-flex items-center justify-center">
            <img class="maxh-150px w-auto aspectratio-1 border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
            <div class="pos-abs w-50p aspectratio-1 bgcolor-white/30 backdrop-contrast-100"></div>
        </div>
    </div>
    <div>
        <p>backdrop-contrast-150</p>
        <div class="pos-rel d-flex items-center justify-center">
            <img class="maxh-150px w-auto aspectratio-1 border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
            <div class="pos-abs w-50p aspectratio-1 bgcolor-white/30 backdrop-contrast-150"></div>
        </div>
    </div>
</div>

backdrop-filter: opacity

Przezroczystość tła za pomocą filtra

Klasa Styl CSS
backdrop-opacity-<int> 
backdrop-filter: opacity(<int>%);

<div class="d-flex gap-8 px-6 py-3">
    <div>
        <p>backdrop-opacity-50</p>
        <div class="pos-rel d-flex items-center justify-center">
            <img class="maxh-150px w-auto aspectratio-1 border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
            <div class="pos-abs w-50p aspectratio-1 bgcolor-white/30 backdrop-opacity-50 backdrop-blur-2"></div>
        </div>
    </div>
    <div>
        <p>backdrop-opacity-70</p>
        <div class="pos-rel d-flex items-center justify-center">
            <img class="maxh-150px w-auto aspectratio-1 border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
            <div class="pos-abs w-50p aspectratio-1 bgcolor-white/30 backdrop-opacity-70 backdrop-blur-2"></div>
        </div>
    </div>
    <div>
        <p>backdrop-opacity-100</p>
        <div class="pos-rel d-flex items-center justify-center">
            <img class="maxh-150px w-auto aspectratio-1 border--solid fit-cover fitpos-center" src="/images/baloons.jpg">
            <div class="pos-abs w-50p aspectratio-1 bgcolor-white/30 backdrop-opacity-100 backdrop-blur-2"></div>
        </div>
    </div>
</div>