Glossy Glass Card Effect: HTML and CSS Tutorial @rayen-code

Rayen

Web design trends are constantly evolving, and one of the latest styles that have captured attention is the glossy glass card effect. This effect gives your website a modern and sophisticated look. In this tutorial, we'll guide you through creating a glossy glass card effect using HTML and CSS. Elevate your web design skills and make your website shine with this stunning design element.




Step 1: HTML Markup:

Begin by setting up the HTML structure for your glossy glass card. Create a <div> element that will represent the card. 
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glossy Card Effect</title>

    <link rel="stylesheet" href="style.css">


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

</head>
<body>

    <div class="wrapper">
        <div style="--i:15deg" class="glass">
            <i class="fa-brands fa-html5"></i>
            <p>html</p>
        </div>
        <div style="--i:-15deg" class="glass">
            <i class="fa-brands fa-css3-alt"></i>
            <p>css</p>
        </div>
        <div style="--i:25deg" class="glass">
            <i class="fa-brands fa-react"></i>
            <p>react</p>
        </div>
        <div style="--i:10deg" class="glass">
            <i class="fa-brands fa-bootstrap"></i>
            <p>bootstrap</p>
        </div>
    </div>
    
</body>
</html>

Step 2: Styling with CSS:

Create a separate CSS file (style.css) to style the glossy glass card and define its appearance.
/*-------------------- CSS --------------------*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


body{
    background: #373d36;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.wrapper{
    display: flex;
    justify-content: center
    ;
    align-items: center;
    position: relative;
}

.glass{
    width: 200px;
    height: 240px;
    background: linear-gradient(#fff2, #fff0);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center
    ;
    margin: 0 -50px;
    border: 1px solid #fff4;
    box-shadow: 0 25px 25px #00000044;
    cursor: pointer;
    transform: rotate(var(--i));
    transition: 0.5s;
    overflow: hidden;
}

.wrapper:hover .glass{
    margin: 0 20px;
    transform: rotate(0);
}

.glass i{
    color: #ffffff88;
    font-size: 3rem;
transition: 0.5s;
}
.glass:hover i{
    color: #fff;


}

.glass p{
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100% ;
    text-transform: uppercase;
    font-weight: 700;
    padding: 8px;
    background: #fff2;
    letter-spacing: 0;
    color: white;
    transition: 0.5s;
}
.glass:hover p{
    letter-spacing: 0.1rem;
}

Congratulations! You've successfully created a sleek and elegant glossy glass card effect using HTML and CSS. This effect can give your website a contemporary and stylish appearance, making it more visually appealing to visitors.

Feel free to implement this glossy glass card effect on various sections of your website, such as product showcases, featured content, or call-to-action elements. By following this tutorial, you've acquired a valuable design skill that can help you create more eye-catching and engaging user interfaces.


0 Comments