Kami akan menatanya menggunakan CSS3 dan font ikon. Ide di balik demo ini adalah untuk menunjukkan formulir login kepada pengguna dan memberikan link untuk “beralih” ke formulir pendaftaran.
Perhatikan bahwa ini hanya untuk tujuan demo, ini hanya akan berfungsi di browser yang mendukung kelas semu:target, dan Anda tidak boleh menggunakan kode ini di situs web langsung tanpa menyediakan cadangan yang solid.
Berikut ini kita akan melalui Demo 1.
HTMLnya
Di HTML, kita akan meletakkan kedua formulir, menyembunyikan yang kedua dengan CSS. Berikut kodenya, beberapa bagian menariknya akan saya jelaskan nanti.
sudah menjadi anggota? Pergi dan masuk Kami telah menambahkan beberapa keunggulan HTML5 di sini dan menggunakan beberapa masukan baru. Masukan ketik=kata sandi secara otomatis menyembunyikan apa yang diketik pengguna dan menggantinya dengan titik (tergantung browser). Masukan ketik=email memungkinkan browser memeriksa apakah yang dimasukkan pengguna memiliki format alamat email yang valid. Kami juga telah menggunakan
membutuhkan=wajib atribut; browser yang mendukung atribut ini tidak akan membiarkan pengguna mengirimkan formulir sampai kolom ini terisi, tidak diperlukan JavaScript. Itu
pelengkapan otomatis=aktif Atribut akan mengisi nilai terlebih dahulu berdasarkan input pengguna sebelumnya. Kami juga menggunakan beberapa placeholder yang bagus untuk masukan yang akan menunjukkan beberapa nilai panduan ketika masukan tidak diisi.
Sekarang dua bagian yang rumit. Anda mungkin memperhatikan keduanya tautan di bagian atas formulir. Ini adalah sedikit trik yang akan membuat form kita berperilaku baik ketika bermain dengan jangkar, sehingga tidak akan “melompat” pada halaman yang panjang ketika kita mengklik link peralihan dan memicu: kelas semu target. Trik kecil kedua terkait dengan penggunaan font ikon. Kami akan menggunakan atribut data untuk menampilkan ikon. Dengan mengatur
data-icon=”icon_character”
Untuk kejelasan kode dalam tutorial ini, saya akan menghilangkan semua awalan vendor, tetapi tentu saja Anda akan menemukannya di file. Sekali lagi, saya menggunakan beberapa trik CSS3 tingkat lanjut yang mungkin tidak berfungsi di semua browser. Mari kita mulai.
Menata kedua bentuk menggunakan CSS3
Pertama, mari kita beri dua bentuk kita beberapa gaya umum untuk wadahnya.
#berlangganan, #login( posisi: absolut; atas: 0px; lebar: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; latar belakang: rgb(247, 247, 247); batas: 1px solid rgba(147, 184, 189,0.8); bayangan kotak: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; indeks-z: 22; )
Kami telah menambahkan bayangan kotak bagus yang terbuat dari dua bayangan: bayangan sisipan untuk menciptakan cahaya biru bagian dalam, dan bayangan luar. Kami akan menjelaskan sedikit indeks-z.
Berikut ini kita akan menata header dengan beberapa kliping latar belakang:
/**** penataan teks umum ****/ #wrapper h1( ukuran font: 48px; warna: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "FranchiseRegular"," Arial Narrow",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; ) /** Untuk saat ini hanya webkit yang mendukung background-clip:text; */ #wrapper h1( latar belakang: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb (64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-teks-isi-warna: transparan; -webkit-latar belakang-klip: teks; "; tampilan:blok; lebar:100%; tinggi:2px; margin-atas:10px; latar belakang: gradien linier(kiri, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184,189 ,1) 53%, rgba(147.184.189,0.8) 79%, rgba(147.184.189,0) 100%));
Perhatikan bahwa saat ini hanya browser webkit yang mendukung klip latar belakang: teks, jadi kita akan membuat latar belakang yang dilucuti hanya untuk webkit di sini, dan klip ke teks untuk menambahkan garis ke judul H1. Sejak itu klip latar belakang: teks properti saat ini hanya berfungsi di browser Webkit, saya memutuskan untuk menggunakan awalan webkit saja. Itulah alasan mengapa saya membagi deklarasi CSS menjadi dua bagian, dan hanya menggunakan gradien awalan webkit. Hanya menggunakan awalan –webkit- adalah praktik yang buruk, ini hanya untuk tujuan demo, dan Anda tidak boleh melakukan ini di situs web asli! Di situlah juga -webkit-teks-isi-warna: transparan berguna: ini memungkinkan kita untuk hanya memiliki latar belakang transparan di browser webkit, semua browser lainnya akan mengabaikannya dan memberi kita penggantian warna teks yang disediakan.
Kami juga membuat garis memudar di bawah judul dengan bantuan kelas semu:after. Kami menggunakan gradien tinggi 2px dan memudarkan latar belakang menjadi 0 opacity di kedua ujungnya.
Sekarang mari kita menata masukan kita dan memberikan tampilan yang lebih bagus.
/**** gaya masukan lanjutan ****/ /* placeholder */ ::-webkit-input-placeholder ( warna: rgb(190, 188, 188); gaya font: miring; ) masukan:-moz- placeholder, textarea:-moz-placeholder( warna: rgb(190, 188, 188); gaya font: miring; ) masukan ( garis besar: tidak ada; )
Pertama kita menata inputnya, dan menghapus garis luarnya. Tapi hati-hati di sini; garis besarnya membantu pengguna mengetahui input mana yang difokuskan, jadi jika Anda menghapusnya, Anda harus memberikan status some:active dan:focus untuk input tersebut.
/* semua input kecuali kirim dan kotak centang */ #wrapper input:not())( lebar: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178) ; ukuran kotak: kotak konten; radius batas: 3px; bayangan kotak: 0px 1px 0px rgba(168, 168, 168, 0,6) inset; :fokus( batas: 1px solid rgba(91, 90, 90, 0.7); latar belakang: rgba(238, 236, 240, 0.2); bayangan kotak: 0px 1px 4px 0px rgba( 168, 168, 168, 0.9) inset )
Di sini kami menggunakan kelas:not pseudo, untuk mengatur gaya semua input, kecuali kotak centang. Saya memberikan status:fokus dan:aktif, karena saya memutuskan untuk menghapus garis besarnya.
Dan sekarang bagian yang menyenangkan: font ikon. Karena kita tidak bisa menggunakan kelas semu:before dan:after pada input, kita harus melakukan sedikit kecurangan: kita akan menambahkan ikon ke label, dan kemudian menempatkannya di input. Saya menggunakan perpustakaan fontomas yang mengumpulkan beberapa ikon bagus. Anda dapat mengatur ulang untuk mengatur ikon ke huruf tertentu. Ingat ikon data atribut? Di situlah Anda harus meletakkan surat itu. saya menggunakan ikon-data='u' untuk pengguna, 'e' untuk email, 'p' untuk kata sandi. Setelah saya memilih hurufnya, saya mengunduh fontnya, dan menggunakan pembuat font fontquirrel untuk mengubahnya menjadi format yang kompatibel dengan @font-face.
@font-face ( font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded- opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont .svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; ) /** trik ikon ajaib ! **/ :setelah ( konten: attr(ikon-data); font-family: "FontomasCustomRegular"; warna: rgb(106, 159, 171); posisi: absolut; kiri: 10 piksel; atas: 35 piksel; lebar: 30 piksel; )
Iya, itu saja kawan, tidak perlu ada kelas untuk setiap ikon. Kami menggunakan konten: attr(ikon data) untuk mengambil huruf dari atribut data-icon, jadi kita hanya perlu mendeklarasikan font, memilih warna yang bagus dan memposisikannya.
Sekarang mari kita beri gaya pada tombol kirim untuk kedua formulir.
/*menata gaya kedua tombol kirim */ #wrapper p.button input( lebar: 30%; kursor: penunjuk; latar belakang: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Sempit",Arial,sans-serif; warna: #fff; ukuran font: 24px; batas: 1px solid rgb(28, 108, 122); margin-bawah: 10px; bayangan teks: 0 1px 1px rgba(0, 0, 0, 0,5); radius batas: 3px; bayangan kotak: 0px 1px 6px 4px rgba(0, 0, 0, 0,07) sisipan, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb(210, 210, 210); transisi: semua 0,2 detik linier; ) #wrapper p.button input:hover( latar belakang: rgb(74, 179, 198); ) #wrapper p.button input:aktif, #wrapper p .button input:fokus( latar belakang: rgb(40, 137, 154); posisi: relatif; atas: 1px; batas: 1px solid rgb(12, 76, 87); bayangan kotak: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) sisipan; ) p.login.button, p.signin.button( perataan teks: kanan; margin: 5px 0; )
Triknya di sini adalah dengan menggunakan box-shadow untuk membuat beberapa batas tambahan. Anda hanya dapat menggunakan satu batas, tetapi bayangan kotak sebanyak yang Anda inginkan. Kita akan menggunakan nilai panjang untuk membuat batas putih kedua “palsu”, lebar 3px, tanpa blur.
Kemudian kita akan menata kotak centangnya, tidak ada yang istimewa di sini:
/* menata kotak centang "biarkan saya tetap masuk"*/ .keeplogin( margin-top: -5px; ) .keeplogin input, .keeplogin label( display: inline-block; font-size: 12px; font-style: italic; ) .keeplogin input#loginkeeping( margin-kanan: 5px; ) .keeplogin label( lebar: 80%; )
Kita akan menata bagian bawah formulir menggunakan gradien linier berulang untuk membuat latar belakang bergaris.
P.change_link( posisi: absolut; warna: rgb(127, 124, 124); kiri: 0px; tinggi: 20px; lebar: 440px; padding: 17px 30px 20px 30px; ukuran font: 16px; perataan teks: kanan; batas atas: 1px rgb padat(219, 229, 232); radius batas: 0 0 5px 5px; latar belakang: rgb(225, 234, 235); 247, 247) , rgb(247, 247, 247) 15 piksel, rgb(225, 234, 235) 15 piksel, rgb(225, 234, 235) 30 piksel, rgb(247, 247, 247) 30 piksel); tampilan: blok sebaris; berat font: tebal; latar belakang: rgb(247, 248, 241); bantalan: 2px 6px; warna: rgb(29, 162, 193); ; radius batas: 4px; batas: 1px rgb padat(203, 213, 214); transisi: semua 0,4 detik; latar belakang: rgb(247, 247, 247); 198) #wrapper p.change_link a:active( posisi: relatif; atas: 1px; )
Sekarang Anda akan melihat bahwa kami memiliki dua bentuk yang bagus, tapi kami benar-benar ingin hanya satu yang ditampilkan pada satu waktu. Jadi sekarang waktunya untuk beberapa animasi!!
Membuat animasi peralihan
Hal pertama yang harus dilakukan adalah menyembunyikan form kedua dengan mengatur opacity ke 0:
#daftar( indeks-z: 21; opasitas: 0; )
Ingat formulir login kita memiliki indeks z 22? Kami akan memberikan formulir kedua indeks-z 21, untuk meletakkannya “di bawah” formulir login.
Dan sekarang bagian yang paling bagus: mengganti formulir menggunakan kelas semu:target. Apa yang benar-benar harus Anda pahami tentang:target adalah kita akan menggunakan jangkar untuk melakukan transisi. Perilaku normal dari tautan jangkar adalah melompat ke target di halaman. Tapi kami tidak ingin lompat kemana-mana, kami hanya ingin berpindah bentuk saja. Dan inilah trik kami menggunakan dua link di bagian atas halaman. Daripada langsung menghubungkan ke formulir kedua, dan berisiko mendapatkan efek “melompat”, kami justru menempatkan kedua tautan tersebut di bagian atas halaman dan memberikannya tampilan: tidak ada. Ini akan menghindari lompatan halaman apa pun. Kredit saat kredit jatuh tempo: Saya menemukan trik ini pada pembuatan CSS3 (dalam bahasa Prancis).
#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login( indeks-z: 22; nama-animasi: fadeInLeft; penundaan animasi: .1s; )
Jadi inilah yang terjadi: ketika kita mengkliknya Bergabunglah dengan kami tombol, kami memicu #toregister. Kami kemudian melakukan animasi, dengan menggunakan pemilih saudara ~ untuk menemukan elemen #register kami. Kami menggunakan animasi yang disebut memudarDi Kiri. Karena kita “menyembunyikan” formulir menggunakan opacity nol, kita akan menggunakan animasi yang memudar, untuk membuatnya muncul. Kami juga telah mengubah indeks-z, untuk membuatnya muncul di atas formulir lainnya.
Hal yang sama terjadi pada bentuk lainnya.
Dan berikut adalah kode untuk animasinya. Kami menggunakan kerangka animasi CSS3 dari Dan Eden dan mengadaptasinya untuk tutorial ini.
Animate( durasi animasi: 0,5 detik; fungsi pengaturan waktu animasi: kemudahan; mode pengisian animasi: keduanya; ) @keyframes fadeInLeft ( 0% ( opacity: 0; transform: TranslateX(-20px); ) 100% ( opacity : 1; transformasi: terjemahkanX(0);
Bentuk yang “menghilang” akan mempunyai animasi lain yang membuatnya memudar ke kiri:
#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register( nama animasi: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( opacity: 1; transform: TranslateX(0); ) 100% ( opacity : 0; transformasi: terjemahanX(-20 piksel);
Anda sekarang dapat menggunakan animasi lain dari animate.css Dan Eden: cukup sesuaikan kelas .animate Anda dan ganti nama animasinya. Anda juga akan menemukan beberapa animasi khusus di akhir file animate-custom.css.
Ya, itu saja teman-teman. Saya harap Anda menikmati tutorialnya!
Harap diperhatikan, bahwa di beberapa browser klip latar belakang: teks tidak didukung. Di Internet Explorer 9 transisi dan animasi tidak berfungsi, jadi tidak akan ada peralihan bentuk yang mewah. Di Internet Explorer 8 dan di bawahnya, kelas semu:target tidak didukung, sehingga tidak akan berfungsi sama sekali (Anda hanya akan melihat formulir login).
HTML digunakan untuk pertukaran data antara komputer pengguna dan server. formulir. Biasanya, pertukaran data terjadi sebagai berikut: pengguna memasukkan data yang diperlukan ke dalam kolom formulir, setelah itu dikirim ke server, di mana data tersebut diproses oleh program yang sesuai. Jika ini, misalnya, data registrasi pengguna, maka data tersebut diperiksa kesesuaiannya dengan persyaratan dan, jika berhasil diverifikasi, dimasukkan ke dalam database. Dalam hal ini, pengguna diberikan tanggapan, yang menginformasikan tentang keberhasilan penyelesaian pendaftaran, atau ditawari kesempatan untuk memperbaiki kesalahan yang dibuat saat mengisi kolom formulir. Tentu saja penggunaan formulir tidak hanya sebatas mengumpulkan data dari pengguna dan mentransfernya ke server untuk diproses, tetapi tujuan ini harus dianggap sebagai tujuan utama.
Menandai
Contoh 6.1. Menggunakan elemen "bentuk".
Halo, teman habra terkasih! Dalam tutorial ini, kita akan belajar cara membuat dua formulir HTML5: formulir login dan formulir pendaftaran. Bentuk-bentuk ini akan ditukar satu sama lain menggunakan kelas semu :target CSS3. Kami akan menggunakan CSS3 dan font ikon. Ide dari demo ini adalah untuk menunjukkan kepada pengguna formulir login dan memberi mereka tautan “buka” ke formulir pendaftaran.
Pada tutorial kali ini saya akan membahas secara detail tentang cara membuat efek seperti pada Demo 1.
HTML
Di sini kami telah menggunakan beberapa trik HTML5. Misalnya saja elemen Pergi dan masuk secara otomatis menyembunyikan apa yang diketik pengguna dan mengganti karakter dengan titik atau tanda bintang (tergantung browser). Elemen ketik=kata sandi memungkinkan browser memeriksa apakah alamat email diformat dengan benar. Selain itu, kami menggunakan parameter ketik=email; Browser yang mendukung pengaturan ini tidak akan mengizinkan pengguna mengirimkan formulir sampai kolom tersebut diisi; JavaScript tidak diperlukan di sini. Parameter atribut; browser yang mendukung atribut ini tidak akan membiarkan pengguna mengirimkan formulir sampai kolom ini terisi, tidak diperlukan JavaScript. akan secara otomatis mengisi beberapa kolom. Kami juga menggunakan teks alternatif untuk membantu pengguna mengisi formulir.
Sekarang tentang dua poin rumit. Anda mungkin memperhatikan dua tautan di awal formulir. Trik rapi ini akan memungkinkan formulir kita berperilaku benar saat bekerja dengan jangkar.
Poin kedua terkait penggunaan font dengan ikon. Kami akan menggunakan atribut data untuk menampilkan ikon. Parameter pengaturan tautan di bagian atas formulir. Ini adalah sedikit trik yang akan membuat form kita berperilaku baik ketika bermain dengan jangkar, sehingga tidak akan “melompat” pada halaman yang panjang ketika kita mengklik link peralihan dan memicu: kelas semu target. Dengan karakter yang sesuai di HTML, kita hanya perlu menetapkan satu aturan di CSS untuk menata semua ikon. Anda dapat membaca lebih lanjut tentang teknik ini di website: 24 Cara: Menampilkan Ikon dengan Font dan Atribut Data.
CSS
Agar kode tetap bersih, saya akan melewatkan parameter dasar (html, body, dll.), tetapi Anda dapat menemukannya di file sumber. Sekali lagi, saya menggunakan teknik CSS3 yang tidak berfungsi di semua browser. Jadi mari kita mulai!Bentuk Styling Menggunakan CSS3
Pertama, mari kita beri gaya dasar pada formulir kita.#berlangganan, #login( posisi: absolut; atas: 0px; lebar: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; latar belakang: rgb(247, 247, 247); batas: 1px solid rgba(147, 184, 189,0.8); bayangan kotak: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; indeks-z: 22; )
Di sini kita akan menetapkan properti untuk header:
/**** teks ****/ #wrapper h1( ukuran font: 48px; warna: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "FranchiseRegular","Arial Narrow ",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; ) /** Saat ini hanya webkit yang mendukung background-clip:text; **/ #wrapper h1( latar belakang: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparan; -webkit-background-clip: teks; ) #wrapper h1:after( konten: " "; tampilan:blok; lebar:100%; tinggi:2px; latar belakang: gradien linier(kiri, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20% 147,184,189,1) 53%, rgba( 147.184.189.0,8) 79%, rgba(147.184.189,0) 100%);
Perhatikan bahwa saat ini hanya browser dengan dukungan webkit klip latar belakang: teks, jadi kita akan membuat latar belakang bergaris khusus webkit dan mengikatnya ke header H1. Sejak parameternya klip latar belakang: teks hanya berfungsi di browser Webkit, saya memutuskan untuk bekerja hanya dengan properti webkit. Itu sebabnya saya membagi CSS menjadi dua bagian dan hanya menggunakan gradien webkit. Namun, Anda tidak boleh hanya menggunakan webkit di situs web Anda! Jadi, misalnya parameternya -webkit-teks-isi-warna: transparan memungkinkan kita memiliki latar belakang transparan, tetapi hanya untuk browser webkit, semua browser lain akan mengabaikan properti ini.
Kami juga membuat garis tipis di bawah judul menggunakan elemen pseudo-class :after. Kami menggunakan gradien dengan tinggi 2px dan mengurangi opacity di tepinya menjadi nol.
Sekarang mari kita rawat kolom input dan membuatnya terlihat bagus.
/**** gaya masukan lanjutan ****/ /* placeholder */ ::-webkit-input-placeholder ( warna: rgb(190, 188, 188); gaya font: miring; ) masukan:-moz- placeholder, textarea:-moz-placeholder( warna: rgb(190, 188, 188); gaya font: miring; ) masukan ( garis besar: tidak ada; )
Pertama, kita akan menata margin dan menghapus goresannya. Namun hati-hati: kerangka membantu pengguna memahami bidang apa yang sedang mereka geluti. Jika Anda menghapusnya, Anda perlu menerapkan properti: aktif dan: fokus.
/* semua kolom kecuali kirim dan kotak centang */ #wrapper input:not())( lebar: 92%; margin-atas: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); ukuran kotak: kotak konten; radius batas: 3px; bayangan kotak: 0px 1px 4px 0px rgba(168, 168, 168, 0,6) sisipan; fokus( batas: 1px solid rgba(91, 90, 90, 0.7); latar belakang: rgba(238, 236, 240, 0.2); bayangan kotak: 0px 1px 4px 0px rgba(168 , 168, 168, 0.9) inset )
Di sini kami menggunakan kelas semu: tidak untuk menata gaya semua bidang kecuali kotak centang. Selain itu, saya memutuskan untuk menghapus stroke dan menambahkan properti: fokus dan: aktif.
Sekarang saatnya bersenang-senang: font dengan ikon. Karena kita tidak bisa menggunakan kelas semu :before dan :after, kita akan menambahkan ikon ke parameter label dan kemudian menempatkannya di kolom. Saya akan menggunakan perpustakaan fontomas. Anda dapat mencocokkan sendiri ikon dengan huruf yang sesuai. Ingat atribut ikon data? Di sinilah Anda perlu memasukkan surat itu. saya menggunakan ikon-data='u' untuk login, 'e' untuk email, 'p' untuk kata sandi. Setelah saya memilih hurufnya, saya mengunduh fontnya dan menggunakan generator font fontquirrel untuk mengonversinya ke format yang sesuai untuk @font-face.
@font-face ( font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded- opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont .svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; ) /** trik sulap! **/ :setelah ( konten: attr(ikon-data); font-family: "FontomasCustomRegular"; warna: rgb(106, 159, 171); posisi: absolut; kiri: 10 piksel; atas: 35 piksel; lebar: 30 piksel; )
Itu saja. Anda tidak perlu memiliki kelas terpisah untuk setiap ikon. Kami menggunakan parameternya konten: attr(ikon data) untuk mendapatkan huruf dari atribut data-icon. Jadi, kita hanya perlu menetapkan font, memilih warna, dan menempatkan ikon.
Sekarang mari kita tetapkan aturan untuk tombol kirim formulir.
/*gaya kedua tombol*/ #wrapper p.button input( lebar: 30%; kursor: penunjuk; latar belakang: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow ",Arial,sans-serif; warna: #fff; ukuran font: 24px; batas: 1px solid rgb(28, 108, 122); margin-bawah: 10px; bayangan teks: 0 1px 1px rgba(0, 0 , 0, 0,5); radius batas: 3px; bayangan kotak: 0px 1px 6px 4px rgba(0, 0, 0, 0,07) sisipan, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb (210, 210, 210); transisi: semua 0,2 detik linier; ) #wrapper p.button input:hover( latar belakang: rgb(74, 179, 198); ) #wrapper p.button input:aktif, #wrapper p. masukan tombol:fokus( latar belakang: rgb(40, 137, 154); posisi: relatif; atas: 1px; batas: 1px solid rgb(12, 76, 87); bayangan kotak: 0px 1px 6px 4px rgba(0, 0 , 0, 0.2) sisipan; ) p.login.button, p.signin.button( perataan teks: kanan; margin: 5px 0; )
Caranya adalah dengan menggunakan box-shadow untuk membuat beberapa frame. Tentu saja, Anda hanya dapat menggunakan satu bingkai, tetapi Anda juga dapat menggunakan beberapa bingkai. Kita akan menggunakan parameter panjang untuk membuat batas putih kedua “palsu”, lebar 3 piksel, tanpa buram.
Sekarang mari kita beri gaya pada kotak centang, kita tidak akan melakukan sesuatu yang tidak biasa di sini:
/* beri gaya pada kotak centang “ingat saya”*/ .keeplogin( margin-top: -5px; ) .keeplogin input, .keeplogin label( display: inline-block; font-size: 12px; font-style: italic; ) . keeplogin input#loginkeeping( margin-kanan: 5px; ) .keeplogin label( lebar: 80%; )
Menata footer formulir menggunakan beberapa gradien linier untuk membuat gradien bergaris.
P.change_link( posisi: absolut; warna: rgb(127, 124, 124); kiri: 0px; tinggi: 20px; lebar: 440px; padding: 17px 30px 20px 30px; ukuran font: 16px; perataan teks: kanan; batas atas: 1px rgb padat(219, 229, 232); radius batas: 0 0 5px 5px; latar belakang: rgb(225, 234, 235); 247, 247) , rgb(247, 247, 247) 15 piksel, rgb(225, 234, 235) 15 piksel, rgb(225, 234, 235) 30 piksel, rgb(247, 247, 247) 30 piksel); tampilan: blok sebaris; berat font: tebal; latar belakang: rgb(247, 248, 241); bantalan: 2px 6px; warna: rgb(29, 162, 193); ; radius batas: 4px; batas: 1px rgb padat(203, 213, 214); transisi: semua 0,4 detik; latar belakang: rgb(247, 247, 247); 198) #wrapper p.change_link a:active( posisi: relatif; atas: 1px; )
Sekarang Anda dapat melihat bahwa kita memiliki dua bentuk yang bagus, tapi kami hanya ingin satu saja yang ditampilkan. Saatnya untuk animasi!
Membuat animasi
Hal pertama yang akan kita lakukan adalah menyembunyikan bentuk kedua dengan mengatur opacity ke 0:#daftar( indeks-z: 21; opasitas: 0; )
Ingat form login memiliki indeks-z: 22? Untuk form kedua kita akan menetapkan parameter ini ke 21 untuk meletakkannya “di bawah” form login.
Sekarang bagian yang menyenangkan: kita menukar formulir menggunakan kelas semu: target. Anda perlu memahami satu hal tentang :target: kita akan menggunakan jangkar untuk memindahkannya. Perilaku normal seorang jangkar adalah melompat ke elemen halaman tertentu. Tapi kami tidak menginginkan itu, kami hanya ingin menukar bentuknya. Di sinilah trik kami menggunakan dua link di bagian atas halaman dapat membantu. Daripada mengarahkan kita langsung ke bentuk kedua dan mempertaruhkan efek lompatan, kita akan memberikan parameter pada link tersebut tampilan: tidak ada. Ini akan membantu menghindari lompatan. Saya menemukan trik ini di situs: CSS3 create (Perancis).
#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login( indeks-z: 22; nama-animasi: fadeInLeft; penundaan animasi: .1s; )
Inilah yang terjadi: ketika kita mengklik tombol tersebut Bergabung, kami menuju ke #toregister. Kemudian animasi terjadi dan baru kita berpindah ke elemen #register. Kami menggunakan animasi yang disebut memudarDi Kiri. Karena kita “menyembunyikan” bentuk menggunakan transparansi nol, kita akan menerapkan animasi yang akan muncul secara bertahap. Kami juga mengubah indeks-z sehingga muncul di atas bentuk lainnya. Hal yang sama terjadi pada bentuk lainnya.
Berikut kode animasinya. Kami menggunakan kerangka animasi CSS3 dari Dan Eden dan mengadaptasi kerangka ini untuk tutorial kami.
Animate( durasi animasi: 0,5 detik; fungsi pengaturan waktu animasi: kemudahan; mode pengisian animasi: keduanya; ) @keyframes fadeInLeft ( 0% ( opacity: 0; transform: TranslateX(-20px); ) 100% ( opacity : 1; transformasi: terjemahkanX(0);
Bentuk yang "menghilang" akan memiliki animasi memudar ke kiri:
#toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register( nama animasi: fadeOutLeftBig; ) @keyframes fadeOutLeft ( 0% ( opacity: 1; transform: TranslateX(0); ) 100% ( opacity : 0; transformasi: terjemahanX(-20 piksel);
Anda sekarang dapat menggunakan animasi lain dari file animate.css Dan Eden: cukup ubah nama kelas dan animasi .animate. Anda juga akan menemukan beberapa animasi lainnya di akhir file animate-custom.css.
Itu saja, teman. Saya harap Anda menikmati tutorial ini!
Perhatikan bahwa di beberapa browser opsinya klip latar belakang: teks tidak didukung. Animasi tidak berfungsi di Internet Explorer 9. Di Internet Explorer 8 dan yang lebih lama, pseudo-class:target pseudo-class tidak didukung, jadi efek ini tidak akan berfungsi sama sekali.
P.S. Saya dengan senang hati akan menerima komentar apa pun mengenai terjemahan dalam pesan pribadi. Terima kasih!
Tag: Tambahkan tag
Membuat situs berbasis keanggotaan sepertinya merupakan tugas yang menakutkan pada awalnya. Jika Anda pernah ingin melakukan ini sendiri, lalu menyerah begitu saja ketika Anda mulai berpikir bagaimana Anda akan menyusunnya menggunakan keahlian PHP Anda, maka artikel ini cocok untuk Anda. Kami akan memandu Anda melalui setiap aspek pembuatan situs berbasis keanggotaan, dengan area anggota aman yang dilindungi kata sandi.
Keseluruhan proses terdiri dari dua bagian besar: registrasi pengguna dan otentikasi pengguna. Pada bagian pertama, kita akan membahas pembuatan formulir pendaftaran dan penyimpanan data dalam database MySQL. Pada bagian kedua, kita akan membuat formulir login dan menggunakannya untuk mengizinkan pengguna mengakses di area aman.
Unduh kodenya
Anda dapat mengunduh seluruh kode sumber untuk sistem registrasi/login dari tautan di bawah ini:
Konfigurasi & Unggah
File ReadMe berisi instruksi rinci.
Buka sumber\termasuk\membersite_config.php file dalam editor teks dan perbarui konfigurasi. (Login basis data, nama situs web Anda, alamat email Anda, dll).
Unggah seluruh isi direktori. Uji register.php dengan mengirimkan formulir.
Formulir pendaftaran
Untuk membuat akun pengguna, kita perlu mengumpulkan informasi dalam jumlah minimal dari pengguna. Kami membutuhkan namanya, alamat emailnya dan nama pengguna serta kata sandi yang diinginkannya. Tentu saja, kami dapat meminta lebih banyak informasi pada saat ini, namun formulir yang panjang selalu tidak menguntungkan. Jadi mari kita batasi diri kita hanya pada bidang-bidang itu saja.
Berikut formulir pendaftarannya:
Jadi, kami memiliki kolom teks untuk nama, email, dan kata sandi. Perhatikan bahwa kami menggunakan untuk kegunaan yang lebih baik.
Validasi formulir
Pada titik ini adalah ide bagus untuk menempatkan beberapa kode validasi formulir, jadi kami memastikan bahwa kami memiliki semua data yang diperlukan untuk membuat akun pengguna. Kita perlu memeriksa apakah nama dan email, serta kata sandi sudah diisi dan apakah email dalam format yang benar.
Menangani penyerahan formulir
Sekarang kita harus menangani data formulir yang dikirimkan.
Berikut urutannya (lihat file fg_membersite.php di sumber yang diunduh):
fungsi RegisterUser() ( if(!isset($_POST["dikirim"])) ( return false; ) $formvars = array(); if(!$this->ValidateRegistrationSubmission()) ( return false; ) $this- >CollectRegistrationSubmission($formvars); if(!$this->SaveToDatabase($formvars)) ( return false; ) if(!$this->SendUserConfirmationEmail($formvars)) ( return false; ) $this->SendAdminIntimationEmail($ formvars); mengembalikan nilai true;
Pertama, kami memvalidasi pengiriman formulir. Kemudian kami mengumpulkan dan 'membersihkan' data pengiriman formulir (selalu lakukan ini sebelum mengirim email, menyimpan ke database, dll). Pengiriman formulir kemudian disimpan ke tabel database. Kami mengirim email ke pengguna meminta konfirmasi. Kemudian kami memberitahukan kepada admin bahwa pengguna telah terdaftar.
Menyimpan data dalam database
Sekarang kita sudah mengumpulkan semua data, kita perlu menyimpannya ke dalam database.
Inilah cara kami menyimpan pengiriman formulir ke database.
function SaveToDatabase(&$formvars) ( if(!$this->DBLogin()) ( $this->HandleError("Login database gagal!"); return false; ) if(!$this->Ensuretable()) ( return false; ) if(!$this->IsFieldUnique($formvars,"email")) ( $this->HandleError("Email ini sudah terdaftar"); return false; ) if(!$this->IsFieldUnique( $formvars,"nama pengguna")) ( $this->HandleError("Nama Pengguna ini sudah digunakan. Silakan coba nama pengguna lain"); return false; ) if(!$this->InsertIntoDB($formvars)) ( $this- >HandleError("Gagal memasukkan ke Database!");
Perhatikan bahwa Anda telah mengkonfigurasi detail login Database di file membersite_config.php. Dalam sebagian besar kasus, Anda dapat menggunakan “localhost” untuk host database.
Setelah login, kita pastikan tabel tersebut sudah ada. (Jika tidak, script akan membuat tabel yang diperlukan).
Kemudian kami pastikan bahwa nama pengguna dan emailnya unik. Jika tidak unik, kami mengembalikan kesalahan kepada pengguna.
Struktur tabel database
Ini adalah struktur tabelnya. Fungsi CreateTable() di file fg_membersite.php membuat tabel. Ini kodenya:
function CreateTable() ( $qry = "Buat Tabel $this->tablename (". "id_user INT NOT NULL AUTO_INCREMENT ," "name VARCHAR(128) NOT NULL ," "email VARCHAR(64) NOT NULL ," " "phone_number VARCHAR(16) BUKAN NULL ," "nama pengguna VARCHAR(16) BUKAN NULL ," "kata sandi VARCHAR(32) BUKAN NULL ," "kode konfirmasi VARCHAR(32) ," " ")"; ini->koneksi)) ( $ini->HandleDBError("Kesalahan saat membuat tabel \nquery tadi\n $qry"); return false; ) return true )
Bidang id_user akan berisi id unik pengguna, dan juga merupakan kunci utama tabel. Perhatikan bahwa kami mengizinkan 32 karakter untuk bidang kata sandi. Kami melakukan ini karena, sebagai langkah keamanan tambahan, kami akan menyimpan kata sandi dalam database yang dienkripsi menggunakan MD5. Harap dicatat bahwa karena MD5 adalah metode enkripsi satu arah, kami tidak akan dapat memulihkan kata sandi jika pengguna lupa.
Memasukkan registrasi ke tabel
Berikut adalah kode yang kita gunakan untuk memasukkan data ke dalam database. Kami akan memiliki semua data kami tersedia di array $formvars.
function InsertIntoDB(&$formvars) ( $confirmcode = $this->MakeConfirmationMd5($formvars["email"]); $insert_query = "masukkan ke dalam ".$this->namatabel."(nama, email, nama pengguna, kata sandi, kode konfirmasi) nilai("" . $this->SanitizeForSQL($formvars["name"]) . "", "" . $this->SanitizeForSQL($formvars["email"]) . "", "" . $ ini->SanitizeForSQL($formvars["nama pengguna"]) "", "" $insert_query ,$this->koneksi)) ( $this->HandleDBError("Kesalahan memasukkan data ke tabel\nquery:$insert_query"); return false; ) return true )
Perhatikan bahwa kita menggunakan fungsi PHP md5() untuk mengenkripsi kata sandi sebelum memasukkannya ke dalam database.
Kami juga membuat kode konfirmasi unik dari alamat email pengguna.
Mengirim email
Sekarang kami memiliki pendaftaran di database kami, kami akan mengirimkan email konfirmasi kepada pengguna. Pengguna harus mengklik link di email konfirmasi untuk menyelesaikan proses pendaftaran.
fungsi SendUserConfirmationEmail(&$formvars) ( $mailer = new PHPMailer(); $mailer->CharSet = "utf-8"; $mailer->AddAddress($formvars["email"],$formvars["name"]) ; $mailer->Subjek = "Pendaftaran Anda dengan ".$this->namasitus; $mailer->Dari = $ini->GetFromAddress(); ])); $confirm_url = $ini->GetAbsoluteURLFolder()."/confirmreg.php?code=".$confirmcode; $mailer->Body ="Halo ".$formvars["nama"]."\r\ n\r\n". "Terima kasih atas pendaftaran Anda dengan ".$this->sitename."\r\n". "Silakan klik tautan di bawah untuk mengonfirmasi pendaftaran Anda.\r\n." "$confirm_url\r \n". "\r\n". "Salam,\r\n". "Webmaster\r\n". $ini->nama situs; if(!$mailer->Kirim()) ( $ini-> HandleError("Gagal mengirimkan email konfirmasi pendaftaran."); return false;
Pembaruan
9 Januari 2012
Fitur Reset Kata Sandi/Ubah Kata Sandi ditambahkan
Kode tersebut sekarang dibagikan di GitHub.
Selamat Datang kembaliNama Lengkap Pengguna(); ?>!
Lisensi
Kode ini dibagikan di bawah lisensi LGPL. Anda dapat dengan bebas menggunakannya di situs komersial atau non-komersial.
Tidak ada postingan terkait.
Komentar pada entri ini ditutup.
Dalam tutorial ini, kami akan memberi tahu Anda cara membuat Formulir Pendaftaran menggunakan HTML dan CSS3. Kami akan membuat dua formulir Pendaftaran; yang pertama sederhana, dan yang lain memiliki Ikon dengan setiap kolom masukan. Ikon yang kami gunakan adalah ikon font. Formulir pendaftaran ini sederhana, bersih dan menarik.
Ikon yang kami gunakan adalah ikon font. Ini formulir pendaftarannya sederhana, kode bersih dan desain unik. Anda dapat menggunakannya ke dalam situs web Anda dan menyesuaikannya sesuai kebutuhan.
Jika Anda mencari lebih banyak koleksi formulir, maka 40+ formulir pendaftaran cantik ini adalah koleksi terbaik yang saya temukan di internet. Mereka memposting banyak formulir gratis dan premium juga.
Formulir pendaftaran yang digunakan di situs web untuk memungkinkan pengunjung situs membuat akun dan membuat profil mereka. Tergantung pada Anda manfaat apa yang akan Anda berikan kepada pengguna yang mendaftar di situs Anda.
Beberapa situs menggunakan formulir seperti itu untuk memberikan lebih banyak akses kepada pengguna seperti mengunduh file atau memposting artikel, dll. Bagaimanapun, Mari kita lihat, bagaimana kita bisa membuatnya.
Formulir Pendaftaran dalam HTML
Mari kita mulai dengan kode HTML formulir pendaftaran. Kedua kode formulir ditambahkan di dalam nama kelas div cclogin .
Untuk bentuk sederhana, kami telah menambahkan kelas sederhana di sebelah cclogin dan untuk bentuk gaya ikon, kami telah menambahkan ikon kelas di sebelah cclogin.
Bidang masukan formulir ada di dalam tag p. mari kita lihat blok kode HTML.
Mari tambahkan beberapa placeholder
Tetapi jika Anda melihat demonya, saya harus membuat kolom nama depan dan nama belakang menjadi kecil dan memasukkannya ke dalam satu baris. Untuk membuatnya seperti itu kami telah menambahkan setengah kelas ke dalam tag p.
Seperti yang saya katakan sebelumnya, Formulir lainnya adalah formulir gaya ikon. Dalam formulir ini, kami telah menggunakan teknik serupa yang telah kami gunakan sebelumnya di Seperti yang Anda ketahui, kami menggunakan ikon font jadi kami menambahkannya ke tag span.
Bentuk Styling dengan CSS
Pertama-tama, kita akan melihat style-sheet ikon. Untuk ikon, kami telah menggunakan atribut:before
Fa-pengguna:sebelum ( konten: "\f007"; ) .fa-key:before ( konten: "\f084"; ) .fa-envelope:before ( konten: "\f0e0"; )
Mari kita lihat gaya bidangnya
Masukan cclogin, masukan .cclogin, pilih .cclogin( padding:10px; lebar:100%; batas:tidak ada; tinggi:50px; tinggi garis:50px; warna:#757575; )
Field form tanpa icon mempunyai lebar 100%, namun untuk field tanpa icon mempunyai lebar 92%, hal ini dikarenakan kita memerlukan spasi untuk menambahkan icon sebelum field input.
Untuk membuat bidangnya kecil, kita cukup menambahkan kelas .half ke dalam tag p dan mengatur lebarnya menjadi 48%. Untuk field kedua kita telah menambahkan kelas .last di samping kelas .half sehingga kita dapat membuat margin-right:0%; di CSS.
Cclogin .half ( float: kiri; lebar: 48%; margin-kanan:4% ) .cclogin .half.last( margin-kanan:0%; )
Ikon yang digunakan dalam demo berasal dari set Font Awesome oleh Davegandy dan dilisensikan di bawah lisensi CC BY 3.0. Semoga Anda menikmati Formulir pendaftaran pengguna CSS3 ini. Tinggalkan komentar untuk memberi tahu kami.
