Thiết kế mẫu Payment Card bằng CSS

Hằng ngày mình thanh toán rất nhiều hóa đơn trên mạng và thấy rất nhiều mẫu điền thông tin thẻ tín dụng ở nhiều trang web khác nhau, nhưng không ở đâu cho mình cảm giác dễ sử dụng và đẹp như kiểu thiết kế mà mình sẽ giới thiệu cho các bạn trong bài viết này. Tác giả của hiệu ứng này là Melnikov Stas, một UI developer khá nổi tiếng trên thế giới.

Xem Demo | Download

HTML

Đầu tiên, các bạn tạo khung chuẩn html như sau :

<div class="demo">
		<form class="payment-card">
			<div class="bank-card">
				<div class="bank-card__side bank-card__front">
					<i class="bank-card__icon bank-card__icon_mastercard"></i>
					<i class="bank-card__icon bank-card__icon_visa"></i>
					<div class="bank-card__inner">
						<label class="bank-card__label bank-card__label_fullawidth">
							<span class="bank-card__hint">Holder of card</span>
							<input type="text" class="bank-card__field" placeholder="Holder of card" pattern="[A-Za-z, ]{2,}" name="holder-card" required>
						</label>
					</div>
					<div class="bank-card__inner">
						<label class="bank-card__label bank-card__label_fullawidth">
							<span class="bank-card__hint">Number of card</span>
							<input type="text" class="bank-card__field" placeholder="Number of card" pattern="[0-9]{16}" name="number-card" required>
						</label>
					</div>          
					<div class="bank-card__inner">
						<span class="bank-card__caption">valid thru</span>
					</div>
					<div class="bank-card__inner">
						<label class="bank-card__label">
							<span class="bank-card__hint">Month</span>
							<input type="text" class="bank-card__field" placeholder="MM" maxlength="2" pattern="[0-9]{2}" name="mm-card" required>
						</label>
						<span class="bank-card__separator">/</span>
						<label class="bank-card__label">
							<span class="bank-card__hint">Year</span>
							<input type="text" class="bank-card__field" placeholder="YY" maxlength="2" pattern="[0-9]{2}" name="year-card" required>
						</label>						
					</div>					
				</div>
				<div class="bank-card__side bank-card__back">
					<div class="bank-card__inner">
						<label class="bank-card__label">
							<span class="bank-card__hint">CVC</span>
							<input type="text" class="bank-card__field" placeholder="CVC" maxlength="3" pattern="[0-9]{3}" name="cvc-card" required>
						</label>
					</div>
				</div>				
			</div>
			<button class="demo__button">Send</button>
		</form>
	</div>

CSS

Sau đó các bạn dùng đoạn css sau để dịnh dạng thiết kế.

* {
  margin: 0;
  padding: 0;
  border: none;
}
@media screen and (min-awidth: 981px) {
  html {
    font-size: 10px;
  }
}
@media screen and (min-awidth: 641px) and (max-awidth: 980px) {
  html {
    font-size: 8px;
  }
}
@media screen and (max-awidth: 640px) {
  html {
    font-size: 7px;
  }
}
body {
  background: linear-gradient(to bottom, #ffffff, #dddddd);
  font-family: arial, sans-serif;
}
.demo {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.demo__button {
  awidth: 200px;
  display: block;
  margin: 20px auto 0;
  background-color: #eee;
  transition: background-color 0.4s ease-out;
  border: 1px solid #a29e97;
  cursor: pointer;
  padding: 10px 0;
  text-transform: uppercase;
  font-size: 1.4rem;
  color: #000;
}
.demo__button:hover,
.demo__button:focus {
  background-color: #a29e97;
  color: #ffffff;
}
.melnik909 {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  font-size: 1.2rem;
  color: #000;
  text-decoration: none;
}
.melnik909:hover,
.melnik909:focus {
  text-decoration: underline;
}
/*
 * CSS Payment Card
 */
.payment-card {
  awidth: 60rem;
  box-sizing: border-box;
  padding: 2% 2% 4%;
}
.bank-card {
  position: relative;
  height: 30rem;
  font-family: arial, sans-serif;
}
.bank-card__side {
  awidth: 65%;
  position: absolute;
  border-radius: 10px;
  border-awidth: 0.16666667rem;
  border-style: solid;
}
.bank-card__front {
  background-color: #f0f0ee;
  padding: 5%;
  box-shadow: 0 0 10px #f4f4f2;
  border-color: #a29e97;
  top: 0;
  left: 0;
  z-index: 2;
}
.bank-card__back {
  background-color: #e0ddd7;
  padding: 24.5% 5% 11%;
  box-shadow: 0 0 2rem #f3f3f3;
  text-align: right;
  border-color: #dad9d6;
  top: 12%;
  right: 0;
}
.bank-card__back:before {
  content: "";
  awidth: 100%;
  height: 25%;
  background-color: #8e8b85;
  position: absolute;
  top: 14%;
  right: 0;
}
.bank-card__icon {
  display: block;
  awidth: 12%;
  height: 12%;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 15%;
}
.bank-card__icon_mastercard {
  background-image: url("https://stas-melnikov.ru/paymentcard/mastercard.svg");
  right: 15%;
}
.bank-card__icon_visa {
  background-image: url("https://stas-melnikov.ru/paymentcard/visa.svg");
  right: 5%;
}
.bank-card__inner {
  margin-bottom: 4%;
}
.bank-card__inner:last-child {
  margin-bottom: 0;
}
.bank-card__label {
  display: inline-block;
  vertical-align: middle;
  awidth: 25%;
}
.bank-card__label_fullawidth {
  awidth: 100%;
}
.bank-card__hint {
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  position: absolute;
}
.bank-card__caption {
  text-transform: uppercase;
  font-size: 1.09090909rem;
  margin-left: 1%;
}
.bank-card__field {
  box-sizing: border-box;
  border: 0.33333333rem solid #d0d0ce;
  outline: none;
  awidth: 100%;
  padding: .7em;
  font-size: 1.5rem;
  position: relative;
  z-index: 2;
}
.bank-card__field:focus {
  border-color: #fdde60;
}
@media screen and (max-awidth: 640px) {
  .bank-card__field {
    font-size: 1.2rem;
  }
}
.bank-card__separator {
  font-size: 3.33333333rem;
  color: #c4c4c3;
  padding-left: 4%;
  padding-right: 4%;
  display: inline-block;
  vertical-align: middle;
}

Bây giờ thì tha hồ mà chèn vào các trang web bán hàng của các bạn rồi nhé.

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster