私には才能がまったくありません。 私は知識に情熱を注いでいます

Article

20ウェブサイトの「Neumorphism」の例

20ウェブサイトの「Neumorphism」の例


November, 18 2021

今日の投稿では、「NeuMorphism」スタイルのコンポーネントを設計する方法を学びます。 CSSシャドウとシンプルな色を組み合わせることでミニマリズムを目指しています。 そして、もっと調べに行きましょう!

HTMLCSSの「NeuMorphism」効果を作成する

学習に入る前に、この効果を作成するための主な属性が次の一般的な構文のボックスシャドウであることを簡単に説明したいと思います。

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];
  • horizontal offset: 影の水平オフセット
  • horizontal offset: 影の垂直オフセット
  • blur radius : 影の不透明度
  • spread radius : このプロパティの値が0より大きい場合、シャドウサイズは大きくなります。 (この要素を使用するか削除するかを選択できます)。
  • color: 影の色。

また、Webサイトのコンポーネントのニューモルフィズムを設計するには、次の特性のいくつかに注意する必要があります。

  • Shadows: 要素には2つの影(明るい部分と暗い部分)が必要です。
  • Background colors: の背景色は、親要素の背景色と同じである必要があります。
  • Edges: Neumorphism要素のエッジは丸める必要があります。
  • Borders: オブジェクト要素の輪郭は、コントラストがあり、微妙に設定されています

そして、使いやすくするために、ニューモルフィズムのデザインで正方形を作りましょう!

HTML

 <div class="element"></div>

CSS

 body {
   align-items: center;
   background-color: DodgerBlue;
   display: flex;
   height: 100vh;
   justify-content: center;
 }
 .element{
   align-items: center;
   background-color: DodgerBlue;
   box-shadow: 
     12px 12px 16px 0 rgba(0, 0, 0, 0.25),
     -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
   border-radius: 50px;
   display: flex;
   height: 200px;
   justify-content: center;
   margin-right: 4rem;
   width: 200px;
 }

そして、あなたは以下の最終結果を見ることができます。

See the Pen Neumorphism cho trang web by haycuoilennao19 (@haycuoilennao19) on CodePen.

リンク

上記の例でわかるように、ニューモルフィズム設計のコンポーネントを作成することは難しくありません。 box-shadowプロパティに正しい値を設定する方法を知っていることが重要です。 これがニューモルフィズムのもう2つの例です。

See the Pen ví dụ khác về Neumorphism by haycuoilennao19 (@haycuoilennao19) on CodePen.

リンク

次に、Neumorphismボタンのホバー効果を設計および作成する方法を学習します。

HTML

 <div class="btn">このボタンにカーソルを合わせます。</div>

CSS

 body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 100vh;
    background: #f2f3f7;
}
.btn{
    padding: 10px 30px;
    width: 10%;
    height: 5%;
    left: 20%;
    text-transform: uppercase;
    font-weight: bold;
    text-align:center;
    letter-spacing: 2px;
    color: #5a84a2;
    font-size: 16px;
    text-decoration: none;
    border-radius: 660px;
    background: linear-gradient(45deg, #dadbde, #ffffff);
    box-shadow: 9px -9px 18px #c9cacd,
        -9px 9px 18px #ffffff;
}
.btn:hover{
box-shadow: inset -2px -2px 8px rgba(255, 255, 255, 1),
        inset -2px -2px 12px rgba(255, 255, 255, 0.5),
        inset 2px 2px 4px rgba(255, 255, 255, 0.1),
        inset 2px 2px 8px rgba(0, 0, 0, 0.15);
}

そして、あなたは以下の最終結果を見ることができます。

See the Pen mdPWyaj by haycuoilennao19 (@haycuoilennao19) on CodePen.

リンク

オンライン「NeuMorphism」エフェクトツール

手作業でのコーディングに加えて、ツールneumorphism.ioを使用して、Neumorphismスタイルのコンポーネントを簡単に設計することもできます。 このツールで私が気に入っているのは、提供されたプロパティの値をカスタマイズするだけで、すぐに結果を確認できることです。

trang web neumorphism.io

リンク

NeumorphismUIライブラリ

Neumorphism UIは、事前に提供されたコンポーネントを備えたBootstrap上に構築され、Neumorphismスタイルで設計されたライブラリです。 完全に無料で使用できますが、Webサイトにコンポーネントを追加する場合は、約$ 69で購入する必要があります。

Neumorphism UI

リンク

「Neumorphism」の別の例

Neumorphism Button CSS

Neumorphism Button CSS

以下の結果を確認してください。

See the Pen Neumorphism transition using Houdini by jakob-e (@jakob-e) on CodePen.

リンク

CSS3 Neumorphism Button

CSS3 Neumorphism Button

以下の結果を確認してください。

See the Pen Neumorphic Buttons by Sikriti Dakua (@dev_loop) on CodePen.

リンク

CSS Neumorphism UI

以下の結果を確認してください。

See the Pen A bit of neumorphism by Damir (@drovosek2703) on CodePen.

リンク

Neumorphism UI Button Pattern

Neumorphism UI Button Pattern

以下の結果を確認してください。

See the Pen Soft-UI Button Pattern by Tyler Scott Williams (@ogdenstudios) on CodePen.

リンク

Neumorphism Button HTML CSS

Neumorphism Button HTML CSS

以下の結果を確認してください。

See the Pen Neumorphism Buttons by zeynep (@zeynepozdem) on CodePen.

リンク

Neumorphism Component By HTML CSS

Neumorphism Component By HTML CSS

以下の結果を確認してください。

See the Pen neumorph test by victor (@VictorUx) on CodePen.

リンク

Neumorphism Menu Icon

Neumorphism Menu Icon

以下の結果を確認してください。

See the Pen Neumorphism Button by Sebastian Piskaty (@sebastian-piskaty) on CodePen.

リンク

Neumorphism By Shadow

Neumorphism By Shadow

以下の結果を確認してください。

See the Pen Neumorphism: Inner and Drop Shadows by miranda (@mirandalwashburn) on CodePen.

リンク

Click Effect Neumorphism Button

Click Effect Neumorphism Button

以下の結果を確認してください。

See the Pen Neumorphism Button by Naoya (@nxworld) on CodePen.

リンク

Neumorphism Social Icon

Neumorphism Social Icon

以下の結果を確認してください。

See the Pen Neumorphism - Animated Social Icons by Jitendra Nirnejak (@nirnejak) on CodePen.

リンク

Neumorphism Share Button

Neumorphism Share Button

以下の結果を確認してください。

See the Pen soft ui design #neumorphism by Igor Milenkovic (@imilenig) on CodePen.

リンク

Neumorphism Card CSS3

Neumorphism Card CSS3

以下の結果を確認してください。

See the Pen Neumorphism Card UI by Shivnath (@shivnath25) on CodePen.

リンク

Neumorphism Card Menu CSS

Neumorphism Card Menu CSS

以下の結果を確認してください。

See the Pen Neuphormism UI by Susanna Nevalainen (@zuzze) on CodePen.

リンク

Neumorphism Social Icon Button CSS

Neumorphism Social Icon Button CSS

以下の結果を確認してください。

See the Pen Neumorphism | Soft UI by Atul Prajapati (@atulcodex) on CodePen.

リンク

Neumorphism Search Box CSS3

Neumorphism Search Box CSS3

以下の結果を確認してください。

See the Pen Neumorphism Search Bar by Tran Dinh Trung (@tdtrung17693) on CodePen.

リンク

NeumorphismボタンCSS3の合成

NeumorphismボタンCSS3の合成

以下の結果を確認してください。

See the Pen Satisfying Button (Neumorphism) by Yuhomyan (@yuhomyan) on CodePen.

リンク

Neumorphism Card HTML5 CSS3

Neumorphism Card HTML5 CSS3

以下の結果を確認してください。

See the Pen Neumorphism UI // Card by Cosimo Scarpa (@coswise) on CodePen.

リンク

Neumorphism Submit Button

Neumorphism Submit Button

以下の結果を確認してください。

See the Pen Simple & Minimal Neumorphic Buttons by Shinobis (@Shinobis) on CodePen.

リンク

Neumorphism Menu CSS3

Neumorphism Menu CSS3

以下の結果を確認してください。

See the Pen Neumorphism menu by Wouter (@wouterXD) on CodePen.

リンク

Login Form Neumorphism CSS

Login Form Neumorphism CSS

以下の結果を確認してください。

See the Pen neumorhism login form by Animation Bro (@animationbro) on CodePen.

リンク

結論:

この記事があなたのウェブサイトの開発に役立つ「Neumorphism」を提供することを願っています。 ご不明な点がございましたら、メールでお問い合わせください。できるだけ早く回答いたします。 より良い記事を書くことができるようにウェブサイトをサポートしてください。