css設計登録ボックス
ログインボックスはほとんどのサイトの重要な構成部分であり、ユーザー体験に大きな影響を及ぼしています.少し時間をかけて自分でログインボックスを設計しました.
効果は次のとおりです.
唯一使われている素材はMargot Fetteフォントです.(カスタムフォントはcss 3プロパティの1つです)
コードは次のとおりです.
効果は次のとおりです.
唯一使われている素材はMargot Fetteフォントです.(カスタムフォントはcss 3プロパティの1つです)
コードは次のとおりです.
<html>
<head>
<style>
@font-face
{
font-family: Margot_Fette;
src: url('Margot_Fette.ttf');
}
#login_panel
{
margin: auto;
margin-top: 100px;
width: 400px;
background-color: rgb(147, 224, 255);
text-align: center;
}
#login_title
{
background-color: rgb(92, 167, 186);
padding: 10px;
margin-bottom: 15px;
font-family: Margot_Fette;
font-size: 30px;
line-height: 30px;
color: white;
}
input
{
margin: 20px;
}
label
{
font-family: Margot_Fette;
color: rgb(92, 167, 186);
}
#submit_button
{
width: 300px;
height: 50px;
font-family: Margot_Fette;
font-size: 30px;
background-color: rgb(255, 66, 93);
color: white;
border: 2px solid rgb(92, 167, 186);
}
</style>
</head>
<body>
<div id = "login_panel">
<div id = "login_title">
Member Login
</div>
<form method = "post">
<label>Username</label>
<input type="text" name="name" />
</br>
<label>Password</label>
<input type="password" name="name" />
</br>
<input id = 'submit_button' type = "submit" value = "Sign in" />
</form>
</div>
</body>
</html>