Banyak dari Anda mungkin pernah mendengar banyak rumor tentang CSS3, tapi apa sajakah teknik CSS3 yang sebenarnya bisa kita gunakan saat ini? Pada artikel ini, saya akan menunjukkan kepada Anda beberapa teknik CSS3 khas yang bekerja dengan baik di beberapa browser utama (seperti browser Firefox, Chrome, Safari, Opera). Efek ini akan menurunkan rendering di browser yang tidak didukung (seperti Internet Explorer). Banyak gaya CSS3 yang diusulkan dapat langsung digunakan menggunakan deklarasi khusus browser..jpg)
Jika Anda tidak tahu apa itu deklarasi khusus browser, Anda hanya perlu mengingat bahwa semuanya adalah awalan khusus sebelum properti gaya CSS yang terkait dengan penyedia kernel. Karena CSS3 belum sepenuhnya didukung, kita perlu menggunakan deklarasi khusus ini. Bentuk spesifiknya adalah sebagai berikut:
* Awalan browser Mozilla/Firefox/Gecko: -moz-
* Awalan browser Webkit (Safari/Chrome): -webkit- (Catatan: Beberapa awalan Wbkit hanya dapat digunakan di Safari dan tidak didukung oleh Chrome.)
Seperti yang mungkin Anda lihat, salah satu kelemahan menggunakan deklarasi ini adalah jika kita ingin mendapatkan efek CSS3 di Firefox, Safari, dan Chrome, kita perlu menggunakan semua awalan di atas. Tidak mengherankan, Internet Explorer tidak mendukung CSS3 dan oleh karena itu tidak memiliki deklarasi awalan khusus seperti browser utama lainnya.
Oke cukup sekian saja, yuk langsung kita coba. Catatan: Deklarasi gaya tanpa awalan ini adalah usulan spesifikasi sebenarnya dari standar W3.
Deskripsi demo (contoh) tentang halaman ini
Semua contoh ini ada di halaman ini. Jika Anda tidak dapat melihat efek dari contoh secara normal (atau hanya dapat melihat sebagian saja), berarti browser yang Anda gunakan tidak mendukung efek CSS3 tersebut.
efek bayangan
Efek bayangan menerima beberapa nilai parameter. Yang pertama adalah warna bayangan, yang juga menerima empat nilai panjang (panjang) lainnya. Dua nilai panjang pertama adalah offset X (horizontal) dan offset Y (vertikal). Parameter selanjutnya adalah nilai yang mencerminkan ketidakjelasan. Nilai keempat dan terakhir digunakan untuk menentukan penyebaran blur.
bayangan kotak: #333 3px 3px 4px;
-moz-kotak-bayangan: #333 3px 3px 4px;
-webkit-kotak-bayangan: #333 3px 3px 4px;
.gif)
Demonstrasi efek bayangan
efek gradien
Gaya gradien CSS3 pada awalnya bisa membingungkan, terutama perbedaan antara gradien -moz dan -webkit. Di -moz, pertama-tama Anda perlu menentukan arah gradien, lalu menentukan warna awal dan akhir. Gradien -webkit sedikit lebih rumit. Pertama, Anda perlu menentukan jenis gradien, lalu dua nilai berikutnya menentukan arah, dan dua nilai terakhir menentukan warna awal dan warna akhir. dari gradien.
-moz-linier-gradien(-90 derajat,#1aa6de,#022147);
-webkit-gradient(linear, kiri atas, kiri bawah, dari(#1aa6de), ke(#022147));
.gif)
Demonstrasi efek gradien
Modus warna RGBA
Definisi warna sebenarnya dari RGBA tidak serumit kelihatannya. Ia menerima empat nilai parameter: nilai merah, nilai hijau, nilai biru, dan transparansi. Kita tidak menggunakan nilai hex(#) heksadesimal warna, kita mengatur warna pada mode RGB, dimana transparansi dapat mengatur efek transparan dari warna tersebut. Transparansi berkisar dari 0 hingga 1, dengan 0 berarti buram sepenuhnya dan 1 sepenuhnya transparan. Transparansi contoh demonstrasi berikut semuanya 0,5, transparansi elemen 50%, rgba tidak memerlukan deklarasi awalan browser tertentu.
warna latar belakang: rgba(0, 54, 105, .5);
.gif)
Mode warna HSL (Hue H, Saturation S, Lightness L)
Selain RGBA, CSS3 juga mendukung mode warna HSL. Ini memberi kita banyak keleluasaan dalam memilih warna dan corak. Dalam model warna HSL, H berarti rona, S berarti kroma, dan L berarti kecerahan. Hue merupakan nilai sudut pada roda warna, sedangkan saturasi dan kecerahan merupakan nilai persentase warna.
warna latar belakang: hsl(209,41.2%, 20.6%);
.gif)
Contoh demo HSL
warna perbatasan
Untuk menggunakan gaya CSS ini, Anda perlu menentukan masing-masing batas atas, batas kanan, batas bawah, dan batas kiri untuk mendapatkan efek berikut. Anda memperhatikan bahwa batas 8 piksel ditentukan, dan kemudian batas ditentukan dalam 8 warna berbeda. Hal ini dikarenakan jumlah warna border harus sesuai dengan nilai lebar piksel border.
batas: 8 piksel padat #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
.gif)
Demo warna perbatasan
Pengaturan warna pemilihan teks
Saya harus mengatakan bahwa definisi warna pemilihan teks adalah fitur baru yang cukup menarik. Ketika saya pertama kali melihat ini di Tips CSS, saya pikir itu sangat bijaksana. Dengan pasangan elemen semu ::selection, Anda dapat mengubah warna dan latar belakang saat pengguna memilih elemen teks. Kalau minta pendapat, menurut saya sangat indah. Meskipun ::selection telah dihapus dari draf CSS3 saat ini, kami berharap dapat menambahkannya nanti.
::pilihan {latar belakang: #3C0; /* Safari */warna: #90C;}::-moz-pilihan {latar belakang: #3C0; /* Firefox */warna: #90C;}
.gif)
Demo warna pemilihan teks
deformasi
Dengan gaya transformasi, Anda dapat membuat elemen tampak lebih besar saat mengarahkan mouse. Atur nilai Skala ke nilai yang lebih besar dari 1 dan elemen akan menyusut. Sebaliknya jika nilainya kurang dari 1 maka ukuran elemennya akan mengecil. Selain Skala, ada banyak deformasi lain yang tersedia. Anda dapat mengunjungi halaman pengembang Firefox untuk melihat apa yang dapat mereka capai
-moz-transformasi: skala(1.15);-webkit-transformasi: skala(1.15);
.gif)
Demonstrasi efek deformasi
tata letak multi-kolom
Dengan gaya tata letak multi-kolom baru ini, Anda dapat memberikan efek tata letak "surat kabar" pada teks Anda. Dibandingkan dengan metode implementasi di CSS2, di CSS3, jauh lebih mudah bagi kita untuk mencapai efek jenis ini. Di bawah ini, saya menentukan jumlah kolom yang dibutuhkan burung, serta jenis aturan pemisahan dan seberapa besar jarak antar kolom yang seharusnya. Sangat mudah untuk digunakan, bukan?
-moz-column-count:3;-moz-column-rule: solid 1px hitam;-moz-column-gap: 20px;
.gif)
Meringkaskan
Saya harap saya sama bersemangatnya dengan fitur-fitur CSS3 ini. Ini memberi desainer dan pengembang web lebih banyak kekuatan dan menyederhanakan banyak aspek. Sekarang kita tinggal menunggu semua browser mendukungnya. Tentu saja, pengetahuan yang saya tunjukkan di sini hanyalah puncak gunung es dari fitur-fitur CSS3 baru. Jika Anda menginginkan informasi lebih lanjut, tip dan bantuan, saya sarankan Anda mengunjungi situs web berikut.