ニューモーフィズムを実装してみた #CSS

言語

html
css

用いたツール

neumorphism.io

実装例

以下の実装で上記の様に実装できます。

sample.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="sample.css">
</head>
<body>
    <div class = "contents">
        <div class="button1">
            <a class="icon" href="#">
                <i class="fas fa-user-alt"></i>
            </a>
        </div>
        <div class="button2">
            <a class="icon" href="#">
                <i class="fas fa-search"></i>
            </a>
        </div>
        <div class="button3">
            <a class="icon" href="#">
                <i class="fas fa-heart" style="color: #902727;"></i>
            </a>
        </div>
        <div class="button4">
            <a class="icon" href="#">
                <i class="fas fa-home"></i>
            </a>
        </div>
    </div>
</body>
</html>

sample.css

body{
    background: #ebebeb;
}
.icon{
    display: block;
    font-size: 2em;
    margin-top: 25px;
    align-items: center;   
    color: rgb(88, 88, 88);
}
.contents{
    text-align: center;

}
.button1{
    width: 100px;
    height: 100px;
    margin: 10px;
    display: inline-block;
    border-radius: 20px;
    background: #ebebeb;
    box-shadow:  24px 24px 20px #d1d1d1,
                 -24px -24px 20px #ffffff;
}
.button2{
    width: 100px;
    height: 100px;
    margin: 10px;
    display: inline-block;
    border-radius: 50px;
    background: linear-gradient(145deg, #d4d4d4, #fbfbfb);
    box-shadow:  24px 24px 20px #d1d1d1,
                 -24px -24px 20px #ffffff;
}
.button3{
    width: 100px;
    height: 100px;
    margin: 10px;
    display: inline-block;
    border-radius: 20px;
    background: linear-gradient(145deg, #fbfbfb, #d4d4d4);
    box-shadow:  24px 24px 20px #d1d1d1,
                 -24px -24px 20px #ffffff;
}
.button4{
    width: 100px;
    height: 100px;
    margin: 10px;
    display: inline-block;
    border-radius: 50px;
    background: #ebebeb;
    box-shadow: inset 24px 24px 20px #d1d1d1,
                inset -24px -24px 20px #ffffff;
}