로그인 폼 디자인 소스 - logeu-in pom dijain soseu

Question

최근에 Bootstrap 4가 정식 릴리즈 되었네요. 사무실에서 사용할 Web-base의 PHP로 된 프로그램을 제작하면서 몇몇 디자인 폼 들을 공개할까 생각중입니다. 뭐 대단한것은 아니지만요.

목차 Show

중요한 부분
무료 템플릿 – 로그인 회원가입폼 소스코드 입니다.
HTML SOURCE
결과물 입니다.

가장 기본적인 Bootstrap 4 만을 CDN으로 불러와서 아주 살짝 디자인적 요소만 CSS로 바꾸어 만든 로그인 폼입니다. jsfiddle을 이용해서 소스를 공개했습니다. 개인적으로 jsfiddle의 가장 좋은 점은 결과를 보여줄수 있다는 점이니까요. 결과물을 보고 이녀석을 사용할것인지 말것인지 쉽게 판단이 서니 좋은것 같아요.

CSS에서 Rounded Corner, Drop Shadow, background gradient (대각선방향) 등을 사용하였으니 다른곳에도 참고할 내용이 있을것 같습니다.

Ajax를 이용한 로그인체크나 세션처리, 혹은 Error 메세지 처리를 위한 modal 등은 들어있지 않습니다. 그정도는 개인이 각자 알아서 넣으실수 있겠죠 ^^;;

Tags: bootstrapbootstrap4formlogin formloginform로그인로그인폼

아칼

리눅스처럼 자유로운 블로그를 희망합니다. 아름다운 제주도의 다양한 소식을 전할수 있기를 희망합니다. 그렇다고 이미지를 마음대로 가져다 쓰라는 것은 절대 아닙니다.

중요한 부분

- 위치선정 -

display: flex;

align-items: center;

justify-content: center;

flex-direction : column;

-디자인 -

outline : none;

background : linear-gradient()

border-radius : --px;

box-shadow : -px -px -px color;

letter-spacing : -px;

SNS 버튼부에서 봐야할 점

box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4), -3px -3px 5px rgba(0, 0, 0, 0.1);

제 코드에서는 이렇게 주었구요

색상을 지정하실때는 뒷 배경색보다 좀 더 연한색을 위주로 주시면 자연스러운것 같습니다

지정된 위치보다 -3px -3px 위로 올려서 색상을 좀 더 연하게 주시면 더욱 입체감이 있습니다

Email, Pw 부분에서 보아야 할 점

outline : none;

처음 input 박스를 만드신 후 박스 안쪽을 클릭하시면 박스 테두리가 쳐집니다

outline : none 이 없는 경우

이런 문제를 해결하기 위해서,

outline : none;

을 주게 되면 더 이상 클릭해도 엉성한 테두리가 생기지 않는걸 보실 수 있습니다

<input placehorder:email></input>

placehorder 을 이용하여 input 박스안에 텍스트를 적을 수도 있습니다

위 사진 처럼 Email을 적어라고 알려줘야할때 placehorder 이 사용됩니다

submit 부분에서 보아야할 점

background: linear-gradient(to left, rgb(255, 77, 46), rgb(255, 155, 47));

단색을 줘도 예쁜색이면 잘 나오지만

아무래도 그라데이션 효과를 주면 조금더 이쁜 박스가 나오는것 같습니다

또한 letter-spacing : 2px 를 주어서 submit 이라는 글자 사이사이마다 공간을 주었습니다

See the Pen ExgOvWW by Kang Byeongcheol (@Devcheol) on CodePen.

무료 템플릿 – 로그인 회원가입폼 소스코드 입니다.
HTML SOURCE
CSS SOURCE
결과물 입니다.

https://bizmark.co.kr/wp-content/uploads/2020/02/2020-02-10-23-53-57.mp4

웹사이트 디자인 할때 도움이 될만한 로그인,회원가입 폼 입니다.

무료 템플릿 입니다.

소스 전체 다운로드 받기

배경 이미지 : picjumbo
소셜 아이콘 이미지 : iconfinder

무료 템플릿 – 로그인 회원가입폼 소스코드 입니다.

위 소스파일을 다운로드 받아서 사용하시거나 아래 소스를 복사해서 사용하 시면 됩니다.

어려운 코드는 없습니다. 필요한 부분만 수정하셔서 간단하게 사용하시기 편할 것 같습니다. 수정이 필요하시거나 어려운 부분이 있으시다면 댓글로 남겨 주시면 답변 드릴께요~

HTML SOURCE

<html>
    <head>
        <title>로그인 / 회원가입 폼 템플릿</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="wrap">
            <div class="form-wrap">
                <div class="button-wrap">
                    <div id="btn"></div>
                    <button type="button" class="togglebtn" onclick="login()">LOG IN</button>
                    <button type="button" class="togglebtn" onclick="register()">REGISTER</button>
                </div>
                <div class="social-icons">
                    <img src="img/fb.png" alt="facebook">
                    <img src="img/tw.png" alt="twitter">
                    <img src="img/gl.png" alt="google">
                </div>
                <form id="login" action="" class="input-group">
                    <input type="text" class="input-field" placeholder="User name or Email" required>
                    <input type="password" class="input-field" placeholder="Enter Password" required>
                    <input type="checkbox" class="checkbox"><span>Remember Password</span>
                    <button class="submit">Login</button>
                </form>
                <form id="register" action="" class="input-group">
                    <input type="text" class="input-field" placeholder="User name or Email" required>
                    <input type="email" class="input-field" placeholder="Your Email" required>
                    <input type="password" class="input-field" placeholder="Enter Password" required>
                    <input type="checkbox" class="checkbox"><span>Terms and conditions</span>
                    <button class="submit">REGISTER</button>
                </form>
            </div>
        </div>
        <script>
            var x = document.getElementById("login");
            var y = document.getElementById("register");
            var z = document.getElementById("btn");
            function login(){
                x.style.left = "50px";
                y.style.left = "450px";
                z.style.left = "0";
            }
            function register(){
                x.style.left = "-400px";
                y.style.left = "50px";
                z.style.left = "110px";
            }
        </script>
    </body>
</html>

CSS SOURCE

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
.wrap {
    height: 100%;
    width: 100%;
    background-image: url(img/background.jpg);
    background-position: center;
    background-size: cover;
    position: absolute;
}
.form-wrap {
    width: 380px;
    height: 480px;
    position: relative;
    margin: 6% auto;
    background: #fff;
    padding: 5px;
    overflow: hidden;
}
.button-wrap {
    width: 230px;
    margin: 35px auto;
    position: relative;
    box-shadow: 0 0 600px 9px #fcae8f;
    border-radius: 30px;
}
.togglebtn {
    padding: 10px 30px;
    cursor: pointer;
    background: transparent;
    border: 0;
    outline: none;
    position: relative;
}
#btn {
    top: 0;
    left: 0;
    position: absolute;
    width: 110px;
    height: 100%;
    background: linear-gradient(to right, #ff105f, #ffad06);
    border-radius: 30px;
    transition: .5s;
}
.social-icons {
    margin: 30px auto;
    text-align: center;
}
.social-icons img {
    width: 30px ;
    cursor: pointer;
}
.input-group {
    top: 180px;
    position: absolute;
    width: 280px;
    transition: .5s;
}
.input-field {
    width: 100%;
    padding: 10px 0;
    margin: 5px 0;
    border: none;
    border-bottom: 1px solid #999;
    outline: none;
    background: transparent;
}
.submit {
    width: 85%;
    padding: 10px 30px;
    cursor: pointer;
    display: block;
    margin: auto;
    background: linear-gradient(to right, #ff105f, #ffad06);
    border: 0;
    outline: none;
    border-radius: 30px;
}
.checkbox {
    margin: 30px 10px 30px 0;
}
span {
    color: #777;
    font-size: 12px;
    bottom: 68px;
    position: absolute;
}
#login {
    left: 50px;
}
#register {
    left: 450px;
}