スタイリングフォーム📝 ドリブルのように
ドリブルは非常にクールなデザインのサインとフォームをサインアップしています.そして、この記事では、私はどのように同じようにする方法を教えてくれます.
これは、我々が最後に持っているものです.
さあ、コードを書きましょう!
まず、かなりシンプルなHTMLフォームのマークダウンを追加します.
今持っているものを見てください.
うん😒, 賛成、それは非常によく見えません.しかし、我々はそれがいくつかのスタイルを追加修正することができます.私はあなたのブランドの色を使用するコードのコメントを意味します.
ヒント:時にはRGBまたは16進数の代わりにRGBAを使用する必要がある透明性を確認します.
期待通りに働いている.
かなり良いですね😀?
コーヒーを買えます
https://buymeacoff.ee/vladoss
私を寄付することによって、あなたは私が私のプロジェクトを支持するのを手伝って、私にあなたのためにものすごい新しいものをつくる動機づけます.
これは、我々が最後に持っているものです.
さあ、コードを書きましょう!
まず、かなりシンプルなHTMLフォームのマークダウンを追加します.
<div class="sign">
<form method="post" action="anyfile.php">
<label for="login">Login:</label>
<input type="text" name="login" id="login">
<label for="password">Password:</label>
<input id="password" type="password" name="password">
<input type="submit" value="Sign in">
</form>
</div>
例えば2つの入力を追加しました.あなたが追加することができますまたはすべてを削除します.今持っているものを見てください.
うん😒, 賛成、それは非常によく見えません.しかし、我々はそれがいくつかのスタイルを追加修正することができます.私はあなたのブランドの色を使用するコードのコメントを意味します.
ヒント:時にはRGBまたは16進数の代わりにRGBAを使用する必要がある透明性を確認します.
.sign{
width:500px; /* change the width value to change text inputs width */
}
form input:not([type="submit"]){
width: 100%;
height: auto;
margin: auto;
padding: 10px;
border: 1.3px solid transparent;
background:#f0f0f0;
border-radius:0.6rem;
transition: all .3s ease-in-out;
}
form label{
margin-top:15px;
font-size:1.35em;
}
form input:not([type="submit"]):hover{
box-shadow: 0 0 0 4px rgba(234,76,137,0.1); /* brand color with 0.1 transparency*/
background:white;
border:1px solid rgba(0,0,0,0.1);
}
form input:not([type="submit"]):focus{
box-shadow: 0 0 0 4px rgba(234,76,137,0.1); /* brand color with 0.1 transparency*/
background:white;
border:1px solid rgba(234,76,137,0.4); /* brand color with 0.1 transparency*/
}
form input[type="submit"]{
padding:12px;
margin-top:28px;
border-radius:0.6rem;
background:#ea4c89; /*brand color*/
font-size:1.3em;
width:130px;
border:none;
transition:.2s all ease-in-out;
color:white;
float:left;
}
form input[type="submit"]:hover{
background:#f082ac; /* lighter brand color*/
}
form input[type="submit"]:active{
background:#bb3d6e; /* lighter brand color*/
}
これは私たちが終えたことです.期待通りに働いている.
かなり良いですね😀?
コーヒーを買えます
https://buymeacoff.ee/vladoss
私を寄付することによって、あなたは私が私のプロジェクトを支持するのを手伝って、私にあなたのためにものすごい新しいものをつくる動機づけます.
Reference
この問題について(スタイリングフォーム📝 ドリブルのように), 我々は、より多くの情報をここで見つけました https://dev.to/vla_doss/styling-a-form-like-on-dribbble-43o1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol