ニューモーフィズムが簡単に作れるツール紹介

f:id:SGNI_engineer:20211130142501p:plain

ニューモーフィズムが簡単に作れるツールを見つけたので、実装してみました。

ニューモーフィズムとは何か、使い方、実装例を以下で紹介します。

ニューモーフィズムとは
使い方
実装例

ニューモーフィズムとは

f:id:SGNI_engineer:20211130143919p:plain

ニューモーフィズム（Neumorphism）とは、ベース（背景）から要素が押し出されていたり、窪んでいたりするようなスタイルのデザイン手法です。

凹凸によって要素を表現しているため、ミニマルデザインとの相性がとても良く、美しく洗練された印象のデザインに仕上げることができます。

ニューモーフィズムとは？デザイン方法やルールのまとめ | Web Design Trends

使い方

1,以下のサイトにアクセス

neumorphism.io

2,影や形を調整

f:id:SGNI_engineer:20211130111338p:plain

3,cssをコピーして実装する

実装例

f:id:SGNI_engineer:20211130142501p:plain

以下の実装結果は上画像の様になります。

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;
}