Formulir umpan balik amplop HTML5 dan CSS3. Formulir umpan balik yang indah tanpa gambar dalam formulir Umpan Balik CSS murni dalam html5
Pada artikel ini kita akan membahas tentang formulir umpan balik dinamis, yang ketika ukuran jendela berubah, akan menjadi adaptif terhadap tampilan. Artinya, formulir umpan balik akan tersedia untuk dilihat di semua jenis perangkat, di komputer pribadi, laptop, ponsel pintar, dan tablet.
Formulir umpan balik akan terdiri dari 3 kolom entri data - nama, alamat email dan teks surat. Semua bidang harus diisi, dan Anda tidak akan dapat mengirim email kosong. Bidang entri alamat email juga akan divalidasi untuk kebenaran entri. Data akan disajikan dalam kode html, gaya desain formulir umpan balik akan ditulis dalam file CSS terpisah. Berdasarkan prinsip skrip ini, dimungkinkan untuk membuat, dengan analogi, jumlah kolom masukan yang lebih besar atau lebih kecil.
Keuntungan menggunakan formulir ini adalah pengoperasian situs yang berkelanjutan dan penyerahan data secara dinamis dari formulir, tanpa memuat ulang halaman. Perlu juga dicatat bahwa ini mudah dilihat di perangkat seluler.
Di file send.php, edit baris berikut: $to = " [dilindungi email]"; $subjek= "Pesan dari site.ru"; $header="Dari: site.ru";;
Menulis sebuah surat
* Semua bidang yang diperlukan
Mengirim
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); html, body ( tinggi: 100%; padding: 0; margin: 0; ) body ( latar belakang: #d3dce1; font-family: "Roboto", sans-serif; ukuran font: 14px; ) .outer ( tampilan: tabel ; lebar: 100%; tinggi: 100%; perataan teks: tengah; .tengah ( tampilan: sel tabel; perataan vertikal: tengah; ) .inner ( perataan teks: tengah; lebar: otomatis; bantalan: 0 15px ; ) .login-wr ( posisi: relatif; margin: 0 otomatis; latar belakang: #fff; lebar maks: 550px; bayangan kotak: 3px 3px 24px #999; padding: 15px 15px 15px 15px; ) h2 ( perataan teks : kiri; ukuran font: 1,6em; bantalan: 0 0 10 piksel 0; batas bawah: 1 piksel solid #474747; -atas: 20 piksel: kiri; 40px; garis besar: 0; -moz-outline-style: none; ) tombol ( tinggi: 40px; garis besar: 0; -moz-outline-style: tidak ada; ) masukan ( latar belakang: url("img/user.png") tidak ada pengulangan di kiri 10 piksel tengah; ) masukan ( latar belakang: url("img/email.png") tidak diulang di kiri 10 piksel tengah; ) area teks ( latar belakang: url("img/pensil.png") tanpa pengulangan di kiri 10px atas 10px; ) area teks ( lebar: kalk(100% - 55px); tinggi: 120px; batas: 1px solid #bbb; padding: 10px 10px 10px 45px; ukuran font: 14px; ) masukan, masukan ( lebar: kalk(100% - 45px); lebar maksimal: 250px; batas: 1px solid #bbb; bantalan: 0 0 0 45px; ukuran font: 14px ; ) masukan:fokus, masukan:fokus ( batas: 1px solid #2196f3; ) p ( bantalan-bawah: 10px; ) tombol ( lebar: 100%; lebar maksimal: 150px; latar belakang: #e6ebee; batas: tidak ada; batas -bawah: 5px solid #d3dce1; ukuran font: 14px; berat font: 200; transisi: box-shadow .4s kemudahan)$(fungsi() ( $("#loader").hide(); $("form").submit(fungsi(e) ( var nama = $("#nama").val(); var email = $("#email").val(); var pesan = $("#pesan").val(); var data = "nama=" + nama + "&email=" + email + "&pesan=" + pesan ; if(data) ( $.ajax(( ketik: "POST", url: "./send.php", data: data, beforeSend: function(html) ( $("#loader").show(); $("#kirim").hide(); ), sukses: fungsi(html)( $("#loader").hide(); $("#result").html(html); ) )); ) mengembalikan salah; ));
Dalam artikel ini, kita akan mempelajari cara menata formulir menggunakan umpan balik sebagai contoh dan menggunakan markup semantik untuk formulir tersebut, melihat beberapa kehalusan dan nuansa, dan mencoba membuat tampilan formulir kita seidentik mungkin di browser yang berbeda, hingga IE6.
Artikel ini terakhir diperbarui pada 27 Agustus 2013.
Mulai cepatUntuk membuat formulir, gunakan tag yang memiliki atribut tindakan yang diperlukan, yang berisi alamat skrip yang memproses formulir. Anda juga dapat mengatur atribut metode di sini untuk memproses formulir menggunakan metode GET (default) atau POST dan atribut nama, yang selanjutnya akan digunakan untuk mengakses formulir melalui JS/PHP. Jadi markup minimal kita akan terlihat seperti ini:
...
Mari kita coba menambahkan kolom untuk mengisi nama pengguna, email dan tombol untuk mengirimkan formulir:
Nama Anda Surel
Tag paling sering digunakan untuk membuat garis; dalam bentuk yang lebih kompleks, kelas dilampirkan padanya untuk penataan gaya:
Nama Anda Surel
Anda dapat menggunakan opsi dengan daftar definisi, daftar tidak bernomor, atau tabel, yang secara semantik juga cukup benar:
- namamu
| namamu |
Perhatikan bahwa kami juga menetapkan atribut nama untuk semua bidang sehingga kami dapat mengaksesnya nanti menggunakan skrip. name harus unik dan disarankan untuk menetapkan nilai yang sama seperti untuk id . Kami juga secara eksplisit menetapkan nilai ke kosong untuk melindungi terhadap kesalahan di browser.
Jadi inilah yang kita miliki saat ini, tanpa styling CSS untuk saat ini:
Formulir umpan balikSekarang form kita terlihat cukup sederhana dan membosankan, mari kita perumit, tambahkan field tambahan dan buat desain, contohnya seperti ini:
Desain formulir Seperti yang Anda lihat, di sini kami telah menambahkan kemampuan untuk memilih opsi dari daftar menggunakan tag dan kemampuan untuk memasukkan pesan pengguna. Untuk membuat dua kolom kami menggunakan tag tambahan dengan pembungkus dan sekarang markupnya akan seperti ini:
Umpan Balik Nama Anda* Email* Pilih opsi Opsi 1 Opsi 2 Opsi 3 Pesan
Kode menunjukkan bahwa fitur HTML5 digunakan, seperti jenis bidang email, placeholder, dan atribut yang diperlukan (mereka memungkinkan Anda melakukannya tanpa validasi formulir JS) - kita akan melihatnya nanti. Untuk browser lama, kami akan mengizinkan degradasi sebagian, misalnya, kami akan menghilangkan petunjuk teks di bidang (walaupun dapat diimplementasikan menggunakan jQuery dan plugin), dan kami akan memvalidasi data yang dimasukkan menggunakan JS dan PHP. Untuk mendukung IE di bawah properti CSS3 versi 9, mari sambungkan skrip PIE.
Validasi Formulir dalam HTML5Mari tambahkan validasi ke formulir kita. Dengan HTML5 hal ini cukup mudah diterapkan, jadi mari pertimbangkan opsi ini.
Sebagai contoh, mari kita jadikan field tersebut wajib.
Seperti yang Anda lihat, hanya satu atribut wajib yang ditambahkan. Sekarang, ketika Anda mencoba mengirimkan formulir dengan kolom kosong, akan muncul pemberitahuan:
Tampilan pesan berbeda-beda di browser dan, sayangnya, tidak berubah.
Kami juga dapat menentukan jenis email untuk kolom input email:
Artinya, bidang ini menyiratkan alamat email dan elemen akan menerima validasi yang sesuai. Ditunjukkan dengan jelas di tangkapan layar:
Situasi serupa dengan bidang url , tanggal dan nomor:
Semuanya sangat mudah, tanpa script JS/PHP.
Validasi di HTML5 berfungsi secara default, namun dapat dinonaktifkan dengan menambahkan atribut novalidate ke elemen:
...
Fitur tata letak elemen bentuk textareaDi browser berbasis mesin webkit, Anda dapat mengubah ukurannya, yang cukup memudahkan. Namun seringkali properti ini merusak desain, jadi Anda harus menggunakan properti resize: none untuk mencegah pengubahan ukuran. Dimungkinkan juga untuk membiarkan bidang tersebut meregang hanya secara horizontal atau vertikal.
(untuk Safari dan Chrome)
IE menambahkan bilah gulir; untuk menghapusnya, Anda perlu mengatur overflow: auto .
Menyoroti bidang di Chrome, browser SafariSaat Anda fokus pada bidang di browser Chrome dan Safari, bidang tersebut mulai disorot. Untuk menghapus sorotan ini, Anda perlu menulis kode CSS berikut:
Masukan, area teks ( garis besar: tidak ada; )
Batas putus-putus di FirefoxFF, saat memfokuskan pada beberapa bidang, menyorotnya dengan bingkai bertitik, yang tidak selalu terlihat indah. Untuk menghapusnya, kami akan menulis gaya berikut:
Tombol::-moz-fokus-dalam, masukan::-moz-fokus-dalam, masukan::-moz-fokus-dalam, masukan::-moz-fokus-dalam ( batas: tidak ada; )
Tentu saja, disarankan untuk mengganti tidak adanya bingkai bertitik dengan yang lain yang setara - untuk kenyamanan pengguna.
Menghapus tombol hapus teks dan tampilan kata sandi di IE10IE10 secara default menambahkan tombol hapus teks untuk bidang teks, dan tombol tampilkan kata sandi untuk bidang kata sandi. Kedua fungsi ini sangat berguna, namun terkadang dapat merusak niat sang desainer. Untungnya, menghapusnya sangat mudah; cuplikan kecil ini akan menyelamatkan Anda dari fitur browser ini:
::-ms-clear ( tampilan: tidak ada; )
Elemen bentuk non-standarElemen bentuk gaya dibahas dalam artikel terpisah.
Seperti inilah bentuk umpan balik pada akhirnya
Mari segera lihat semua kolom yang tersedia untuk Anda di formulir ini.
Struktur bidang formulir umpan balik- Nama pengirim
- alamat surat
- telepon
- perusahaan pengirim
- situs web pengirim
- produk (arah)
- daftar layanan yang diperlukan
- informasi tambahan
- perlindungan antispam/robot
- memblokir tombol "kirim" sampai kondisi yang diperlukan terpenuhi
- pemilih sederhana untuk memeriksa dan melindungi dari robot
- tombol tambahan "hapus semua bidang"
- Markup HTML (pembuatan tata letak)
- Menata bidang formulir dengan CSS/SCSS
- jQuery+js
- Penangan PHP
Jadi, mari kita lihat markup formulir:
Silakan perkenalkan diri Anda: * Tunjukkan email Anda: * Tunjukkan nomor telepon Anda: * Tulis dari perusahaan mana Anda berasal: Tunjukkan website Anda: Produk: Pilih layanan: Tidak ada layanan yang dipilih Layanan_ Layanan_ Layanan_ Layanan_ Layanan_ Layanan_ Layanan_ Layanan_ Layanan_ Tambahan. Informasi: Saya seorang Robot Saya seorang manusia. Clear Fields yang ditandai dengan tanda bintang * wajib diisi.
Semua bidang formulir ditata menggunakan CSS flexbox (Modul Tata Letak Kotak Fleksibel) dan dibagi menjadi beberapa grup dengan kelas tambahan. Tentu saja, Anda bisa menciptakan gaya Anda sendiri. Jika Anda mengetahui CSS, maka Anda dapat mengatur desain untuk semua elemen formulir tanpa masalah, Anda bahkan tidak memerlukan bantuan saya.
Bentuk ( input, input, input, textarea, pilih ( display: block; padding: 12px 15px; line-height: 1.5; width: 100%; font-size: 16px; border: 1px solid #ced4da; border-radius: . 25rem; klip latar belakang: kotak bantalan; warna latar: #fff; bayangan kotak: 0 1px 0 0 rgba(255, 255, 255, .05), sisipan 0 1px 2px 0 rgba(0, 0, 0, .05); &:fokus ( garis besar: tidak ada; ) .form-row ( tampilan: flex; flex-wrap: wrap; justify-content: space-between; .form-group:nth-child(1) ( masukan ( lebar: 95%; ) ) .col-6 ( posisi: relatif; fleksibel: 0 0 50%; lebar maksimal: 50%; ) .pt-3 ( padding-top: 1rem; ) .form-group ( margin- bawah: 1rem; label ( tinggi baris: 1,7; spasi huruf: .3px; transformasi teks: huruf besar; ukuran font: 14px; berat font: 900; ) area teks ( tinggi minimum: 110px; ubah ukuran: vertikal; ) ) )
Menyiapkan kode PHPSekarang mari kita beralih ke pengendali formulir, di mana semua tindakan dimulai tergantung pada pemilih yang dipilih - Bot/Manusia.
Ada apa disana?
- header("Segarkan: 5; URL=https://www.site.ru"); — setelah mengisi formulir oleh bot, ia mengirimkannya ke halaman notifikasi dan setelah 5 detik kembali ke yang ditentukan di bidang.
- mail, nama, telepon, ... - mengatur pencocokan bidang html. Di sini Anda perlu memberikan semua nama yang relevan = "" di formulir umpan balik. Jadi, di bidang layanan, Anda perlu menentukan urutan opsi yang persis sama seperti pada markup html.
- $mess adalah isi pesan yang akan sampai di surat itu. Anda dapat menukarnya, mengubah namanya, atau cukup menghapus/mengomentari yang tidak Anda perlukan.
- $headers adalah baris wajib yang menunjukkan pengkodean surat. Jika Anda tidak sengaja menghapus atau mengubah charset=utf-8, semua kata Anda akan berubah menjadi hieroglif.
- header - setelah berhasil mengklik tombol, pengunjung akan diarahkan ke halaman notifikasi dan setelah 5 detik akan diarahkan ke halaman yang ditentukan. Atau yang lain (itu akan menerima pemberitahuan kesalahan.
Sebelumnya, kita melihat Templat formulir html, di mana kita melihat id dan fungsi tambahan untuk tiga bidang wajib. Saatnya mencari tahu mengapa mereka ditambahkan.
Lihatlah kode js. Ini adalah pemblokir tombol yang, jika dinonaktifkan, mencegah pengunjung mengkliknya sebelum kolom yang Anda butuhkan terisi.
fungsi checkParams() ( var nama = $("#nama").val(); var email = $("#email").val(); var telepon = $("#telepon").val(); if (nama.panjang != 0 && email.panjang >= 6 && telepon.panjang >= 10) ( $("#submit").removeAttr("disabled"); ) else ( $("#submit"). attr("dinonaktifkan", "dinonaktifkan");
Kami memasukkan id ke dalam bidang yang wajib diisi dan menonaktifkannya ke dalam tombol untuk mengikatnya ke skrip ini. Anda dapat mengubah nama dan jumlahnya dengan menambahkan/menghapus baris var yang diperlukan. Namun jika menambah atau menghapusnya, jangan lupa untuk mengubah ketentuan pada baris if (name.length != 0 && email.length >= 6 && phone.length >= 10) ( .
Bagaimana cara kerja jalur ini?Itu semua tergantung pada jumlah karakter di bidang yang ditentukan, mis. panjang panjangnya.
- if (nama.panjang != 0 - menunjukkan bahwa bidang tidak boleh kosong. Dibaca sebagai - “jika jumlah karakter dalam bidang tidak nol, maka ...”
- && - menggabungkan kondisi (dan)
- email.length >= 6 — jumlah karakter harus lebih besar atau sama dengan 6. Mengapa enam? Saya menunjukkan nomor ini karena alamat surat minimum adalah 6 karakter. Bisakah kita memeriksanya? @bk.ru - 6 karakter.
- phone.length >= 10 - lebih dari atau sama dengan sepuluh karakter. Mengapa 10 dan bukan 11? Saat mengisi kolom ini, pengunjung dapat menunjukkan nomor teleponnya dengan +7 atau 8. Oleh karena itu, lebih baik menunjukkan 10.
Itu saja. Hubungkan formulir, uji dan gunakan.
Jika ada pertanyaan, tulis di kolom komentar dan jangan pelit dalam memberi rating artikel. Terima kasih sebelumnya :)
Jadi, kami sedang menyelesaikan rangkaian pelajaran membuat website dari awal dengan desain datar. Izinkan saya mengingatkan Anda bahwa kami merancang tajuk situs. Aktif - bagian dengan gambar di seluruh layar. Berikut adalah galeri dengan karya portofolio. Aktif - tata letak tiga kolom. Dan sebagai tahap terakhir, hari ini kami sedang melakukan tata letak form feedback dan footer.
Inilah yang harus kita dapatkan.
Saya tidak akan menampilkan semua kode di sini, ini terlalu panjang. Anda dapat melihat keseluruhan kode dan hasil akhirnya di jsfiddle.
Tugas saya adalah menunjukkan kepada Anda prinsip-prinsip tata letak, logika, bagaimana seorang desainer tata letak berpikir ketika melihat sebuah tata letak. Pertama, dia secara mental memecah seluruh tata letak menjadi beberapa bagian besar. Kemudian setiap bagian di dalamnya dibagi menjadi blok-blok kecil. Lihat tangkapan layar di bawah.
Formulir umpan balik itu sendiri ditempatkan dalam tag div dengan kelas part_2_of_3 dan menempati dua pertiga lebar induknya.
Kemudian muncul blok kedua di tag div dengan kelas part_1_of_3 . Lebar yang ditempatinya adalah sepertiga dari blok induk.
Dalam gaya CSS:
Menipu(
tampilan: blok;
mengapung:kiri;
margin: 3% 0 3% 1,5%;
}
.con:anak pertama(
margin-kiri:0; /* menekan blok dengan form ke tepi kiri */
}
.bagian_2_of_3 (
lebar: 66%; /* lebar blok dengan form */
}
.bagian_1_of_3 (
lebar: 32%; /* lebar blok informasi */
}
.cont-form(
bantalan-bawah: 25px; /* indentasi bawah dari bentuk blok */
}
.cont-bentuk div(
bantalan: 5px 0 15px;
}
.cont-form input,.cont-form input,.cont-form textarea(
lebar: 42%; /* lebar kolom untuk memasukkan teks dan email */
bantalan: 15 piksel;
tampilan: blok;
garis besar: tidak ada;
warna latar belakang: #fff; /* warna sel formulir */
warna: #888282; /* warna input teks formulir */
ukuran font: 0,8em; /* ukuran font pada input teks formulir */
mengapung:kiri;
margin-kanan: 2em; /* lekukan kanan */
gaya font: miring; /* memasukkan teks yang dicetak miring */
batas: 2px solid #cacaca; /* batas sel formulir */
}
.kont-bentuk masukan(
margin-kanan: 0em; /* lekukan kanan */
}
.cont-form textarea( /* nilai untuk area teks formulir */
bantalan: 18 piksel; /* semua field di area teks */
tampilan: blok;
lebar: 93%; /* lebar bentuk area teks */
tinggi:180 piksel; /* tinggi bentuk area teks */
warna latar belakang: #fff; /* wdtn latar belakang area teks */
garis besar: tidak ada;
warna: #888282; /* warna teks yang dimasukkan ke dalam area teks */
ukuran font: 0,8em; /* ukuran font area teks */
gaya font: miring; /* huruf miring untuk area teks formulir */
batas:2px padat #cacaca;
margin-bawah: 2em;
}
.kont-bentuk masukan (
keluarga font: Verdana, sans-serif;
ukuran font: 1em;
warna:#fff;
bantalan: 0,7em 1,4em;
margin-kanan: 2%;
warna latar belakang: #a97b7b;
perbatasan: tidak ada;
tampilan: blok;
kursor: penunjuk;
garis besar: tidak ada;
transformasi teks: huruf besar; /* ubah menjadi huruf kapital */
mengapung: benar;
}
.comp_addp(
ukuran font:0,8em;
warna:#525252;
tinggi garis: 1,8em;
margin-bawah: 2%;
}
.comp_tambahkan a(
ukuran font:1.1em;
warna:#525252;
tinggi garis: 1,8em;
margin-bawah: 2%;
}
.list2 li img(
margin-atas: 4px;
mengapung:kiri;
}
.daftar2 li .ikon(
mengapung:kiri;
padding-kiri: 1em;
}
Dengan tata letak ruang bawah tanah, situasinya jauh lebih sederhana. Di dalam tag footer, terdapat blok div dengan hak cipta dan link.
Dalam postingan singkat ini, saya akan menunjukkan langkah demi langkah cara membuat formulir kontak yang indah menggunakan CSS murni tanpa menggunakan gambar. Formulir akan memiliki kolom dengan informasi berikut: nama, email, URL, subjek, dan isi pesan. Untuk kompatibilitas lintas-browser, kami akan menggunakan awalan vendor, namun untuk mempersingkat kode, di sini kami akan mempertimbangkan tata letak tanpa awalan tersebut. .
Membuat formulir dalam HTML Seperti inilah tampilan formulir umpan balik kamiPertama, sedikit penjelasan mengenai bentuknya.
- Jenis input = email digunakan untuk menunjukkan kolom di mana pengguna dapat memasukkan alamat email. Browser yang mendukung jenis kolom ini akan dapat menentukan apakah pengguna memasukkan alamat email yang valid atau tidak.
- Tipe input = url digunakan untuk memeriksa apakah URL yang dimasukkan valid atau valid.
- Require = diperlukan menentukan status elemen formulir sesuai kebutuhan. Browser yang mendukung atribut ini memblokir formulir agar tidak dikirimkan hingga semua bidang wajib diisi.
- Placeholder Atribut ini memberikan petunjuk agar pengguna mengetahui apa dan dalam format apa data harus dimasukkan. Placeholder menghilang saat Anda mengklik bidang tersebut.
Nama *
Alamat email *
Situs web
Subjek
Pesan *
Semua bidang dengan * wajib diisi
Membuat Latar Belakang BergarisUntuk membuat efek amplop, mulailah dengan mengisi latar belakang dengan gradien bergaris.
#content( position:relative; margin:50px auto; width:400px; min-height:200px; z-index:100; padding:30px; border:1px solid #383838; latar belakang: #D1D1D1; /* Latar belakang saya yang dilucuti * / latar belakang: gradien linier berulang(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px); 6 piksel #3F3F3F )
Properti gradien linier berulang memungkinkan Anda membuat gradien linier yang berulang tanpa batas. Pertama, kami memiringkan garis pada sudut 45 derajat, lalu mewarnai garis secara berurutan dan memberinya lebar dalam piksel. Sekarang kita memiliki latar belakang gradien. Yang tersisa hanyalah menambahkan latar belakang abu-abu terang. Mari kita gunakan kelas semu setelahnya:
/** latar belakang "palsu" saya yang akan mengarahkan garis-garis **/ #content:after( background:#F9F9F9; margin:10px; position: absolute; content: " "; bawah: 0; kiri: 0; kanan: 0 ; atas: 0; batas:1 piksel #E5E5E5 padat;
Membuat Header H1Untuk header H1, saya memilih font Questrial, untuk badan formulir kontak - Droid Sans, dan untuk ampersand - Alice. Semua font ini ada di direktori font Google, jadi yang perlu saya lakukan hanyalah menggunakan kode API Google:
Sekarang mari kita buat judulnya.
H1 ( font-family: "Questrial", Verdana, sans-serif; text-align:center; font-size:40px; padding:0; margin:0 0 20px 0; position:relative; color:#8C8C8C; ) / ** mempunyai ampersand yang bagus **/ h1:after ( font-size:25px; color:#D6CFCB; content: "&"; text-align:center; display:block; width:100%; font-family: " Alice", Verdana, serif; text-shadow: 0px 1px 0px #fff; ) /** membuat gradien bawah **/ h1:before ( position:absolute; bottom:15px; content: " "; text-align:center ; tampilan:blok; tinggi:2px lebar:100%; latar belakang: gradien linier(kiri, rgba(255.255.255,0) 0%,rgba(182.180.180,0.7) 42%,rgba(180.178.178,0) 43% (168.166.166 ,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%);
Mari tambahkan ikon tanpa menggunakan gambarKami akan melakukan ini menggunakan ikon font. Anda dapat menggunakan font ikon yang ada di lampiran, atau Anda dapat menggunakan yang lain, saya suka membuat paket ikon dari flaticon.com. Manfaat menggunakan font dalam konteks kita sudah jelas. Kita dapat memanipulasi ukuran, warna, dan bahkan animasi ikon. Hal yang sama tidak dapat dikatakan tentang gambar biasa. Selain itu, kami selalu mendapat manfaat dari kualitas tampilan pada tampilan retina.
/** menambahkan font ikon kami!! */ @font-face ( font-family: "IconicStroke"; src: url("font/iconic_stroke-webfont.eot"); src: url("font/iconic_stroke-webfont.eot?#iefix") format(" tertanam-opentype"), url("font/iconic_stroke-webfont.woff") format("woff"), url("font/iconic_stroke-webfont.ttf") format("truetype"), url("font/iconic_stroke -webfont.svg#IconicStrokeRegular") format("svg"); font-weight: normal; font-style: normal; ) .iconic:before( font-size:25px; font-family: "IconicStroke"; ) .iconic .link:before ( konten: "/"; ) .iconic.quote-alt:before ( konten: """; ) .iconic.comment:before ( konten: "q"; ) .iconic.user:before ( konten : "u"; ) .iconic.mail-alt:sebelum ( konten: "M"; )
Sekarang kita dapat mendesain kolom entri data kita dalam keadaan tidak aktif dan aktif.
/** kita menghilangkan cahaya merah di sekitar kolom yang wajib diisi karena kita sudah menggunakan bintang merah */ input:required, textarea:required ( -moz-box-shadow:none; -webkit-box-shadow:none; -o- box-shadow:none; box-shadow:none; ) /** input dan area teks**/ input:not(), textarea( outline:none; display:block; lebar:380px; padding:4px 8px; border:1px putus-putus #DBDBDB; font-family:"Droid Sans",Tahoma,Arial,Verdana sans-serif; ukuran font:14px; transisi:latar belakang 0,2 detik linier, bayangan kotak 0,6 detik linier; , textarea:aktif, input:not():fokus, textarea:fokus( latar belakang:#F7F7F7; perbatasan: putus-putus 1px #969696; box-shadow:2px 2px 7px #E8E8E8 inset ; ) input:not() ( tinggi: 20px ; ) textarea( min-height:150px; ubah ukuran:vertikal ) /* placeholder */ ::-webkit-input-placeholder ( warna:#BABABA; font-style:italic; ) input:-moz-placeholder, textarea:- moz-placeholder( warna:#BABABA; gaya font:miring; )
Desain tombol dan tanda tangan “Kirim”.Untuk tombol Kirim, kami menggunakan tipe bidang type=submit . Sayangnya, untuk mendesain bidang jenis ini, kita tidak dapat menggunakan kelas semu:sebelum dan:sesudah. Jadi saya menerapkan karakter khusus langsung ke dalam kode HTML. Tentu saja ini bukan solusi terbaik, jadi Anda bisa menghapusnya begitu saja.
/** Menata gaya tombol kirim **/ input( margin-kiri:235px; kursor:pointer; latar belakang:none; border:none; font-family: "Alice",serif; color:#767676; font-size:18px ; padding:10px 4px; batas:1px padat #E0E0E0; latar belakang: rgb(247,247,247); rgba(247,247,247,1) ,1) 100%); 0 0 0px 5px #EAEAEA; transisi:semua 0,2 detik linier; warna: #CECECE; latar belakang: gradien linier(atas, rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%); 0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0; ) masukan:aktif, masukan:fokus( posisi:relatif; atas:1px; warna:#515151; latar belakang: gradien linier(atas, rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%); kotak -bayangan:0px -1px 1px #FFF sisipan, 0 0 0px 5px #E0E0E0 )
Untuk membuat formulir terlihat lengkap, mari tambahkan beberapa warna dan transisi yang bagus pada keterangan saat mengarahkan kursor ke atasnya.
Label( warna:#7F7E7E; -webkit-transisi: warna 1s kemudahan; -moz-transisi: warna 1s kemudahan; transisi: warna 1s kemudahan; ) label:hover( warna:#191919; ) label:sebelum( warna:#C1BFBD ; transisi: warna 1s kemudahan; ) label:hover:before( warna:#969696; transisi: warna 1s kemudahan; ) p( margin-bottom:20px; ) .indikasi( warna:#878787; ukuran font:12px; font -gaya:miring; perataan teks:kanan; padding-kanan:10px; .wajib( warna:#E5224C; )
Alih-alih sebuah kesimpulanSaya harap postingan singkat ini membantu Anda lebih memahami kemampuan HTML5 dan CSS3. Izinkan saya menekankan sekali lagi bahwa ini hanyalah blanko yang dapat Anda gunakan sebagai dasar pengembangan Anda. Pada lampiran postingan, bentuk feedback bersifat adaptif.
