메뉴에 투명 블러 유리 효과 이런 것도 CSS로 가능한가요?

2023-08-22 (화) 17:59:17 3,275

홈페이지 취미?로 하는 사람이니 감안해주세요;

소스 보니 이미지로 한 것이 아닌 것 같네요.... 

CSS로 구현 가능할까요?

https://ozez.co.kr/

스크립트 찾아보니 CSS파일이 이런 식으로 시작하긴합니다..

div.jGrowl{z-index:9999;color:#fff;font-size:12px}div.ie6{position:absolute}div.ie6.top-right{right:auto;bottom:auto;left:expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );top:expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' )}div.ie6.top-left{left:expression( ( 0 + ( ignoreMe2 = 

|

답변 1개 / 댓글 1개

CSS backdrop-filter property 로 가능합니다.

Copy
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        html, body {
            width: 100%;
            height: 100%;
        }
        .bg {
            width: 100%;
            height: 100%;
            background-image: url(https://ozez.co.kr/web/upload/appfiles/0zdpAngaKBFnlCcCqpCU4A/1d7021dd904c8ad592a9c73466a1d8c2.jpg);
            position: relative;
        }
        .bg nav {
            position: absolute;
            left: 280px;
            top: 180px;
            width: 20em;
            color: floralwhite;
            backdrop-filter: blur(1em);
        }
        </style>
    </head>
    <body>

    <div class="bg">
        <nav>
            <ul>
                <li>menu-1</li>
                <li>menu-2</li>
                <li>menu-3</li>
            </ul>
        </nav>
    </div>

    </body>
</html>

답변에 대한 댓글 1개

답변을 작성하려면 로그인이 필요합니다.