Designing Neumorphic Style Circles with HTML and CSS

Rayen

Neumorphism, a design trend that combines skeuomorphism and flat design, adds a soft, realistic touch to user interfaces. In this tutorial, we'll explore how to create stylish neumorphic-style circles using HTML and CSS. Learn how to implement this modern design approach to enhance your website's aesthetics and provide a visually pleasing user experience.




Step 1: HTML Markup:

Start by setting up the HTML structure. Create a container for your neumorphic-style circle, keeping the code clean and efficient.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <title>Neumorphism Circle Animation: CSS</title>
</head>
<body>
    
        <div class="cercle cercle_one"></div>
        <div class="cercle cercle_two"></div>
        <div class="cercle cercle_three"></div>
        <div class="cercle cercle_four"></div>
        <div class="cercle cercle_five"></div>

</body>
</html>

Step 2: Styling with CSS:

Create a separate CSS file (style.css) to define the neumorphic styling. Neumorphism often involves soft shadows, gradients, and subtle highlights to mimic the appearance of physical elements.
/*-------------------- CSS --------------------*/
body{
    display: flex;
    background: #e0e0e0;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
:root{
    --normal:
    inset 0px 0px 0px #bbb,
    inset 0px 0px 0px #fff,
    0px 0px 0px #bbb,
    0px 0px 0px #fff;

    --down:
    inset 10px 10px 30px #bbb,
    inset -10px -10px 30px #fff,
    0px 0px 0px #bbb,
    0px 0px 0px #fff;

    --up:
    inset 0px 0px 0px #bbb,
    inset 0px 0px 0px #fff,
    10px 10px 10px #bbb,
    -10px -10px 30px #fff;
}

.cercle{
    position: absolute;
    aspect-ratio: 1/1;
    
    border-radius: 50%;
    background: #e0e0e0;
    box-shadow: var(--up);

    animation: anime infinite 12s ease-in-out;
}

.cercle_one {
    z-index: 5;
    animation-delay: 0.8s;
    width: 100px;
}

.cercle_two {
    z-index: 4;
    animation-delay: 0.6s;
    width: 200px;
}

.cercle_three {
    z-index: 3;
    animation-delay: 0.4s;
    width: 300px;
}

.cercle_four {
    z-index: 2;
    animation-delay: 0.2s;
    width: 400px;
}

.cercle_five {
    z-index: 1;
    animation-delay: 0.0s;
    width: 500px;
}

@keyframes anime {
    0%{
        box-shadow: var(--normal);
    }
   20%{
        box-shadow: var(--up);
    }
    40%, 50%{
        box-shadow: var(--normal);
    }
    70%{
        box-shadow: var(--down);
    }
    95%, 100%{
        box-shadow: var(--normal);
    }
}

Tailor the circle's size, colors, and shadow properties to match your design preferences. Neumorphism often involves playing with light and shadow to create a tactile feel.

Neumorphic circles can be used in various ways. They make excellent buttons, icons, or decorative elements. Integrate them into your website's layout for a modern and visually appealing design.

0 Comments