HTML, CSS 및 Javascript를 사용한 멋진 가입 페이지 디자인
11614 단어 csshtmlincoderwebjavascript
가입 양식은 일반적으로 웹사이트, 컴퓨터 애플리케이션 및 모바일 앱에서 사용됩니다. 가입 페이지(등록 페이지라고도 함)를 통해 사용자는 계정을 만들고 플랫폼의 서비스를 사용할 수 있습니다. 플랫폼에서 이름, 이메일 및 비밀번호와 같은 양식을 작성하도록 요청하는 몇 가지 표준 세부 정보가 있습니다.
다음을 좋아할 수 있습니다.
이 프로그램(페이지 디자인 가입)에서 페이지가 로드되면 양식의 크기가 작은 크기에서 큰 크기로 조정됩니다. 그라디언트 배경이 있고 페이지 중앙에는 위 이미지에서 볼 수 있는 것처럼 가입 양식이 있습니다. 가입 양식에는 이름, 성, 이메일 및 암호에는 제출 버튼이 있습니다. 버튼 위로 마우스를 가져가면 화살표 아이콘이 움직이기 시작합니다.
이 블로그가 마음에 들고 소스 코드 파일을 다운로드하려는 경우 이 프로그램here의 소스 파일을 쉽게 다운로드할 수 있는 이 프로그램의 다운로드 링크도 제공했습니다.
HTML 코드
<!DOCTYPE html>
<html lang="en">
<!-- -------------------- Created By InCoder -------------------- -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cool sign up form - InCoder</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
<div class="container">
<h1 class="title">Create Account</h1>
<p class="link">Already have an account? <a href="#">Sign in</a></p>
<form id="signUp">
<div class="form-group name-input-group">
<input type="text" placeholder="First Name">
<input type="text" placeholder="Last Name">
</div>
<div class="form-group">
<input type="email" placeholder="Email">
</div>
<div class="form-group passInput">
<input type="password" placeholder="Password">
<i class="fa-solid fa-eye" onclick="toggleType(this)"></i>
</div>
<div class="form-group passInput">
<input type="password" placeholder="Confirm Password">
<i class="fa-solid fa-eye" onclick="toggleType(this)"></i>
</div>
<button type="submit" class="submitBtn">Sign Up <i class="fa-solid fa-arrow-right"></i></button>
</form>
<p class="terms-services">
<input class="input" id="terms-services" type="checkbox" />
<label class="checkbox" for="terms-services"><span>
<svg width="12px" height="10px">
<use xlink:href="#check"></use>
</svg></span><span>I have read and agree to the Terms of Service</span></label>
<!--SVG Sprites-->
<svg class="inline-svg">
<symbol id="check" viewbox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</symbol>
</svg>
</p>
</div>
</body>
</html>
CSS 코드
/* -------------------- Created By InCoder -------------------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
background: linear-gradient(50deg, rgb(255 159 77 / 71%), rgb(253 80 112 / 79%) 20%, rgb(255 83 101 / 76%) 80%, rgb(255 159 77 / 55%));
}
.container {
margin: 1.2rem;
background: #fff;
border-radius: 1.5rem;
transition: transform .3s;
width: clamp(20rem, 55vh, 30rem);
transform: scale(1) translateY(0rem);
animation: scaleUp 1s cubic-bezier(0, 1.06, 0.73, 1.02);
}
@keyframes scaleUp {
0%{
transform: scale(.7) translateY(6rem);
}
100%{
transform: scale(1) translateY(0rem);
}
}
.container .title {
margin-top: 1rem;
text-align: center;
letter-spacing: -0.5px;
font-size: clamp(1.8rem, 6vh, 2.5rem);
}
.container .link {
margin-bottom: 1.5rem;
text-align: center;
}
.container .link a {
color: #5056c6;
text-decoration: none;
}
.container .link a:hover {
text-decoration: underline;
}
#signUp {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.form-group {
width: 80%;
display: flex;
position: relative;
align-items: center;
margin-bottom: .8rem;
justify-content: center;
}
.form-group input {
border: 0;
width: 100%;
height: 3.2rem;
font-size: 1rem;
border-radius: 1rem;
padding-left: .8rem;
padding-right: .8rem;
color: rgb(0 0 0 / 50%);
background-color: rgb(0 0 0 / 5%);
}
.form-group input:focus {
background-color: rgb(0 0 0 / 8%);
}
.form-group input::placeholder {
font-size: 1rem;
color: rgb(0 0 0 / 50%);
}
.form-group input:focus {
outline: none;
}
.passInput i{
right: 5%;
display: none;
font-size: 1.2rem;
cursor: pointer;
position: absolute;
color: rgb(0 0 0 / 40%);
}
.name-input-group input:first-child {
border-radius: 1rem 0 0 1rem;
border-right: 3px solid #fff;
}
.name-input-group input:last-child {
border-radius: 0 1rem 1rem 0;
border-left: 3px solid #fff;
}
.submitBtn {
border: 0;
width: 80%;
color: #fff;
height: 3.2rem;
cursor: pointer;
margin-top: .2rem;
font-size: 1.2rem;
position: relative;
border-radius: 1rem;
background-color: rgb(72 150 255);
}
.submitBtn i {
top: 35%;
right: 8%;
position: absolute;
}
.submitBtn:hover i,
.submitBtn:focus i{
outline: none;
animation: move .8s cubic-bezier(0.4, 0, 1, 1) infinite alternate;
}
a:focus,
.submitBtn:focus {
outline: none;
}
@keyframes move {
0% {
right: 8%;
}
100% {
right: 6%;
}
}
@-moz-keyframes move {
0% {
right: 8%;
}
100% {
right: 6%;
}
}
@-webkit-keyframes move {
0% {
right: 8%;
}
100% {
right: 6%;
}
}
@-o-keyframes move {
0% {
right: 8%;
}
100% {
right: 6%;
}
}
.terms-services {
display: flex;
margin-top: 1rem;
margin-bottom: 1rem;
justify-content: center;
}
.checkbox {
-webkit-user-select: none;
user-select: none;
cursor: pointer;
padding: 6px 8px;
display: flex;
max-width: 80%;
border-radius: 6px;
overflow: hidden;
transition: all 0.2s ease;
}
.checkbox:not(:last-child) {
margin-right: 6px;
}
.checkbox span {
float: left;
vertical-align: middle;
transform: translate3d(0, 0, 0);
}
.checkbox span:first-child {
position: relative;
width: 18px;
height: 18px;
min-width: 18px;
border-radius: 4px;
transform: scale(1);
border: 1px solid #cccfdb;
transition: all 0.2s ease;
box-shadow: 0 1px 1px rgba(0, 16, 75, 0.05);
}
.checkbox span:first-child svg {
position: absolute;
top: 3px;
left: 2px;
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 16px;
stroke-dashoffset: 16px;
transition: all 0.3s ease;
transition-delay: 0.1s;
transform: translate3d(0, 0, 0);
}
.checkbox span:last-child {
padding-left: 8px;
line-height: 18px;
}
.checkbox:hover span:first-child {
border-color: #07f;
}
.input {
position: absolute;
visibility: hidden;
}
.input:checked+.checkbox span:first-child {
background: #07f;
border-color: #07f;
animation: wave 0.4s ease;
}
.input:checked+.checkbox span:first-child svg {
stroke-dashoffset: 0;
}
.inline-svg {
position: absolute;
width: 0;
height: 0;
pointer-events: none;
user-select: none;
}
@-moz-keyframes wave {
50% {
transform: scale(0.9);
}
}
@-webkit-keyframes wave {
50% {
transform: scale(0.9);
}
}
@-o-keyframes wave {
50% {
transform: scale(0.9);
}
}
@keyframes wave {
50% {
transform: scale(0.9);
}
}
@media (max-width: 320px) {
.container .title{
font-size: 2rem;
}
.link{
font-size: .9rem;
}
}
자바스크립트 코드
let passInput = document.querySelectorAll(".passInput input")
let state = false
const toggleType = (icon) => {
if(state){
icon.classList.remove('fa-eye-slash')
icon.classList.add('fa-eye')
icon.parentElement.querySelector('input').type = 'password'
state = false
}else{
icon.classList.remove('fa-eye')
icon.classList.add('fa-eye-slash')
icon.parentElement.querySelector('input').type = 'text'
state = true
}
}
passInput.forEach(input => {
input.addEventListener('keyup', e => {
if(e.target.value.length != 0){
input.parentElement.querySelector('i').style.display = 'block'
}else{
input.parentElement.querySelector('i').style.display = 'none'
}
})
})
Reference
이 문제에 관하여(HTML, CSS 및 Javascript를 사용한 멋진 가입 페이지 디자인), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/incoderweb/cool-sign-up-page-design-using-html-css-and-javascript-1m3j텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
