01 04
Membuat Cross-Browser Linear Gradients dengan CSS3
Linear Gradien
Jenis gradien paling umum yang akan Anda lihat adalah gradien linier dua warna. Ini berarti bahwa gradien akan bergerak dalam garis lurus berubah secara bertahap dari warna pertama ke yang kedua di sepanjang garis itu. Gambar di halaman ini menunjukkan gradien kiri ke kanan sederhana # 999 (abu-abu gelap) ke #fff (putih).
Gradien linier adalah yang paling mudah didefinisikan, dan memiliki dukungan paling banyak di browser. Gradien linier CSS3 didukung di Android 2.3+, Chrome 1+, Firefox 3.6+, Opera 11.1+, dan Safari 4+. Internet Explorer dapat menambahkan gradien menggunakan filter dan mendukungnya kembali ke IE 5.5. Ini bukan CSS3, tetapi ini adalah opsi untuk kompatibilitas lintas-browser.
Saat Anda menentukan gradien, Anda perlu menentukan beberapa hal yang berbeda:
- Jenis gradien apa itu — linear atau radial
- Di mana gradien harus dimulai
- Dimana gradien harus berhenti
- Warna apa yang ada di gradien dan di mana mereka harus mulai dan berhenti
Untuk menentukan gradien linier menggunakan CSS3, Anda menulis:
linear-gradient ( sudut atau samping atau sudut , warna berhenti , warna berhenti )
- Pertama Anda mendefinisikan tipe gradien dengan nama linear -gradient.
- Kemudian, Anda menentukan titik awal dan titik berhenti gradien dalam salah satu dari dua cara: sudut garis dalam derajat dari 0 hingga 359, dengan 0 derajat mengarah lurus ke atas. Atau dengan fungsi "samping atau sudut", seperti kiri, kanan, bawah, dan atas. Ini akan dijelaskan lebih detail di halaman berikutnya. Jika Anda membiarkannya keluar, gradien akan mengalir dari atas ke bawah elemen.
- Kemudian Anda menentukan warna berhenti. Anda menentukan warna berhenti dengan kode warna dan persentase opsional. Persentase memberitahu browser di mana pada baris untuk memulai atau mengakhiri dengan warna itu. Standarnya adalah menempatkan warna secara merata di sepanjang garis. Anda akan mempelajari lebih lanjut tentang berhenti warna pada halaman 3.
Jadi, untuk mendefinisikan gradien di atas dengan CSS3, Anda menulis:
linear-gradient (kiri, # 999999 0%, #ffffff 100%);
Dan untuk mengaturnya sebagai latar belakang DIV yang Anda tulis:
div {
background-image: linear-gradient (kiri, # 999999 0%, #ffffff 100%;
}
Ekstensi Browser untuk CSS3 Gradien Linear
Agar gradien Anda berfungsi lintas-browser, Anda perlu menggunakan ekstensi browser untuk sebagian besar browser dan filter untuk Internet Explorer 9 dan lebih rendah (sebenarnya 2 filter). Semua ini mengambil elemen yang sama untuk menentukan gradien Anda (kecuali bahwa Anda hanya dapat menentukan gradien 2-warna di IE).
Filter dan Ekstensi Microsoft —Internet Explorer adalah yang paling menantang untuk didukung, karena Anda memerlukan tiga jalur berbeda untuk mendukung versi browser yang berbeda. Untuk mendapatkan gradien ke abu-abu ke atas Anda akan menulis:
/ * IE 5.5–7 * /
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8–9 * /
-ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1)";
/ * IE 10 * /
-ms-linear-gradient (kiri, # 999999 0%, #ffffff 100%);
Mozilla Extension —The -moz- extension berfungsi seperti properti CSS3, hanya dengan ekstensi -moz. Untuk mendapatkan gradien di atas untuk Firefox, tulis:
-moz-linear-gradient (kiri, # 999999 0%, #ffffff 100%);
Perpanjangan Opera —The -o- ekstensi menambahkan gradien ke Opera 11.1+. Untuk mendapatkan gradien di atas, tulis:
-o-linear-gradient (kiri, # 999999 0%, #ffffff 100%);
Perpanjangan Webkit —The -webkit- ekstensi berfungsi sangat mirip dengan properti CSS3. Untuk menentukan gradien di atas untuk Safari 5.1+ atau Chrome 10+ yang Anda tulis:
-webkit-linear-gradient (kiri, # 999999 0%, #ffffff 100%);
Ada juga versi ekstensi Webkit yang lebih lama yang berfungsi dengan Chrome 2+ dan Safari 4+. Di dalamnya Anda mendefinisikan jenis gradien sebagai nilai, bukan dalam nama properti. Untuk mendapatkan gradien abu-abu ke putih dengan ekstensi ini, tulis:
-webkit-gradien (linier, kiri atas, kanan atas, warna-berhenti (0%, # 999999), warna-berhenti (100%, # ffffff));
Penuh CSS3 Linear Gradient CSS Code
Untuk dukungan lintas-browser lengkap untuk mendapatkan gradien abu-abu ke putih di atas Anda pertama-tama harus menyertakan warna solid pengganti untuk browser yang tidak mendukung gradien, dan item terakhir harus menjadi gaya CSS3 untuk browser yang sepenuhnya sesuai. Jadi, Anda menulis:
latar belakang: # 999999;
latar belakang: -moz-linear-gradient (kiri, # 999999 0%, #ffffff 100%);
latar belakang: -webkit-gradient (linear, kiri atas, kanan atas, color-stop (0%, # 999999), color-stop (100%, # ffffff));
latar belakang: -webkit-linear-gradient (kiri, # 999999 0%, #ffffff 100%);
latar belakang: -o-linear-gradient (kiri, # 999999 0%, #ffffff 100%);
latar belakang: -ms-linear-gradient (kiri, # 999999 0%, #ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
latar belakang: linear-gradient (kiri, # 999999 0%, #ffffff 100%);
Halaman berikutnya dalam tutorial ini menjelaskan bagian-bagian gradien secara lebih rinci, dan halaman terakhir mengarahkan Anda ke alat yang merupakan cara terbaik untuk membuat gradien CSS3 secara otomatis.
Lihat gradien linier ini dalam tindakan hanya dengan menggunakan CSS.
02 04
Menciptakan Gradien Diagonal — Sudut Gradien
Titik awal dan titik berhenti menentukan sudut gradien. Kebanyakan gradien linier dari atas ke bawah atau kiri ke kanan. Tetapi mungkin untuk membangun gradien yang bergerak pada garis diagonal. Gambar di halaman ini menunjukkan gradien sederhana yang bergerak dalam sudut 45 derajat di seluruh gambar dari kanan ke kiri.
Sudut untuk Mendefinisikan Garis Gradien
Sudutnya adalah garis pada lingkaran imajiner di tengah elemen. 0deg menunjuk, 90deg menunjuk ke kanan, 180deg menunjuk ke bawah, dan 270 poin mengarah ke kiri. Anda dapat menentukan sudut apa pun dari 0 hingga 359 derajat.
Anda harus mencatat bahwa dalam persegi, sudut 45 derajat bergerak dari sudut kiri atas ke kanan bawah, tetapi dalam persegi panjang titik awal dan akhir sedikit di luar bentuk, seperti yang Anda lihat pada gambar.
Cara yang lebih umum untuk mendefinisikan gradien diagonal adalah dengan menentukan sudut, seperti kanan atas dan gradien akan bergerak dari sudut itu ke sudut yang berlawanan. Anda dapat menentukan posisi awal dengan kata kunci berikut:
- puncak
- kanan
- bawah
- kiri
- pusat
Dan mereka dapat digabungkan menjadi lebih spesifik, seperti:
- kanan atas
- kiri atas
- pusat teratas
- kanan bawah
- kiri bawah
- Tengah bawah
- pusat kanan
- pusat kiri
Berikut adalah CSS untuk gradien yang mirip dengan yang digambarkan, merah ke putih bergerak dari sudut kanan atas ke kiri bawah:
latar belakang: ## 901A1C;
background-image: -moz-linear-gradient (kanan atas, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradient (linier, kanan atas, kiri bawah, color-stop (0, # 901A1C), color-stop (1, #FFFFFF));
latar belakang: -webkit-linear-gradient (kanan atas, # 901A1C 0%, #ffffff 100%);
latar belakang: -o-linear-gradient (kanan atas, # 901A1C 0%, #ffffff 100%);
latar belakang: -ms-linear-gradient (kanan atas, # 901A1C 0%, #ffffff 100%);
latar belakang: linear-gradient (kanan atas, # 901A1C 0%, #ffffff 100%);
Anda mungkin telah memperhatikan bahwa tidak ada filter IE dalam contoh ini. Itu karena IE hanya mengizinkan dua jenis filter: atas ke bawah (default) dan kiri ke kanan (dengan GradientType = 1 switch).
Lihat gradien linier diagonal ini dalam tindakan hanya dengan menggunakan CSS.
03 04
Stop Warna
Dengan gradien linier CSS3, Anda dapat menambahkan beberapa warna ke gradien Anda untuk menciptakan efek lebih mewah. Untuk menambahkan warna-warna ini, Anda menambahkan warna tambahan di ujung properti Anda, dipisahkan dengan koma. Anda harus menyertakan di mana pada garis warna harus mulai atau berakhir juga.
Filter Internet Explorer hanya mendukung dua warna berhenti, jadi ketika Anda membangun gradien ini, Anda hanya harus menyertakan warna pertama dan kedua yang ingin Anda tampilkan.
Berikut ini CSS untuk gradien 3 warna di atas:
latar belakang: #ffffff;
latar belakang: -moz-linear-gradient (kiri, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
background: -webkit-gradient (linier, kiri atas, kanan atas, color-stop (0%, # ffffff), color-stop (51%, # 901A1C), color-stop (100%, # ffffff));
latar belakang: -webkit-linear-gradient (kiri, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
latar belakang: -o-linear-gradient (kiri, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
latar belakang: -ms-linear-gradien (kiri, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
latar belakang: linear-gradient (kiri, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Lihat gradien linier ini dengan tiga warna berhenti beraksi hanya dengan menggunakan CSS.
04 04
Jadikan Bangunan Gradien Lebih Mudah
Ada dua situs yang saya sarankan untuk membantu Anda membangun gradien, masing-masing memiliki kelebihan dan kekurangan bagi mereka, saya belum menemukan pembuat gradien yang melakukan semuanya.
Generator Gradien Ultimate CSS
Generator gradien ini sangat populer karena kinerjanya mirip dengan pembuat gradien dalam program seperti Photoshop. Saya juga menyukainya karena memberikan Anda semua ekstensi CSS, bukan hanya Webkit dan Mozilla. Masalah dengan generator ini adalah bahwa ia hanya mendukung gradien horizontal dan vertikal. Jika Anda ingin melakukan gradien diagonal, Anda harus pergi ke generator lain yang saya sarankan.
Generator Gradien CSS3
Generator ini membawa saya sedikit lebih lama untuk memahami daripada yang pertama, tetapi mendukung mengubah arah ke diagonal.
Jika Anda tahu Generator Gradien CSS lain yang Anda sukai lebih baik dari ini, harap beri tahu kami .