Bekerja dengan Power Tool CSS3

() translation by (you can also view the original English article)

CSS3 adalah salah satu teknologi web yang paling keren yang tersedia bagi pengembang web saat ini. Dengan menggunakan beberapa dari sekian banyak fiturnya, adalah mungkin untuk mereproduksi efek yang mungkin telah Anda lakukan sebelumnya di Photoshop, dengan kode CSS yang lebih mudah dipelihara, lebih cepat dimuat, dan mengikuti dengan tren terbaru. Baca terus untuk mempelajari tentang power tool yang tersedia bagi Anda dan bagaimana menggabungkannya untuk menghasilkan efek grafis tertinggi.

CSS3 memiliki banyak fitur, namun beberapa di antaranya sangat penting untuk dipelajari jika Anda ingin mereproduksi efek seperti Photoshop. Saya menyebut ini "power tool". Mereka meliputi berikut ini:

Border Radii
Box Shadow
Text Shadow
Gradient
Banyak Latar Belakang

Masing-masing fitur ini dapat membantu mengganti beberapa gambar yang mungkin telah Anda buat di Photostop di masa lalu. Dengan melakukan ini, Anda membuat situs web Anda lebih mudah dipelihara karena Anda dapat mengubah properti hanya dengan mengubah file CSS Anda daripada mengedit gambar di Photoshop. Anda juga membuat website Anda memuat lebih cepat karena gambar menggunakan banyak bandwidth. Mari menjelajahi fitur ini satu per satu.

Power Tool #1: Border Radius

Dukungan Browser:

Safari: 3.2+
Firefox: 3.0+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+

Sekarang, Anda mungkin pernah mendengar tentang border-radius jutaan kali. Ini sangat mudah digunakan dan didukung di semua browser modern. Jika Anda belum tahu, border radius adalah cara untuk membuat sudut membulat dengan CSS—tidak ada gambar yang diperlukan! Mari kita lihat sintaksnya.

1	-webkit-border-radius: size;
2	-moz-border-radius: size;
3	border-radius: size;

Ada tiga sintaks yang harus Anda gunakan. Yang pertama adalah untuk browser berbasis Webkit, seperti Safari dan Chrome; yang kedua adalah untuk browser berbasis Mozilla, seperti Firefox; dan yang terakhir adalah versi tanpa-prefiks, untuk browser yang mendukungnya, termasuk IE9, Opera, dan Safari 5.

Menerapkan border radius 10 piksel ke div menciptakan efek berikut:

Oke, mudah! Mari beralih ke power tool berikutnya.

Power Tool #2: Box Shadow

Dukungan Browser:

Safari: 3.2+
Firefox: 3.5+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+

Box shadow adalah fitur lain yang didukung dengan baik. Sintaks mereka terlihat seperti ini:

1	-webkit-box-shadow: offset_x offset_y blur_radius color;
2	-moz-box-shadow: offset_x offset_y blur_radius color;
3	box-shadow: offset_x offset_y blur_radius color;

Sekali lagi kita harus menggunakan prefiks vendor untuk Webkit dan Mozilla. Parameter pertama dan kedua dari properti box-shadow adalah posisi offset dari koordinat kiri dan atas dari elemen. Menetapkan nilai positif pada properti ini akan menggerakkan bayangan ke kanan dan ke bawah dari elemen, dan menetapkan nilai negatif menggerakkan bayangan ke kiri dan ke atas dari elemen. blur_radius adalah jumlah blur yang ingin Anda tambahkan ke bayangan Anda (seberapa keras atau kabur yang Anda menginginkannya). Akhirnya, parameter terakhir adalah warna bayangan yang Anda inginkan. Menambahkan bayangan ke div yang dibulatkan sebelumnya akan menciptakan efek yang bagus.

1	-webkit-box-shadow: 5px 5px 10px #555;
2	-moz-box-shadow: 5px 5px 10px #555;
3	box-shadow: 5px 5px 10px #555;

Fitur yang rapi lainnya dari box shadow CSS adalah kata kunci inset. Bila kata kunci inset ada, bayangan di-render di dalam kotak daripada di luar. Ini dapat menciptakan tampilan tertekan yang bagus terutama untuk tombol. Inilah tampilan div kita dengan bayangan inset.

1	-webkit-box-shadow: 0 0 20px #333 inset;
2	-moz-box-shadow: 0 0 20px #333 inset;
3	box-shadow: 0 0 20px #333 inset;

Fitur terakhir dari box shadow yang layak disebut adalah kemampuan untuk memiliki banyak bayangan pada elemen yang sama. Ini sangat berguna dan bisa menghilangkan markup ekstra di HTML Anda hanya untuk menerapkan bayangan tambahan. Yang harus Anda lakukan untuk menciptakan banyak bayangan adalah memisahkan mereka dengan koma. Berikut adalah contohnya:

1	-webkit-box-shadow: 0 0 20px #333 inset,
2	20px 15px 30px yellow,
3	-20px 15px 30px lime,
4	-20px -15px 30px blue,
5	20px -15px 30px red;
6
7	-moz-box-shadow: 0 0 20px #333 inset,
8	20px 15px 30px yellow,
9	-20px 15px 30px lime,
10	-20px -15px 30px blue,
11	20px -15px 30px red;
12
13	box-shadow: 0 0 20px #333 inset,
14	20px 15px 30px yellow,
15	-20px 15px 30px lime,
16	-20px -15px 30px blue,
17	20px -15px 30px red;

Power Tool #3: Text Shadow

Dukungan Browser:

Safari: 3.2+
Firefox: 3.5+
Chrome: 3.0+
Opera: 10.1+
Internet Explorer: Mudah-mudahan segera hadir!

Text shadow seperti box shadow kecuali bayangan itu untuk teks dan bukan keseluruhan elemen. Untungnya, tidak ada prefiks vendor yang diperlukan untuk text shadow.

1	text-shadow: offset_x offset_y blur_radius color;

Opsi untuk text shadow sama seperti untuk box-shadow kecuali bahwa tidak ada dukungan bayangan teks inset. Berikut adalah demo yang membuat teks yang tidak terlihat muncul dari halaman.

1	color: #fff /* text color to white */
2	text-shadow: 0 0 50px #333;

Ini menciptakan efek berikut:

Seperti box shadow, adalah mungkin untuk memiliki beberapa text shadow hanya dengan memisahkannya dengan koma. Berikut adalah contoh yang menciptakan efek teks yang terbakar.

1	text-shadow: 0 0 4px #ccc,
2	0 -5px 4px #ff3,
3	2px -10px 6px #fd3,
4	-2px -15px 11px #f80,
5	2px -18px 18px #f20;

Text shadow bisa membuat beberapa efek mengagumkan, dan bisa melengkapi efek lainnya dengan sangat baik.

Power Tool #4: Gradient

Dukungan Browser:

Safari: 4+
Firefox: 3.6+
Chrome: 5+
Opera: Semoga segera hadir!
Internet Explorer: Mudah-mudahan segera hadir!

Gradien adalah salah satu fitur paling kuat yang tersedia bagi Anda jika Anda ingin menciptakan efek mengagumkan ini. Sementara dukungan browser penuh masih belum cukup, Anda selalu bisa memberikan penataan mundur ke browser yang tanpa dukungan. Ingat: Situs web tidak perlu terlihat sama di setiap browser. Ada dua jenis gradien yang dapat Anda ciptakan: gradien linier dan gradien radial. Seperti yang Anda duga, gradien linier bergerak sepanjang garis lurus dan gradien radial berputar mengelilingi lingkaran. Gradien dapat digunakan di manapun yang Anda mungkin telah menggunakan gambar di masa lalu, seperti untuk latar belakang, border-image, atau list bullet.

Sayangnya untuk pengembang web, ada dua sintaks yang berbeda: satu untuk Mozilla dan satu lagi untuk Webkit.

Sintaks untuk Webkit

Safari dan Chrome menggunakan mesin render WebKit, jadi mereka selalu menggunakan sintaks yang sama. Sintaks gradien mereka cukup sederhana:

1	-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

Webkit menggunakan sintaks yang sama untuk gradien linier dan radial. Ganti parameter type untuk beralih di antara keduanya.

Sintaks untuk Mozilla

Firefox menggunakan sintaks yang terpisah untuk gradien linier dan radial, keduanya sangat berbeda dari rekan Webkit mereka.

1	-moz-linear-gradient( [<point> \|\| <angle>,]? <stop>, <stop> [, <stop>]*)
2	-moz-radial-gradient( [<position> \|\| <angle>,]? [<shape> \|\| <size>,]? <stop>, <stop>[, <stop>]*)

Mari kita lihat sintaks ini secara terpisah.

Gradien Linier

Untuk kesederhanaan, berikut adalah sintaks Webkit hanya untuk gradien linier.

1	-webkit-gradient(linear, start_x start_y, end_x end_y, stop, stop...)

Sintaks Firefox terlihat seperti ini.

1	-moz-linear-gradient(angle start_x start_y, stop, stop...)

Dalam parameter start_x dan start_z Webkit, menentukan posisi awal gradien, dan end_x dan end_y menentukan posisi akhir gradien. Anda dapat menggunakan salah satu nilai dimensi CSS standar, termasuk persentase, serta kata kunci left, top, bottom, right, dan center sebagai nilai untuk parameter posisi ini. Stop adalah cara bagi Anda untuk menentukan warna tertentu untuk digunakan pada titik-titik tertentu di sepanjang gradien. Anda bisa memiliki banyak perhentian warna seperti yang Anda inginkan, tapi Anda harus memiliki setidaknya dua: warna awal dan akhir. Untuk perhentian warna tambahan, Anda dapat menggunakan fungsi color-stop() yang memberikan posisi sebagai persentase atau angka desimal antara 0 dan 1 serta warna. Misalnya: color-stop(50%, black) akan membuat warna hitam berhenti tepat setengah jalan sepanjang gradien. Daripada menulis 0% dan 100% untuk warna awal dan akhir, hadirlah fungsi kenyamanan from() dan to(). Yang harus Anda berikan untuk ini adalah warnanya.

Sintaks Firefox jauh lebih sedikit sederhana, dan memiliki banyak cara untuk mencapai tujuan yang sama. Satu-satunya hal yang statis tentang sintaks adalah perhentian warna, yang hanya warna yang diikuti oleh posisi sebagai persentase. Untuk posisi awal dan akhir, Anda dapat memberinya 0% dan 100%, dan jika Anda membiarkan posisi dari salah satu perhentian warna lainnya, mereka akan didistribusikan secara merata ke seluruh gradien. Berbeda dengan sintaks Webkit, sintaks Firefox tidak memiliki posisi akhir, hanya posisi awal dan sudut. Gradient akan berjalan dari posisi awal pada sudut yang ditentukan. Jika Anda meninggalkan sudutnya, ia akan berjalan tegak lurus dari titik itu. Jika Anda meninggalkan titik awal bersama-sama, gradient akan berjalan dari atas ke bawah. Sintaks ini agak membingungkan dan sedikit kurang fleksibel daripada sintaks sederhana di Webkit, jadi yang terbaik adalah belajar dengan contoh.

Berikut adalah contoh sederhana gradien CSS beraksi. Gradien ini berjalan dari sudut kiri atas ke sudut kiri bawah (dengan kata lain, dari atas ke bawah) dan dari merah ke putih.

1	-webkit-gradient(linear, left top, left bottom, from(red), to(white));
2	-moz-linear-gradient(red, white)

Menetapkan ini sebagai properti latar belakang milik div, kita mendapatkan hasil sebagai berikut:

Dengan menambahkan perhentian warna dan mengubah sudut gradien, kita bisa mendapatkan efek yang berbeda.

1	-webkit-gradient(linear, left top, right bottom, from(red), color-stop(50%, white), to(red));
2	-moz-linear-gradient(left top, red, white, red);

Gradien Radial

Berikut adalah sintaks untuk gradien radial di Webkit.

1	-webkit-gradient(radial, inner_circle_center_x inner_circle_center_y, inner_circle_radius,
2	outer_circle_center_x outer_circle_center_y, outer_circle_radius,
3	stop, stop...)

Sintaks Firefox terlihat seperti ini.

1	-moz-radial-gradient(center_x center_y, shape size, stop, stop...)

Sintaks Webkit sedikit lebih rumit daripada sintaks gradien linier, namun prinsip yang sama tetap berlaku. Gradien radial di Webkit memiliki dua lingkaran: lingkaran awal dan lingkaran akhir. Anda menentukan posisi tengah X dan Y untuk masing-masing lingkaran ini bersama dengan jari-jari mereka. Akhirnya Anda menentukan perhentian warna dengan cara yang sama seperti yang Anda lakukan untuk gradien linier.

Sintaks Firefox untuk gradien radial mirip dengan sintaks untuk gradien linier di semua bagiannya kecuali perhentian warna yang dapat ditinggalkan. Anda dapat menentukan posisi X dan Y dari gradien seperti koordinat lingkaran dalam sintaks Webkit, namun tidak ada lingkaran luar di Firefox. Sebagai gantinya Anda bisa menentukan bentuk dan ukuran gradien. Bentuknya bisa berupa lingkaran atau elips, yang belakangan ini tidak memungkinkan untuk dibuat di Webkit. Ukurannya menerima banyak kata kunci yang berbeda, namun bukan ukuran piksel seperti yang Anda duga. Anda dapat membaca tentang apa masing-masing konstanta ini lakukan di Pusat Pengembang Mozilla. Untuk tutorial ini, kita hanya akan menggunakan defaultnya. Sekali lagi, jika Anda meninggalkan posisi tengah X dan Y, mereka akan dianggap sebagai pusat objek yang Anda isi dengan gradien. Jika Anda meninggalkan bentuk dan ukuran, gradien akan diasumsikan lingkaran yang memenuhi seluruh kotak.

1	-webkit-gradient(radial, center center, 0, center center, 50, from(white), to(red));
2	-moz-radial-gradient(white, red)

Jika kita menerapkan gradien ini ke latar belakang div, inilah yang akan kita dapatkan.

Power Tool #5: Banyak Latar Belakang

Dukungan Browser:

Safari: 3.2+
Firefox: 3.6+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+

Banyak latar belakang memudahkan pembuatan efek kompleks di CSS tanpa perlu membuat markup tambahan di HTML Anda. Memiliki dukungan untuk ini berarti elemen dapat memiliki beberapa gradien dan latar belakang gambar beserta warna latar belakang standar. Tidak ada perbedaan dalam sintaks banyak latar belakang dari satu latar belakang - hanya koma yang memisahkan mereka dan pergilah!

Berikut adalah contoh div dengan latar belakang gradien dan efek tekstur yang bagus dengan menggunakan gambar:

1	background: url(noise.png), -webkit-gradient(linear, left top, left bottom, from(#999), to(#333));
2	background: url(noise.png), -moz-linear-gradient(#999, #333);

Kita harus mendeklarasikannya dua kali sejak, seperti yang telah kita pelajari, ada sintaks gradient yang berbeda untuk setiap browser. Ini menciptakan efek berikut:

Menggabungkan Kekuatan: Membangun Tombol CSS3 yang Mengagumkan

Sekarang setelah lima power tool hebat yang kita miliki, mari mengkombinasikan mereka untuk menghasilkan efek yang lebih hebat lagi.

Ada begitu banyak jenis tombol yang dapat Anda pilih untuk didesain. Sederhananya, mari kita meniru sesuatu yang sudah ada - gaya tombol Mac OS X.

Kita akan memulai dengan kode HTML kita untuk demo ini. Ini sangat sederhana, hanya dua DIV dan beberapa teks.

1	<div class="panel">
2	<div class="button">Button</div>
3	</div>

Sekarang kita akan memulai dengan CSS dasar kita. Pertama, mari menata panelnya.

.panel {
    background: -webkit-gradient(linear, left top, left bottom, from(#bbbcbb), to(#959695));
    background: -moz-linear-gradient(#bbbcbb, #959695);
    background-color: #b7b9b7;
    width: 100px;
}

Panel hanyalah kontainer yang bagus untuk tombol kita. Ini memiliki gradien dari atas ke bawah di antara dua warna abu-abu yang bagus. Bagi browser yang tidak mendukung gradien, latar background-color mundur diberikan.

Sekarang, mari kita lihat CSS untuk tombol yang sebenarnya.

.button {
    display: inline-block;
    margin: 20px;

    padding: 3px 6px;
    font-family: 'Lucida Grande', Arial, sans-serif;
    font-size: 13px;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    border: 1px solid rgba(0, 0, 0, 0.6);

    background: -webkit-gradient(linear, left top, left bottom, from(#fbfcfb), to(#9d9e9d));
    background: -moz-linear-gradient(#fbfcfb, #9d9e9d);
    background-color: #c0c2c0;

    text-shadow: rgba(255, 255, 255, 0.4) 0px 1px;

    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px;
    -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px;
    box-shadow: rgba(255, 255, 255, 0.4) 0 1px;

    -webkit-user-select: none;
    -moz-user-select: none;
    cursor: default;
}

Ada sejumlah kode yang layak di sini, yang menggunakan semua power tool yang saya jelaskan di atas, kecuali banyak latar belakang. Ada beberapa bagian kode ini, yang akan kita ambil satu per satu. Dua baris pertama hanyalah beberapa informasi tata letak yang sederhana. Mengatur tombol untuk display: inline-block membuatnya otomatis diperluas agar sesuai dengan konten, tidak peduli berapa banyak teks yang Anda masukkan ke dalam tombol. Bagian selanjutnya memberikan beberapa informasi font ke tombolnya. Akhirnya, di bagian ketiga kita bisa menggunakan power tool pertama kita: border radius. Dalam kasus tombol indah kita, kita memberikan radius 3px yang bagus. Selanjutnya kita beri tombolnya sebuah border. Perhatikan bahwa kita menggunakan rgba sebagai warna di sini. Hal ini memungkinkan kita membuat warna transparan sebagian seperti yang kita lakukan di sini, menciptakan warna keabu-abuan yang bagus. Pada bagian kode berikutnya, kita mengatur latar belakang tombol. Kita memberikannya latar belakang gradien serta warna solid untuk kemunduran di browser yang belum mendukung gradien. Selanjutnya, kita menggunakan text shadow untuk membuat teks terlihat sedikit terukir di tombol. Sekali lagi kita menggunakan rgba di sini untuk memberi warna putih transparan sebagian ke bayangan teks. Bagian pena-bagian kode akhir menciptakan bayangan kotak. Sekarang, ini sebenarnya tidak seperti bayangan, itu sebenarnya terlihat seperti border kedua, namun memberi sorotan yang bagus ke bagian bawah tombol agar terlihat terukir di latar belakang dan memuji warna border. Ini adalah trik yang berguna untuk mengetahui apakah Anda menginginkan sesuatu terlihat seperti memiliki banyak border - saya sering menggunakannya. Akhirnya, bagian terakhir kode CSS adalah trik bagus yang mencegah pemilihan teks di browser berbasis Webkit dan Firefox, dan menyetel kursor ke panah default daripada kursor pemilihan teks.

Sejauh ini, kode ini membuat tombol kita terlihat seperti ini:

OK, jadi belum terlalu buruk! Mari beralih ke tampilan tombol tertekan.

1	.button:active {
2	background: #B5B5B5;
3	-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
4	black 0px 1px 3px inset,
5	rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
6
7	-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
8	black 0px 1px 3px inset,
9	rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
10
11	box-shadow: rgba(255, 255, 255, 0.4) 0 1px,
12	black 0px 1px 3px inset,
13	rgba(0, 0, 0, 0.4) 0px -5px 12px inset;
14
15	text-shadow: rgba(255, 255, 255, 0.3) 0px 1px;
16	}

Saat tombol ditekan, kita mengubah beberapa hal. Pertama, kita mengatur latar belakang warna polos, menghilangkan gradien yang telah kita tetapkan sebelumnya. Ini karena kita akan membuat tampilan tertekan dengan bayangan kotak bukannya gradien. Hal berikutnya yang kita lakukan, adalah menetapkan bayangannya—atau banyak bayangan. Bayangan pertama dalam daftar adalah yang sama dengan yang kita miliki dalam keadaan normal: sorotan di bagian bawah tombol. Bayangan kedua dan ketiga adalah bayangan yang membuat tombol kita terlihat tertekan. Yang pertama adalah bayangan inset hitam yang ditetapkan dari 1 piksel teratas dan memiliki 3 piksel blur—bayangan yang tampak cukup gelap. Bayangan terakhir juga hitam tapi hitam sedikit transparan yang diatur dari bawah 5 piksel dengan 12 pixel dari blur. Ini menciptakan tampilan yang kegelapan di bagian bawah tombol saat ditekan. Hal terakhir yang perlu kita lakukan saat menekan tombol ini adalah mengurangi kegelapan bayangan teks dengan satu tingkat sehingga ia tidak menonjol seperti jempol yang sakit.

Itu saja! Tombol kita sudah lengkap. Inilah versi yang ditekan tampak seperti ini:

Kesimpulan

Mengganti gambar dengan CSS3 memiliki banyak manfaat. Itu membuat pekerjaan Anda sebagai pengembang web lebih mudah karena Anda tidak perlu membuka Photoshop setiap kali Anda perlu melakukan perubahan pada antarmuka pengguna Anda. Itu membuat situs web Anda atau aplikasi web dimuat lebih cepat karena tidak perlu mendownload begitu banyak gambar yang berat. Dan ini memungkinkan Anda menciptakan pengalaman yang lebih kaya, interaktif, dan diinginkan bagi pengguna sehingga mereka terus kembali lagi.

Saya akan meninggalkan Anda dengan sedikit inspirasi dari hal-hal yang dapat Anda lakukan dengan CSS3. Ini belum tentu contoh yang paling dunia nyata, tapi mereka menunjukkan apa yang mungkin dengan sedikit kerja.

IPhone yang Dibuat dengan CSS3 Murni

Demo pertama, yang dibuat oleh Jeff Batterton, adalah iPhone yang dibuat dengan CSS3 murni - tidak ada gambar yang digunakan. Ini sangat mengesankan, dengan menggunakan gradient CSS, text shadow, box shadow, transition dan transformation. Sayangnya, saat ini hanya terlihat benar di browser berbasis Webkit seperti Safari dan Chrome. Ini bisa menjadi tugas Anda untuk membuat demonya bekerja di Firefox!

Ikon IOS CSS3 Murni

Demo lain, mungkin yang lebih menakjubkan lagi ditulis oleh Louis Harboe. Ini adalah pembuatan ulang dari beberapa ikon iOS dalam CSS murni, dan pembuatan ulang yang sangat realistis padanya! Demo ini juga hanya bekerja di browser berbasis WebKit. Jika Anda ingin mengetahui bagaimana beberapa ikon ini diproduksi ulang, Anda bisa menuju ke blog Louis Harboe di mana dia menggambarkan prosesnya.

Saya harap Anda menikmati artikel ini! Jangan ragu untuk mengikuti saya di Twitter, atau tinggalkan pemikiran Anda di komentar!