Implementing Frosted Glass Effect

To achieve a frosted glass effect, we can use CSS and the blur property of the filter attribute.

Implementation

First, we need to define a background that fills the entire screen.

<style type="text/css">
    body{
        width: 100vw;
        height: 100vh;
        margin: 0;
        background-image: url("http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

Next, we define a div with specified width and height to achieve the blur effect. Directly applying the blur property to the element would blur both the element and its child elements, which is not what we want. Instead, we can use a pseudo-element to achieve the blur effect. First, we set the position property of the element to absolute so that the pseudo-element can adapt to its dimensions. Using relative is also possible, but it would affect the positioning of the drag mentioned later. In the pseudo-element, we set position: absolute; top: 0; left: 0; right: 0; bottom: 0; to inherit the dimensions of the element. Then, we set the background in the pseudo-element and apply the blur effect to the background, avoiding the issue of blurring all child elements.

<style type="text/css">
.blur {
    position: absolute;
    overflow: hidden;
    z-index: 1;
    width: 500px;
    height: 300px;
    cursor: move;
}

.blur::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    margin: -30px;
    background-image: url("http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    filter: blur(10px);
}
</style>

To enhance the visual effect, we have implemented a simple drag functionality.

<script type="text/javascript">
    var element = document.querySelector(".blur");
    element.onmousedown = function(event) {
        var event = event || window.event;
        var edgeX = event.clientX - element.offsetLeft;
        var edgeY = event.clientY - element.offsetTop; 
        document.onmousemove = function(event) {
            var event = event || window.event;
            var relativeX = event.clientX - edgeX;
            var relativeY = event.clientY - edgeY;
            element.style.left =  relativeX + "px";
            element.style.top = relativeY + "px";
            return false;
        };
        document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;
    }
</script>

Code Example

<!DOCTYPE html>
<html>

<head>
    <title>Glass Effect</title>
    <style type="text/css">
    body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        overflow: hidden;
        background-image: url("http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .container {
        width: 100vw;
        height: 100vh;
    }

    .x-y-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .blur {
        position: absolute;
        overflow: hidden;
        z-index: 1;
        width: 500px;
        height: 300px;
        cursor: move;
    }
.blur::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    margin: -30px;
    background-image: url("http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    filter: blur(10px);
}
</style>
</head>

<body>
    <div class="container x-y-center">
        <div class="blur x-y-center">
            <div>Gaussian Blur</div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var element = document.querySelector(".blur");
    element.onmousedown = function(event) {
        var event = event || window.event;
        var edgeX = event.clientX - element.offsetLeft;
        var edgeY = event.clientY - element.offsetTop; 
        document.onmousemove = function(event) {
            var event = event || window.event;
            var relativeX = event.clientX - edgeX;
            var relativeY = event.clientY - edgeY;
            element.style.left =  relativeX + "px";
            element.style.top = relativeY + "px";
            return false;
        };
        document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;
    }
</script>

</html>

Daily Question

https://github.com/WindrunnerMax/EveryDay

Reference

https://www.jb51.net/article/73157.htm https://www.cnblogs.com/ivan5277/p/10007273.html https://blog.csdn.net/u010852544/article/details/43967749