Hi guys! Aku kembali dengan CSS tutorial lain .
Secara khusus , kita akan menciptakan form login .
Saat ini, hampir setiap layanan web , aplikasi , permainan dll memungkinkan ( atau bahkan mengharuskan ) pengguna berlangganan , yang berarti mereka semua memerlukan beberapa jenis bentuk bagi pengguna untuk mendaftar dan sign in
Dengan pemikiran ini , saya mencoba untuk membuat beberapa form login yang berbeda , beberapa di antaranya terinspirasi oleh konsep desain di web . Tujuannya adalah untuk memberikan beberapa kekhususan masing-masing dari mereka .
Beberapa hal sebelum mulai :
Anda tidak akan melihat prefiks penjual dalam potongan CSS , tetapi Anda akan , tentu saja , menemukan mereka di file .
Tujuan dari tutorial ini adalah untuk menunjukkan potensi CSS , terutama CSS3 , itu sebabnya rendering bisa diubah pada IE8 . Jika Anda berencana untuk mendukung browser ini , pastikan untuk membuat fallbacks .
Saya tidak menggunakan atribut pada tag form sebagai tindakan, metode karena aku berfokus pada desain .
Saya pribadi menggunakan kotak - model yang mana [ lebar ] = [element - lebar ] + [ bantalan ] + [ perbatasan ] . Saya mengaktifkannya dengan potongan berikut :
|
1
2
3
4
5
|
*,
*:after,
*:before {
box-sizing: border-box;
}
|
BERITA TENTANG PENGGUNA - RAMAH
Anda perlu bentuk untuk banyak kesempatan di mana interaksi antara pengguna dan aplikasi Anda atau situs web yang diperlukan : login, komentar , kontak, umpan balik , dan banyak lagi. Jika Anda mess dengan bentuk , Anda main-main dengan pengguna Anda .
Dengan itu dalam pikiran, ada beberapa hal yang dapat Anda lakukan untuk membuat bentuk-bentuk yang lebih baik , lebih user-friendly . Mari kita membuat putaran kecil bersama-sama , akan kita ?
Label: Label adalah penting . Saya tidak berbicara tentang tag label , saya berbicara tentang indikasi tentang titik lapangan . Mari kita membuat hal-hal yang jelas : semua bidang yang sama . Hal ini karena mereka memiliki label pengguna tahu apa yang harus menulis di mana lapangan . Gunakan label , atau ikon , atau apa saja yang diperlukan untuk membuat pengguna memahami apa yang ia lakukan .
Fields :: The bagus masukan Anda , lebih menyenangkan mereka untuk melihat, pengguna Anda bahagia akan . Membuat ruang di sekitar dan di masukan Anda . Jangan membuat lapangan baji isinya . Input harus cukup besar untuk menampilkan seluruh isi rata-rata mereka . Jangan membuat ladang kecil kecil memaksa pengguna untuk menavigasi di dalamnya dengan tombol panah .
Labels + bidang: Membuat hubungan antara input dan label mereka . Gunakan untuk atribut pada label . Mengklik pada textarea dengan mudah , bahkan pada perangkat mobile . Mengklik pada checkbox namun bisa rumit , terutama ketika datang ke menu ponsel . Membuat diklik label membuat hidup pengguna Anda lebih mudah . Menggunakannya . Membuat input yang cukup besar untuk tampilan mobile, di mana label mungkin tidak dapat diklik .
Negara : CSS memungkinkan penargetan elemen sesuai dengan kondisi saat ini : melayang , fokus , aktif , default, dll Sangat penting untuk menunjukkan pengguna dia melayang sesuatu diklik , atau memfokuskan sesuatu yang dapat mengisi .
Tombol Kirim : The tombol submit adalah langkah terakhir bagi pengguna untuk mengisi formulir dan berinteraksi dengan aplikasi Anda . Ini harus terlihat . Ingat " panggilan untuk bertindak " . Jangan menggunakan gaya default untuk tombol kirim , membuat sesuatu yang cantik ! Dan jangan pernah menggunakan " Submit " . Ini tidak jelas . Jika itu adalah form login , gunakan " Masuk " atau " Login " . Jika itu adalah bentuk komentar , menggunakan sesuatu seperti " kirimkan komentar " . Memberitahu pengguna tindakan apa yang akan dilakukan .
HTML5 input dan atribut : HTML5 menyediakan banyak atribut baru dan masukan yang berguna untuk membuat bentuk-bentuk yang lebih baik dan lebih mudah untuk mengisi . Gunakan atribut-atribut dan masukan bila diperlukan , dengan fallbacks tentu saja. Lebih lanjut tentang Wufoo .
Contoh 1
Seperti yang saya katakan sebelumnya, saya mencoba untuk membuat setiap bentuk yang berbeda dari yang lain dengan kekhususan sendiri . Yang satu ini mengandalkan tombol yang mengirimkan , semacam " keluar dari layar " , dan bulat
.
The Markup
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<form
class="form-1">
<p class="field">
<input type="text" name="login" placeholder="Username or email">
<i class="icon-user icon-large"></i>
</p>
<p class="field">
<input type="password" name="password" placeholder="Password">
<i class="icon-lock icon-large"></i>
</p>
<p class="submit">
<button type="submit" name="submit"><i class="icon-arrow-right icon-large"></i></button>
</p>
</form>
|
Oke , jadi contoh pertama ini cukup minim , artinya kita tidak akan menggunakan label . Tapi , kita tentu perlu memberitahu pengguna kami apa yang mereka harus menulis dalam bidang-bidang , jadi kita menggunakan ... ikon . Mereka adalah tag <i/> kecil .
Catatan : seperti biasa , saya tidak akan menutupi di sini bagaimana menggunakan font ikon seperti FontAwesome . Jika Anda ingin mempelajari lebih lanjut tentang hal itu , Anda dapat memeriksa contoh di situs web mereka .
Pada dasarnya , kita memiliki dua wadah pembungkus masukan dan ikon . Tombol submit dalam wadah sendiri , dan kita menggunakan <button/> bukan sebuah <input/> dengan ikon di dalamnya .
Kami juga akan menggunakan penampung untuk membuat sesuatu yang lebih jelas untuk browser yang didukung . Informasi lebih lanjut tentang dukungan browser untuk atribut placeholder dapat ditemukan di CanIUse.com .
CSS
Kita akan mulai dengan memberikan beberapa gaya untuk elemen form itu sendiri . Bentuknya yang pembungkus utama untuk demo kami, jadi kami memberikan lebar dan pusat dengan deklarasi marjin .
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<form
class="form-1">
<p class="field">
<input type="text" name="login" placeholder="Username or email">
<i class="icon-user icon-large"></i>
</p>
<p class="field">
<input type="password" name="password" placeholder="Password">
<i class="icon-lock icon-large"></i>
</p>
<p class="submit">
<button type="submit" name="submit"><i class="icon-arrow-right icon-large"></i></button>
</p>
</form>
|
Berbicara tentang ikon , mari kita berurusan dengan sekarang .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
.form-1
.field i {
/* Size and position */
left: 0px;
top: 0px;
position: absolute;
height: 36px;
width: 36px;
/* Line */
border-right: 1px
solid rgba(0, 0, 0, 0.1);
box-shadow: 1px
0 0
rgba(255, 255, 255, 0.7);
/* Styles */
color: #777777;
text-align: center;
line-height: 42px;
transition: all
0.3s ease-out;
pointer-events: none;
}
|
Karena kita akan bermain dengan warna mereka untuk : hover dan : fokus negara , kami memberikan mereka transisi yang mulus .
Menambahkan " pointer - peristiwa : none " akan memungkinkan untuk benar-benar klik pada area ikon dan fokus input yang terletak di bawah ( kita benar-benar mengklik pada input ) .
Sekarang kita perlu memberikan beberapa gaya ke input :
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
|
.form-1
input[type=text],
.form-1
input[type=password] {
font-family: 'Lato', Calibri, Arial, sans-serif;
font-size: 13px;
font-weight: 400;
text-shadow: 0
1px 0
rgba(255,255,255,0.8);
/* Size and position */
width: 100%;
padding: 10px
18px 10px
45px;
/* Styles */
border: none; /* Remove the default border */
box-shadow:
inset
0 0
5px rgba(0,0,0,0.1),
inset
0 3px
2px rgba(0,0,0,0.1);
border-radius: 3px;
background: #f9f9f9;
color: #777;
transition: color 0.3s ease-out;
}
.form-1
input[type=text] {
margin-bottom: 10px;
}
|
Sebelum melangkah lebih jauh , jangan lupa untuk mengatur beberapa gaya untuk kedua , hover dan negara fokus .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.form-1
input[type=text]:hover ~ i,
.form-1
input[type=password]:hover ~
i {
color: #52cfeb;
}
.form-1
input[type=text]:focus ~ i,
.form-1
input[type=password]:focus ~
i {
color: #42A2BC;
}
.form-1
input[type=text]:focus,
.form-1
input[type=password]:focus,
.form-1
button[type=submit]:focus {
outline: none;
}
|
Hal terakhir yang kita harus gaya tombol submit . Untuk beberapa alasan tumpang tindih jelek ( apa properti z - index mengerikan adalah ) , aku harus membungkusnya ke dalam wadah untuk membuat sesuatu bekerja . Kita mungkin bisa menghapus wadah ini, tapi itu akan memerlukan beberapa CSS tipuan menjengkelkan , dan ini bukan titik .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
.form-1
.submit {
/* Size and position */
width: 65px;
height: 65px;
position: absolute;
top: 17px;
right: -25px;
padding: 10px;
z-index: 2;
/* Styles */
background: #ffffff;
border-radius: 50%;
box-shadow:
0
0 2px
rgba(0,0,0,0.1),
0
3px 2px
rgba(0,0,0,0.1),
inset
0 -3px
2px rgba(0,0,0,0.2);
}
|
Masalah: box bayangan menonjolkan efek tumpang tindih ini , tetapi mereka juga dapat menghancurkannya . Memang , kita bisa melihat bayangan pada frame dari bentuk ( jarak antara bidang dan padding kanan formulir ) .
Pada dasarnya , kita dapat menyembunyikan mereka bayangan dengan semacam masker dengan warna latar belakang yang sama dari formulir. Ini adalah pekerjaan untuk pseudo - elemen !
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.form-1
.submit:after {
/* Size and position */
content: "";
width: 10px;
height: 10px;
position: absolute;
top: -2px;
left: 30px;
/* Styles */
background: #ffffff;
/* Other masks trick */
box-shadow: 0
62px white, -32px
31px white;
}
|
Kami menempatkan yang pertama di bagian atas elemen melingkar . Dan dengan properti kotak - bayangan , kita bisa palsu dua topeng lainnya . Saya pikir , ini adalah sesuatu yang cukup sulit untuk menjelaskan , jadi saya sarankan Anda membuka alat pengembang Anda dan menonaktifkan garis kotak - shadow di submit : . Setelah melihat apa yang terjadi .
Last but not least, kami sebenarnya tombol submit :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
.form-1
button {
/* Size and position */
width: 100%;
height: 100%;
margin-top: -1px;
/* Icon styles */
font-size: 1.4em;
line-height: 1.75;
color: white;
/* Styles */
border: none; /* Remove the default border */
border-radius: inherit;
background: linear-gradient(#52cfeb, #42A2BC);
box-shadow:
inset
0 1px
0 rgba(255,255,255,0.3),
0
1px 2px
rgba(0,0,0,0.35),
inset
0 3px
2px rgba(255,255,255,0.2),
inset
0 -3px
2px rgba(0,0,0,0.1);
cursor: pointer;
}
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.form-1
button:hover,
.form-1
button[type=submit]:focus {
background: #52cfeb;
transition: all
0.3s ease-out;
}
.form-1
button:active {
background: #42A2BC;
box-shadow:
inset
0 0
5px rgba(0,0,0,0.3),
inset
0 3px
4px rgba(0,0,0,0.3);
}
|
Membuat Desain Form Login Dengan CSS
Tidak ada komentar:
Posting Komentar