Zmiana właściwości elementu, ale tylko w danym obszarze

0

Cześć wszystkim!
Chciałbym stworzyć taki obszar, w którym właściwości pod nim będą się zmieniać, ale poza nim już nie. Coś na zasadzie szkła powiększającego, gdzie w danym obszarze (naszym szkle) obszar się powiększa, tylko zamiast powiększania np. usunięcś blur i podjaśnić. Może być trochę ciężkie do zrozumienia, więc niż fragment kodu.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        #holderElements {
            width: 700px;
            height: 300px;
            background-color: gray;
            padding: 25px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #holderElements #content {
            width: 700px;
            height: 300px;
            background-color: rgb(50, 179, 253);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            filter: brightness(50%) blur(4px);
            border: solid 3px black;
            text-align: center;
            font-size: 33px;
        }

        #holderElements #lighteningSquare {
            width: 200px;
            height: 200px;
            background-color: transparent;
            position: absolute;
            filter: brightness(100%) blur(0px); /*usunąć blur i rozjaśnić content w tym divie*/
            top: 50px;
            left: 500px;
            border: solid 3px black;
        }
    </style>
</head>
<body>
    <div id="holderElements">
        <div id="content">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit, voluptatum corporis. Vitae maiores corporis aperiam quidem ex ullam! Beatae ut distinctio culpa deserunt ipsum alias nesciunt, molestias quisquam vel exercitationem.</p>
        </div>
        <div id="lighteningSquare"></div>
    </div>
</body>
</html>
1

Nie istnieją tego typu filtry w CSS.

Coś podobnego dałoby się zapewne wykonać, robiąc screenshot wybranego fragmentu ekranu:
https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture
a później odtwarzając go w formie powiększonej na canvas.

Ale od jakichś 20 lat używa się w tym celu pewnej sztuczki, tworząc dwie wersje powiększanego elementu:

0

@Freja Draco: I wszystkie podobne tego typu efektu (nawet jak blur czy brigthness) w nowym elemencie (tak jak w kodzie), można uzyskać tylko poprzez i odpowiednio go zmieniając?

0

Tak. Filtry CSS działają na cały element a nie tylko na jakiś jego fragment.
Być może w SVG dałoby się zrobić coś takiego bez kombinowania z fragmentarycznym przesłanianiem dwóch różnych elementów.

0

A można wykorzystać do tego

0

Powinno się dać.

1 użytkowników online, w tym zalogowanych: 0, gości: 1