スタイリングフォーム📝 ドリブルのように

12727 ワード
css html webdev tutorial テキストリンク
ドリブルは非常にクールなデザインのサインとフォームをサインアップしています.そして、この記事では、私はどのように同じようにする方法を教えてくれます.
これは、我々が最後に持っているものです.
さあ、コードを書きましょう!
まず、かなりシンプルな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
私を寄付することによって、あなたは私が私のプロジェクトを支持するのを手伝って、私にあなたのためにものすごい新しいものをつくる動機づけます.
同じフロントエンドにポイントを複数のサブドメイン
２週間でAWS認定ソリューションアーキテクト-アソシエイトに合格したので、合格までの目安と知識をまとめてみます