Social Buttons
  1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How can CSS achieve ground glass effect?

Discussion in 'HTML & Website Design' started by Andrea365, Sep 23, 2021.

0
  1. #1
    I saw the frosted glass effect of a suspended menu on Apple's official website. I was attracted by this effect. Who knows how to implement it?
     
    Andrea365, Sep 23, 2021 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,049
    Likes Received:
    4,362
    Best Answers:
    123
    Trophy Points:
    665
    #2
    Have you got a screenshot?
    This is what their homepage looks like for me

    upload_2021-9-24_15-10-45.png
     
    sarahk, Sep 23, 2021 IP
  3. shalom_m

    shalom_m Greenhorn

    Messages:
    49
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    23
    #3
    The CSS below should do it:

    .glass{

    width: 500px;

    height: 200px;

    background: inherit;

    position: absolute;

    overflow: hidden;

    top: 50%;

    left: 50%;

    margin-left: -250px;

    margin-top: -100px;

    border-radius: 6px;    ​

    }


    .glass:before{

    width: 550px;

    height: 250px;

    content: "";

    position: absolute;

    top: -25px;

    left: -25px;

    bottom: 0;

    right: 0;

    background: inherit;

    box-shadow: inset 0 0 0 180px rgba(255,255,255,0.2);

    filter: blur(10px);    ​

    }    ​
     
    shalom_m, Nov 19, 2021 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,077
    Likes Received:
    1,625
    Best Answers:
    27
    Trophy Points:
    475
    #4
    So, how does it work? I tried jsfiddle but I can't seem to make it working:

    https://jsfiddle.net/3e46japg/

     
    qwikad.com, Nov 20, 2021 IP
  5. shalom_m

    shalom_m Greenhorn

    Messages:
    49
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    23
    #5
    Sorry, I was a bit too fast in uploading (did not check final result).
    Here is the full and doublecheked version:

    <head>
    <style>
    body {
    background: url("https://images.ctfassets.net/hrltx12pl8hq/3MbF54EhWUhsXunc5Keueb/60774fbbff86e6bf6776f1e17a8016b4/04-nature_721703848.jpg") no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 100vh;
    }

    .glass {
    width: 500px;
    height: 200px;
    background: inherit;
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -100px;
    border-radius: 6px;
    z-index: 1;
    box-shadow: 0 0 200px 0 rgba(0, 0, 0, .2);
    }

    .glass:before {
    width: 550px;
    height: 250px;
    content: "";
    position: absolute;
    top: -25px;
    left: -25px;
    bottom: 0;
    right: 0;
    background: inherit;
    box-shadow: inset 0 0 0 180px rgba(255,255,255,0.2);
    filter: blur(10px);
    z-index: -1;
    }
    </style>
    </head>

    <body>

    <div class="glass"></div>

    </body>    ​
     
    shalom_m, Nov 20, 2021 IP
    qwikad.com likes this.
  6. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,077
    Likes Received:
    1,625
    Best Answers:
    27
    Trophy Points:
    475
    #6
    Beautiful, thank you: https://jsfiddle.net/xtd10h6s/

     
    qwikad.com, Nov 20, 2021 IP