Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Site Elements

Mempersingkat Formulir Login yang Apik Dengan CSS3

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Taufan Prasetyo Basri (you can also view the original English article)

Mari kita buat formulir login minimal dan apik menggunakan HTML5 dasar kemudian tingkatkan dengan beberapa teknik CSS3. Saatnya mengubah beberapa elemen sederhana menjadi sesuatu yang indah ..

Mencari Pintasan?

Jika Anda ingin beberapa bentuk CSS3 yang indah untuk situs Anda dan tidak ingin membuatnya sendiri, Anda tidak bisa salah dengan Paket Formulir CSS3 di Envato Market. Hanya dengan $5, Anda mendapatkan:

  • 33 gaya form login
  • 66 gaya formulir pencarian
  • 12 gaya formulir kontak
  • bentuk umum yang menampilkan gaya untuk kotak teks, textarea, tombol radio, kotak centang, pilih kotak
  • berbagai gaya warna untuk setiap bentuk

Tidak heran ini adalah salah satu item formulir CSS3 terlaris di Envato Market.

CSS3 Form Pack on Envato Market
Paket Bentuk CSS3 di Envato Market

Pengenalan

Formulir web merupakan bagian integral dari desain situs web. Apapun tujuannya, formulir dimaksudkan untuk menjadi cara sederhana bagi pengguna untuk memasukkan nilai dan mengirimkan data. Memiliki HTML5 dan CSS3 yang kami miliki, memungkinkan kami untuk membuat formulir yang intuitif untuk digunakan dan menarik secara visual.


Desain

Saya percaya bahwa desain web harus bersih dan efisien. Bentuk desain yang akan kami koding mengikuti prinsip-prinsip itu, termasuk hanya tiga elemen: input nama pengguna, masukan kata sandi, dan masukan masukan. Karena markup ini sangat sederhana, memungkinkan lebih banyak fleksibilitas ketika kita mengkodekannya ke dalam HTML dan CSS.

Berikut adalah beberapa elemen dalam desain yang perlu diingat untuk pengkodean:

  • Gradien
  • Inner Shadows
  • Borders dengan Opacity
  • Text Shadows
  • Placeholder Text

Kebanyakan elemen adalah gaya CSS, tetapi kami akan memeriksa atribut placeholder juga, karena itu akan menyarankan kepada pengguna kami jenis data apa yang harus mereka masukkan.


Langkah 1: Dasar HTML dan CSS struktur

Mari kita memulai dengan membuat template HTML5 bersih dengan bentuk dan tiga input:

Sekarang, kita tidak memiliki sesuatu yang terlalu istimewa, hanya suatu bentuk, tiga input dan dokumen kosong. Mari kita membuat sebuah file CSS yang disebut style.css dan link kembali ke halaman HTML kami:

Ingat, CSS file saat ini terletak di direktori utama kami; Pastikan Anda menggunakan jalan yang benar jika Anda memilih untuk menempatkan file CSS Anda dalam folder lain, seperti folder 'css'.

Sebelum kita menambahkan salah satu dari kami sendiri styling untuk CSS file, itu adalah selalu praktik yang baik untuk memulai dari yang bersih. Kami akan memulai gaya kita dengan Eric Meyer's CSS Reset yang menghilangkan default styling dan memungkinkan kita untuk membangun aturan kita dari titik yang sama di browser apapun.

Mari kita mulai dengan mendefinisikan sebuah font dan latar belakang gradien untuk kami halaman login. Masukkan kode ini setelah CSS ulang:

Sekarang bahwa kita telah menambahkan dalam potongan kode, halaman kami sekarang seharusnya keren linear gradient latar belakang. Gradien dimulai di bagian bawah halaman (0%) dimana warna adalah #323B55 dan berakhir di bagian atas halaman (100%) dimana warna adalah #424F71. Hanya membungkus halaman yang dilihat dari browser yang tidak mendukung gradien, sangat penting untuk menyatakan latar belakang-warna, yang saya set ke warna yang sama sebagai gradien pada 0%. Hal yang hebat tentang CSS3 gradien adalah bahwa Anda dapat menambahkan banyak 'berhenti', misalnya lain perubahan warna pada 25%. Hal terakhir untuk menambahkan tag badan adalah font-family, saya memutuskan untuk menggunakan jenis Sans Serif.

Sekarang bahwa kita memiliki Yayasan kami, sekarang saatnya untuk mulai menambahkan beberapa styling lebih!


Langkah 2: Styling Login Form

Sebelum kita mulai CSS styling untuk login form, kita perlu menambahkan beberapa hal untuk dokumen HTML kami. Pertama, memulai dengan menambahkan sebuah id untuk bentuk, kita akan menyebutnya 'licin-login'. Selanjutnya, tambahkan atribut pengganti setiap Tag input. Berikut adalah bagaimana halaman HTML harus sejauh ini:

HTML5 masukan pengganti atribut adalah tambahan yang bagus untuk masukan tag. Tanpa nilai input yang pengguna harus mengganti atribut pengganti memungkinkan kita untuk menampilkan teks bantuan dan menghilang setelah pengguna mulai mengetik di bidang. Ini belum didukung secara luas, dan karenanya dapat digunakan dengan hati-hati. Katakanlah, misalnya, atribut placeholder tidak bekerja pada browser, pengguna tidak akan tahu apa nilai-nilai untuk masuk. Kemudian kami akan mencakup teknik mundur, tetapi juga tidak pantas bahwa teks pengganti harus saran, daripada pelabelan input.

Sekarang bahwa kita memiliki halaman HTML terbaru kami, kita dapat mulai menambahkan beberapa styling untuk form login. Inilah CSS untuk kami bentuk id yang kita menyatakan sebelumnya.

Form login ini, saya memutuskan untuk menyelaraskan secara sempurna (horizontal dan vertikal) di tengah halaman. Hal ini cukup lurus ke depan untuk posisi elemen seperti ini. Seperti yang dapat Anda lihat dari kode di atas, posisi elemen 50% dari bagian atas dan kiri, dan kemudian menggunakan nilai margin, mendorong kembali unsur setengah dari lebar dan tinggi. Ini merupakan metode yang bagus untuk menyelaraskan unsur-unsur di tengah halaman, tetapi tidak yang besar dalam hal fleksibilitas. Misalnya, jika Anda ingin menduplikasi elemen, Anda harus mengubah lebar, nilai-nilai yang tinggi dan margin untuk menjaga elemen yang selaras. Meskipun saya selaras bentuk di tengah halaman, merasa bebas untuk mengubah kode untuk apa pun yang Anda suka!

Sekarang bahwa kita memiliki formulir selaras, saatnya untuk beralih ke styling input!


Langkah 3: Styling input

Sekarang, kita benar-benar mendapatkan kesenangan stuff. Mari kita mulai dengan menambahkan CSS untuk input teks dan password:

Ingat, tujuan kami adalah untuk membuat bentuk yang fleksibel. Daripada mendeklarasikan masukan lebar tetap, saya memutuskan untuk membuat lebar relatif lebar formulir. Dengan cara ini, jika kami memutuskan untuk mengubah lebar bentuk, semua masukan akan berubah sesuai.

Karena kita menyatakan nilai margin-top untuk semua masukan, kita perlu menambahkan sebuah selector anak pertama dan pastikan margin-top masukan pertama diatur ke nol. Dengan cara ini, nilai input yang pertama akan selalu diposisikan di atas bentuk.

Satu hal yang perlu diingat adalah pengaturan garis properti ke none, sehingga browser tidak menambahkan garis yang tidak diinginkan setiap masukan kami.

Perbatasan transparan

Untuk membuat bentuk yang lebih fleksibel, kita akan menambahkan batas transparan, sehingga apapun latar belakang yang memiliki situs web, formulir akan berubah sesuai dengan itu. Karena atribut opacity mengubah opacity dari semua elemen, saya memutuskan untuk mencari sebuah metode untuk hanya mengubah opacity perbatasan.
Jika Anda menyatakan perbatasan warna di rgba, dimungkinkan untuk menambah nilai alpha. Seperti yang Anda lihat di atas, perbatasan kami adalah border padat 1px hitam, tetapi dengan opacity adalah 47%.

Masalahnya Padding

Dalam desain kami, teks dalam bidang bergeser ke kanan. Untuk mencapai efek ini dalam CSS, kita dapat menggunakan properti padding-kiri dan set ke 20px. Ketika kita membuat kode, timbul masalah. Nilai padding menambah 20 piksel lebar masukan, yang tidak apa yang kita ingin.

Untuk memperbaiki ini, kita dapat menambahkan latar belakang-klip properti dan menetapkan nilai ke padding-kotak. Potongan ini CSS memastikan bahwa padding tidak mempengaruhi lebar input. Anda dapat mempelajari lebih lanjut tentang properti latar belakang-klip di Mozilla.

Menambahkan Inner Shadow

Properti CSS3 sangat dingin lain kotak-bayangan. Menggunakan inset parameter memungkinkan kita untuk membuat bayangan batin pada elemen input. Menggunakan fokus pemilih, kita dapat dengan mudah mengubah nilai-nilai dan warna di sekitar ketika pengguna mengklik di lapangan.


Langkah 4: Styling tombol Kirim

Tombol Kirim adalah bagian yang sangat penting dari bentuk, jadi mari kita membuatnya menonjol! Inilah CSS yang kita akan gunakan untuk kirim masukan:

CSS untuk tombol Kirim kami tidak cukup lurus ke depan; Kami menggunakan perbatasan, gradien dan bayangan batin untuk membuat tombol menonjol. Properti CSS3 lain kita akan melihat teks-shadow.

Untuk membuat tombol teks berdiri keluar sedikit lebih, kita akan menambahkan 1px bayangan padat di atas teks. Menggunakan warna gelap (#5b6ddc), kita dapat membuat teks putih lebih menonjol terhadap latar belakang biru terang. Bahkan efek yang paling halus seperti menambahkan teks bayangan dapat menambahkan banyak untuk desain Anda, membantu teks yang menonjol.

Aku pergi ke depan dan menambahkan kode untuk hover dan aktif penyeleksi. Semua yang berubah adalah warna gradien dan bayangan batin. Perhatikan bagaimana perubahan warna lebih halus, tetapi hal itu menambah banyak desain. Saya juga mengubah nilai margin-top tiga piksel lebih rendah pada hover negara. Perubahan terasa alami dan menambah keanggunan bentuk.

Sejauh ini, segalanya tampak hebat, tetapi jika Anda arahkan dan klik pada beberapa elemen, tampaknya sedikit berombak. Waktu untuk menambahkan beberapa animasi!


Langkah 5: Menambahkan transisi ke elemen

Untuk membuat hal-hal yang mengalir jauh lebih baik, mari kita menambahkan sedikit kode CSS ke input kami:

Menggunakan transisi yang cepat dan sederhana, Semua kami elemen terlihat dan merasa jauh lebih baik. Pemberitahuan transisi dalam bayangan warna pada input teks dan animasi tombol Kirim di hover; transisi membuat bentuk terlihat lengkap.

Meskipun semuanya terlihat baik, mari kita tambahkan beberapa barang lain sebelum kita menyebutnya hari.


Step 6: Menambahkan label

Untuk memastikan formulir dengan benar dapat diakses, tambahkan sedikit markup di Tag input Anda:

Karena kami ingin membuat formulir sesederhana mungkin, kami memutuskan untuk menggunakan atribut pengganti. Cara lain yang juga bisa bekerja akan menambahkan dalam label tag. Karena kita tidak perlu tag kami, bukan untuk aksesibilitas dan tujuan SEO, kami akan menambahkan kode CSS ini di:

Menetapkan properti tampilan ke none mencapai tampilan yang kita inginkan, yang dalam hal ini, adalah tidak melihat sama sekali!


Langkah 7: Lintas-Browser Compatibility

Sekarang, mari kita pergi kembali ke masalah potensial kami akan memiliki dengan atribut pengganti. Mengatakan seseorang melihat website ini dari browser yang tidak mendukung pengganti: input kosong kami akan cukup unhelpful. Untuk memperbaiki ini, kita akan menggunakan jQuery dan Modernizr untuk mendeteksi dukungan dan memperbaiki situasi dimana ada ada. Untuk memulai, mari kita link script ke halaman HTML kami.

Penurunan tag script<head>HTML Anda. Untuk kinerja terbaik, Anda harus memiliki mereka mengikuti setelah stylesheet referensi Anda.</head> Alasan kami merekomendasikan menempatkan Modernizr di kepala dua kali lipat: Shiv HTML5 (yang memungkinkan HTML5 elemen dalam IE) harus menjalankan sebelum<body>-Modernizr</body>

Sekarang, membuat file javascript baru bernama placeholder.js. Metode unik memiliki cara yang bagus untuk menggunakan Modernizr untuk membuat mundur untuk atribut pengganti. Tambahkan kode ini ke dalam javascript file:

Kami juga akan link javascript file ke halaman HTML kami:

Untuk membuat karya ini, kita perlu menambahkan kelas pengganti ke bidang input:

Sekarang, mari kita tambahkan gaya untuk kelas pengganti di file CSS kami:

Sementara kita di itu, mari kita juga menambahkan cuplikan berguna CSS yang akan memastikan lebar dari input tetap sama, terlepas dari padding dan perbatasan:

Untuk informasi lebih lanjut tentang mengapa kotak-ukuran begitu besar, Paul Irlandia memiliki penjelasan besar.


Langkah 8: Menambahkan animasi sederhana

Untuk membuat formulir kami bahkan lebih mewah, kita akan menambahkan animasi meningkatnya sederhana ke bentuk ketika halaman load. Mari kita mulai dengan menyatakan animasi dan menambahkan keyframes:

CSS di atas menyatakan animasi baru yang disebut login dan mengubah nilai margin-top dan opacity sehingga bentuk memudar dan naik ke posisi. Sekarang, mari kita tambahkan di CSS untuk licin-login id:

Sekarang, setiap kali halaman load, satu detik animasi akan mengeksekusi. Sekarang bahwa kita telah ditata, tetap dan animasi, kita selesai!


Akhir HTML dan CSS

Berikut adalah melihat akhir HTML untuk form login licin ini:

Dan CSS:


Kesimpulan

Berikut adalah sekilas pada hasil akhir:

Hal yang hebat tentang formulir ini adalah bahwa hal itu sangat mudah untuk mengubah. Hal ini juga sangat mudah untuk memperpanjang, menambahkan lebih banyak input, validasi, fungsi dll. Terima kasih untuk membaca sepanjang dan saya berharap Anda belajar sesuatu. Aku akan tertarik untuk mendengar apa yang Anda gunakan untuk!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.