HTMLとCSSを用いたメタモルフィズムログインフォームUI設計

25564 ワード
webdev css javascript html テキストリンク
この記事では、HTMLとCSSのプログラミングコードを使用して、Glassmorphismのログインフォームを作成する方法を紹介します.以前は、ノイフォリズムデザインのログインフォームを作成する方法を示しました.
このログインフォームは転送ログインフォームのようです.この場合、背景は不透明に見えます.言い換えれば、背景にカラー画像を使用する場合は、不透明な方法で見ることができます.これは、通常のログインフォームよりもずっと面白いようです.私はHTMLとCSSプログラミングコードを使ってこのデザインを作りました.
必要に応じてwatch the live demoすることができますまた、必要なsource codeをダウンロードします.しかし、あなたが初心者ならば、あなたはステップによる完全なステップを知るために以下のチュートリアルに従うことができます.

ステップ1:基本的な構造とタイトルを作成する
次のHTMLプログラミングコードは、基本的な構造とタイトルを作成するために使用します.
<!DOCTYPE html>
<html lang="en">
<head>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <style>

    /* CSS Code */

 </style>
</head>
<body>
  <div class="login">
    <h1>Login</h1>

    <!--login Information-->

  </div>  
</body>
</html>


ステップ2:デザインの背景
私は背景にイメージを使用して、下のコードを使用して背景を設計します.
  body {
  font: 13px/20px "Open Sans", Tahoma, Verdana, sans-serif;
  color: #a7a599;
  background-image: url(3.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
}


ステップ3:基本ガラス同型構造
このログインフォームの背景を次のプログラミングコードを使ってガラス同型設計に変換しました.この場合、背景の画像はやや不透明になっている.あなたが増加することができますまたはあなたが望むように量を減らす.
.login {
  position: relative;
  margin: 100px auto;
  width: 370px;
  height: 315px;
 background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);
    box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
  border-radius: 3px;

}


Step 4 :このログインフォームでタイトルをデザインしました
下のCSSプログラミングコードを使ってこのログインフォームでタイトルをデザインしました.この場合、ヘッダー行は通常のログインページより少し不透明です.
.login h1 {
  line-height: 55px;
  font-size: 24px;
  font-weight: bold;
  font-family: "Open Sans", sans-serif;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);
    box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
    margin-top: 0px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}


ステップ5:メールIDとパスワードホルダーを作成する
次のHTMLコードを使用して、ログインフォーム、すなわちパスワードとメールIDで最も重要なものを入力する場所を作成しました.その場合、私は一度に1つのアイコンを使用し、そのアイコンを動作させるためにフロントアッサムのCDNアイコンリンクを使用しました.ヘッダータグで使用する必要があります.
 <form class="form" method="post" action="#">

      <p class="field">
        <input type="text" name="login" placeholder="Username" required/>
        <i class="fa fa-user"></i>
      </p>

      <p class="field">
        <input type="password" name="password" placeholder="Password" required/>
        <i class="fa fa-lock"></i>
      </p>

    </form>


ステップ6 :入力スペースの設計
入力空間を次のコードを使って設計しました.次のプログラミングは、このログインフォームのアイコンをデザインしました.

.form {
  width: 100%;
}
.form .field {
  position: relative;
  margin: 0 50px;
}
::-webkit-input-placeholder {
  color: #ffffff;
  font-family: "Open Sans";
}

.form input[type=text], input[type=password] {
  font-family: "Open Sans", Calibri, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 10px 15px 10px 55px;
  position: relative;
  width: 200px;
  height: 24px;

  border: none;
  background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);
    box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
  color: rgb(255, 255, 255);
  transition: color 0.3s ease-out;
}

.form input[type=text] {
  margin-bottom: 15px;
}
/*continued styling for input */
.form input[type=checkbox] {
  display: none;
}


ステップ7:アイコンを飾る
次のコードは美しくアイコンを飾るのに役立つし、どのように色効果を追加しました.
.form .field i {
  font-size: 18px;
  left: 0px;
  top: 0px;
  position: absolute;
  height: 44px;
  width: 44px;
  color: #f7f3eb;
  background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);
    box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
  text-align: center;
  line-height: 44px;
  transition: all 0.3s ease-out;
  pointer-events: none;
}


ステップ8 :ログインボタンを作成する
このログインフォームの最後の要素は、次のプログラミングコードを作成するために使用したログインボタンです.
 <p class="submit"><input type="submit" name="sent" value="Login"></p>


.form input[type=submit] {
  margin-top: 15px;
  width: 270px;
  text-align: center;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
  padding: 12px 0;

  color: #fff;
  background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.2);
    border-left: 1px solid rgba(255,255,255,0.2);
    box-shadow: 5px 5px 30px rgba(0,0,0,0.2);

  text-transform: uppercase;
  border: none;

  margin-bottom: 20px;

}

うまくいけば、このデザインから、あなたは単純なガラスのようなデザインのログインフォームをつくる方法を学びました.ここで私はあなたがこのデザインをどのように作ったかを説明しました.
何か問題があれば、間違いなくコメントできます.
あなたは、このようなより多くのチュートリアルのために私のブログを訪問することができます.
https://www.foolishdeveloper.com/
ノードを使用したGraphSQLサーバーの構築JS・アンド・エクスプレス
[TIL] 21-08-10