Dribbble과 같은 form📝 스타일 지정

Dribbble은 매우 멋진 디자인의 로그인 및 가입 양식을 가지고 있습니다. 그리고 이 글에서는 어떻게 만드는지 알려드리겠습니다.

이것이 우리가 결국 갖게 될 것입니다:


이제 코드를 작성해 봅시다!

우선, 매우 간단한 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>

예를 들어 두 개의 입력을 추가했습니다. 원하는 모든 것을 추가하거나 제거할 수 있습니다.

우리가 지금 가지고 있는 것을 보십시오:


예😒, 동의합니다. 별로 좋아 보이지 않습니다. 그러나 일부 스타일을 추가하여 수정할 수 있습니다. 브랜드 색상을 사용해야 하는 코드에 주석으로 표시하겠습니다.

팁: 때로는 rgb 또는 hex 대신 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

저를 기부함으로써 당신은 제가 제 프로젝트를 지원하고 당신을 위한 멋진 새 프로젝트를 만들도록 동기를 부여하는 데 도움이 됩니다.