Как создать пользовательский интерфейс кредитной карты с помощью HTML и CSS3

Предварительный просмотр кредитной карты

Тема: HTML / CSS3.
Сложность: средняя.
Предполагаемое время выполнения: 30 минут.

В этом руководстве мы собираемся создать простую форму кредитной карты с использованием HTML и CSS3 . Мы будем работать с Google Fonts, чтобы использовать собственный шрифт (Roboto) для этой формы. Вы можете интегрировать эту форму на свой веб-сайт.




Давайте начнем.

HTML

Создадим нашу HTML-структуру.

Мы создадим форму с классом «кредитная форма». Затем мы разделим нашу форму на две части. Первый раздел – это заголовок формы, в котором будет наш заголовок формы, а второй – это тело формы, в котором будут находиться все элементы и кнопки формы.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 год
22
23
24
25
26
27
28
29
30
31 год
32
33
34
35 год
36
37
38
39
40
41 год
42
43 год
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<formclass="credit-card">
<divclass="form-header">
<h4class="title">Credit card detail</h4>
</div>
<divclass="form-body">
<!-- Card Number -->
<inputtype="text"class="card-number"placeholder="Card Number">
<!-- Date Field -->
<divclass="date-field">
<divclass="month">
<selectname="Month">
<optionvalue="january">January</option>
<optionvalue="february">February</option>
<optionvalue="march">March</option>
<optionvalue="april">April</option>
<optionvalue="may">May</option>
<optionvalue="june">June</option>
<optionvalue="july">July</option>
<optionvalue="august">August</option>
<optionvalue="september">September</option>
<optionvalue="october">October</option>
<optionvalue="november">November</option>
<optionvalue="december">December</option>
</select>
</div>
<divclass="year">
<selectname="Year">
<optionvalue="2016">2016</option>
<optionvalue="2017">2017</option>
<optionvalue="2018">2018</option>
<optionvalue="2019">2019</option>
<optionvalue="2020">2020</option>
<optionvalue="2021">2021</option>
<optionvalue="2022">2022</option>
<optionvalue="2023">2023</option>
<optionvalue="2024">2024</option>
</select>
</div>
</div>
<!-- Card Verification Field -->
<divclass="card-verification">
<divclass="cvv-input">
<inputtype="text"placeholder="CVV">
</div>
<divclass="cvv-details">
<p>3 or 4 digits usually found <br> on the signature strip</p>
</div>
</div>
<!-- Buttons -->
<buttontype="submit"class="proceed-btn"><ahref="#">Proceed</a></button>
<buttontype="submit"class="paypal-btn"><ahref="#">Pay With</a></button>
</div>
</form>

CSS

Прежде чем мы начнем с CSS, обязательно включите наш .css файл и шрифт в заголовок. Мы собираемся использовать Roboto для этого урока. Вы можете скачать его с Google Fonts.

href='https://fonts.googleapis.com/css?family=Roboto:400,300,100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
Сначала добавьте глобальный / базовый стиль и убедитесь, что тело имеет полную высоту, добавив следующие строки:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Global */
* {
    box-sizing: border-box;
}
body,
html {
    height: 100%;
    min-height: 100%;
}
body {
    font-family: 'Roboto',
    sans-serif;
    margin: 0;
    background-color: #e7e7e7;
}

Отлично, теперь давайте стилизуем карту, чтобы сделать ее 360 × 400.

Выравниваем ее по центру страницы, добавляем закругленные углы и тени:

1
2
3
4
5
6
7
8
9
10
/* Credit Card */
.credit-card {
    width: 360px;
    height: 400px;
    margin: 60px auto 0;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 1px 2px 3px 0 rgba(0,0,0,.10);
}

 

Мы установили для левого и правого полей значение auto, чтобы горизонтально центрировать элемент в его контейнере.

Давайте добавим высоту и отступ к нашим заголовкам формы и телу формы:




1
2
3
4
5
6
7
8
9
10
.form-header {
    height: 60px;
    padding: 20px 30px 0;
    border-bottom: 1px solid #e1e8ee;
}
.form-body {
    height: 340px;
    padding: 30px 30px 20px;

Вот так наша карта выглядит пока:

Кредитная карта CSS

Наша карта не имеет структуры, цвета и индивидуальности. Мы можем изменить это с помощью небольшого количества кода.

Добавьте стиль к заголовку, задав ему цвет и установив поля на 0.

1
2
3
4
5
6
/* Title */
.title {
    font-size: 18px;
    margin: 0;
    color: #5e6977;
}

Мы задаем ему высоту 42 пикселя и добавляем базовый стиль к каждому элементу нашей карты, включая кнопки.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 год
22
23
24
25
26
/* Common */
.card-number,
.cvv-input input,
.month select,
.year select {
    font-size: 14px;
    font-weight: 100;
    line-height: 14px;
}
.card-number,
.month select,
.year select {
    font-size: 14px;
    font-weight: 100;
    line-height: 14px;
}
.card-number,
.cvv-details,
.cvv-input input,
.month select,
.year select {
    opacity: .7;
    color: #86939e;
}

Стилизуйте тело формы и элементы формы внутри него. Начните с первого ввода – номера карты.

1
2
3
4
5
6
7
8
/* Card Number */
.card-number {
    width: 100%;
    margin-bottom: 20px;
    padding-left: 20px;
    border: 2px solid #e1e8ee;
    border-radius: 6px;
}

Затем давайте стилизуем выбранные элементы, месяц и год. Переместите месяц влево и год вправо и задайте им несколько основных стилей.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 год
/* Date Field */
.month select,
.year select {
    width: 145px;
    margin-bottom: 20px;
    padding-left: 20px;
    border: 2px solid #e1e8ee;
    border-radius: 6px;
    background: url('caret.png') no-repeat;
    background-position: 85% 50%;
    -moz-appearance: none;
    -webkit-appearance: none;
}
.month select {
    float: left;
}
.year select {
    float: right;
}

Теперь нам нужно стилизовать поле проверки карты, где у нас есть cvv-input и cvv-details, которые дают нам подробную информацию о коде проверки карты.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 год
/* Card Verification Field */
.cvv-input input {
    float: left;
    width: 145px;
    padding-left: 20px;
    border: 2px solid #e1e8ee;
    border-radius: 6px;
    background: #fff;
}
.cvv-details {
    font-size: 12px;
    font-weight: 300;
    line-height: 16px;
    float: right;
    margin-bottom: 20px;
}
.cvv-details p {
    margin-top: 6px;
}

Мы закончили с вводом.

Вот как это выглядит:

Ввод кредитной карты

Довольно мило, правда? Но мы еще не закончили.

Осталось сделать последнее – кнопки. Давайте стилизуем их.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 год
22
23
24
25
26
27
28
29
30
31 год
32
/* Buttons Section */
.paypal-btn,
.proceed-btn {
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    border-color: transparent;
    border-radius: 6px;
}
.proceed-btn {
    margin-bottom: 10px;
    background: #7dc855;
}
.paypal-btn a,
.proceed-btn a {
    text-decoration: none;
}
.proceed-btn a {
    color: #fff;
}
.paypal-btn a {
    color: rgba(242, 242, 242, .7);
}
.paypal-btn {
    padding-right: 95px;
    background: url('paypal-logo.svg') no-repeat 65% 56% #009cde;
}

И это наша финальная версия:

Разве это не круто?

Вывод

Здесь мы закончили. Мы надеемся, что этот учебник окажется для вас полезным и вы узнали из него что-то новое. Вы можете использовать эту форму для своего следующего проекта или личного сайта.




Узнать больше интересного:

Leave a Reply