Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Merancang Form Web yang Lebih Cantik dengan CSS 3

by
Read Time:8 minsLanguages:
This post is part of a series called CSS3 Mastery.
Quick Tip: The Multi-Column CSS3 Module
Subtle CSS3 Typography that you’d Swear was Made in Photoshop

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Berkat properti CSS yang canggih, seperti gradien dan bayangan, sekarang cukup mudah untuk mengubah bentuk web yang membosankan menjadi sesuatu yang indah – dengan sedikit usaha. Saya akan menunjukkan pada Anda di tutorial hari ini!

Tutorial ini mencakup screencast yang tersedia untuk anggota Tuts+ Premium.

Gradien latar belakang yang halus memberi kedalaman pada bidang sementara bayangan mengangkatnya dari halaman. Yang lebih mengesankan lagi adalah bahwa hal ini dilakukan tanpa gambar sama sekali.

Dengan mengikuti tutorial ini Anda tidak hanya akan berakhir dengan bentuk yang ringan dan indah, Anda juga akan belajar dan memahami teknik CSS3 yang baru, seperti bayangan kotak, gradien, warna buram, dan sudut yang membulat.


CSS3?

CSS3 adalah generasi CSS berikutnya yang saat ini dalam pengembangan, tapi itu tidak menghentikan browser dalam menerapkan banyak fitur menonjol.

Opera memiliki tingkat dukungan CSS3 yang lebih tinggi (kecuali gradien latar belakang) di versi berikutnya (10.50 Beta).

Internet Explorer juga menyatakan bahwa mereka akan memperbaiki dukungan CSS3 dengan versi 9; namun, hanya waktu yang akan mengatakan betapa benarnya hal ini.

Hal-hal yang dapat Anda lakukan dengan CSS3 (bayangan, gradien, sudut bulat, animasi, dll) semuanya berfungsi untuk menciptakan efek yang indah tanpa harus mengintegrasikan gambar atau skrip, sehingga menghasilkan waktu loading lebih cepat.


Langkah 1: HTML

Sebelum kita mulai styling kita butuh sesuatu untuk ditata, jadi inilah form-nya.

Setiap field ada di dalam paragraf dengan kelasnya sendiri, dan tiga field pertama memiliki label yang menjelaskan penggunaannya.

Bagaimana tampilannya tanpa gaya apapun?

Fungsional, tapi membosankan. Mari mulai menghias form ini.


Screencast Penuh



Langkah 2: Penataan Dasar

Sebelum kita menyelami teknik CSS3 kita perlu membuat tata letak dasar untuk browser yang belum mendukung CSS3.

Bagaimana usaha kita terlihat sejauh ini?


Lumayan. Sekarang, mari kita mulai peningkatan kita dengan CSS3 yang lebih canggih.


Langkah 3: Box-shadow

Box-shadow melakukan persis seperti apa kedengarannya: menciptakan bayangan di sekitar kotak.

Sintaks untuk box-shadow cukup sederhana:

Horisontal offset adalah penempatan bayangan dari kiri ke kanan. Jika Anda menetapkannya ke "2px" bayangan akan menjadi 2 piksel ke kanan. Vertikal offset adalah sama tapi naik/turun.

Blur hanyalah jumlah blur bayangan yang akan ada, di mana 0 adalah minimum.

Beginilah bayangan kotak kita akan terlihat:

Di sini kita memiliki tiga garis yang terlihat serupa.

  • box-shadow adalah CSS3 murni dan sejauh ini hanya digunakan di Opera.
  • -webkit-box-shadow ditujukan untuk browser yang menggunakan mesin Webkit, seperti Chrome dan Safari.
  • -moz-box-shadow ditujukan untuk browser yang menggunakan mesin Gecko dari Mozilla, seperti Firefox, Camino, Flock, dan SeaMonkey.

Sampai CSS3 menjadi standar, Anda harus menggunakan ketiga metode tersebut. Internet Explorer memiliki cara mereka sendiri yang aneh dalam melakukan sesuatu, dan meski bisa menghasilkan bayangan tidak akan terlihat seperti yang kita inginkan. 3

Anda mungkin memperhatikan bahwa tidak ada warna RGB normal yang digunakan, ini karena kita menggunakan dua teknik CSS3 pada baris yang sama: box-shadow dan rgba.

RGBA (Red Green Blue Alpha) adalah, sederhananya, warnai dengan kegelapan.

Sintaks untuk rgba adalah ini:

Tidak apa-apa menggunakan abu-abu muda untuk warna bayangan, tapi jika Anda menggunakan latar belakang selain putih maka akan terlihat aneh. Hitam buram di sisi lain akan bekerja dengan baik tidak peduli latar belakangnya.

Jadi bayangan kotak kita berwarna hitam dengan kegelapan 10% (0,1), tanpa offset horizontal dan vertikal, dan dengan blur 8 piksel. Ini akan terlihat seperti ini:


Kata kunci di sini adalah kehalusan. Jika kita menerapkan terlalu banyak bayangan, akan terlihat jelek; jika kita menerapkan terlalu sedikit, tidak akan berpengaruh. Pada dasarnya, kita tidak ingin ada yang melihat bayangannya, tapi tetap mengangkat field dari halaman.


Langkah 4: Latar Belakang Gradien

Sementara sintaks box-shadow mudah dipahami, gradien lebih rumit. Dengan gradien CSS3, Anda dapat membuat beberapa bentuk menakjubkan — dari papan dart hingga pelangi — juga Anda bisa membayangkannya memiliki sintaks yang lebih kompleks. Syukurlah, kita tidak perlu mengkode pelangi hari ini; kita hanya butuh gradien linier lurus.

Sintaks untuk Webkit:

Sintaks untuk Gecko:


Seperti yang bisa Anda lihat, metodenya sangat berbeda, jadi ini memerlukan beberapa penjelasan.

Gradien Webkit memerlukan titik awal (X dan Y), titik akhir (X dan Y), warna awal, dan warna akhir. Sudutnya ditentukan oleh di mana awal dan akhir, dan gradien akan diwarnai dengan "from(color)" memudar ke "to(color)".

Gradien Gecko, di sisi lain, hanya membutuhkan titik awal (Y), dan setidaknya dua warna. Jika Anda menginginkan gradien dari atas ke bawah (90deg) Anda tidak perlu menetapkan sudutnya.

Jadi untuk mendapatkan gradien linier sederhana dari atas ke bawah — hitam ke putih — kita akan melakukan seperti ini:

Dan akan terlihat seperti ini:


(Saya akan terus menggunakan warna hitam untuk demonstrasi; pada akhirnya, saya akan beralih ke warna sebenarnya yang akan kita gunakan untuk form ini.)

Sekarang setelah kita menyingkirkan dasar-dasarnya, kita bisa mulai membuat form seperti apa yang kita inginkan. Hal pertama yang ingin kita lakukan adalah membatasi tinggi gradien sehingga terlihat sama untuk field input dan textarea; jika tidak gradien akan memenuhi seluruh tinggi, seperti ini:


Ini adalah bagaimana kita membatasi gradien latar belakang ke 25px di Webkit dan Firefox:

Untuk Webkit, alih-alih mengatur titik akhir ke "left bottom," kita menetapkannya ke "left 25", yang mengindikasikan bahwa akan berakhir 25 piksel dari atas.

Untuk Gecko, kita melakukan hal yang sama dengan menambahkan nilai "25px" ke warna akhir.

Dan hasilnya adalah:


Hal kedua yang ingin kita lakukan adalah membuat garis putih tipis di bagian atas gradien, untuk memberi kesan visual yang halus bahwa field-nya terangkat. Seberapa pentingkah satu piksel? Lihatlah artikel ini: Menambahkan Kedalaman dengan Karya Garis Pixel Sempurna.

Untuk membuat ini, kita membutuhkan tiga poin dalam gradien. Pada contoh sebelumnya, gradien kita memiliki dua poin: atas dan bawah (hitam→putih). Di sini, kita akan menambahkan titik tambahan di antara mereka (putih→hitam→putih).

Untuk menggambarkan:


Bagaimana kita melakukan ini?

Di WebKit kita menggunakan fungsi color-stop, tapi sayangnya tidak mendukung nilai dalam pixel, hanya persentase. Namun, dengan memperhatikan pelajaran matematika di sekolah, kita memperkirakan bahwa 4% dari 25px adalah 1px.

Untuk Gecko, kita hanya menambahkan warna ketiga di antara dua yang pertama dan memberikan nilai "1px", yang menunjukkan bahwa ia harus mengakhiri 1 piksel dari atas.

Garis putih tipis:


Sekarang, mari kita mengubah warna hitam (#000000) ke abu abu yang lebih pas (#EEEEEE):


Hanya beberapa detail pekerjaan kecil yang tersisa.

Pertama, kita akan membuat bayangan gelap untuk field saat pengguna hover atau memilihnya:

Ini hanya meningkat dari 10% menjadi 15%, tapi apa yang kita cari adalah, sekali lagi, kehalusan.


Hal terakhir yang kita lakukan adalah membuat beberapa sudut yang membulat untuk button3 agar lebih menonjol dari elemen lainnya:

Nilai adalah radius sudutnya akan dibulatkan. border-radius standar sengaja ditinggalkan karena Opera tampaknya memiliki masalah dengan hal itu.

Hasil:



Langkah 5: Browser Lainnya

Sekarang kita hanya perlu mengurus browser yang belum mendukung CSS3 (IE), atau yang hanya sebagian saja (Opera).

Kita ingin versi yang berbeda (CSS3 dan yang normal) terlihat semirip mungkin, dan yang paling sederhana adalah kembali ke cara lama: gambar.

Cukup mengambil screenshot dari form CSS3 yang indah dan menyimpan sebagian kecil gradien sebagai gambar.


Selanjutnya, gunakan di input dan textarea sebagai latar belakang. Selama gradien CSS3 muncul setelah gambar latar belakang, browser yang mendukung CSS3 akan mengabaikan gambar itu.

Dan sekarang kita selesai! Nikmati form Anda dan semoga Anda telah belajar sesuatu.


Pratinjau Akhir

Chrome (4.0), Firefox (3,6), Safari (4.0):


Opera (10.50b):


Internet Explorer (8):



CSS Penuh


Kesimpulan

Itu saja yang ada untuk itu! Dengan sedikit usaha, dan kekuatan CSS 3, kita telah mengubah form hambar dan biasa menjadi sesuatu yang indah. Terima kasih banyak untuk membaca, dan silakan mengajukan pertanyaan yang mungkin Anda miliki di bawah ini.

Advertisement
Did you find this post useful?
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.