CSS adalah bahasa penataan situs web yang terkenal dan banyak digunakan. Dalam paket versi 3 (CSS3), beberapa fitur baru yang dapat menghemat waktu telah ditambahkan. Meskipun efek-efek ini hanya didukung oleh versi browser terbaru, namun tetap penting dan menarik untuk mengetahuinya. Bao Fengbinbin akan menunjukkan kepada Anda 5 teknologi baru yang menarik dalam CSS di artikel ini: sudut membulat, sudut membulat individual, opacity, bayangan, dan elemen pengubahan ukuran.
1: Tanda dasar
Sebelum kita memulai tutorial ini, mari buat markup dasar yang akan digunakan sepanjang tutorial.
XHTML kami memerlukan elemen div berikut:
#round, menggunakan kode CSS3 untuk mencapai sudut membulat.
#indie, gunakan beberapa fillet.
#opacity, mendemonstrasikan cara CSS3 baru dalam mengimplementasikan opacity.
#shadow, menunjukkan cara menggunakan CSS3 untuk mendapatkan efek bayangan tanpa menggunakan Photoshop.
#resize, menunjukkan cara menggunakan beberapa CSS untuk mencapai efek pengubahan ukuran.
Singkatnya, xHTML kita akan terlihat seperti ini:
Berikut isi kutipannya: <!DOCTYPE html PUBLIK “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Mari buat file CSS dasar:
Berikut isi kutipannya:
|
Seperti yang Anda lihat di atas, kami memberi setiap elemen div lebar dan tinggi 300px dan membiarkannya melayang ke kiri, meninggalkan seluruh div halaman untuk kami gaya nanti.
2: sudut membulat
Saat ini, ada banyak cara untuk membuat fillet, namun semuanya rumit. Metode yang paling umum: pertama, Anda harus membuat gambar dengan sudut membulat; kemudian, Anda harus membuat banyak elemen html dan menggunakan gambar latar belakang untuk menampilkan sudut membulat. Anda dan saya mengetahui proses spesifiknya dengan sangat baik.
Masalah ini akan mudah diselesaikan di CSS3 dengan properti yang disebut "border-radius". Pertama-tama kita membuat elemen div hitam dan menetapkan batas hitam padanya. Perbatasan adalah prasyarat untuk mencapai efek atribut "border-radius".
Seperti ini:
Berikut isi kutipannya: #bulat { |
Sekarang Anda telah membuat elemen div, tampilannya seperti yang Anda harapkan, tinggi 300px, bersudut, dan hitam. Sekarang mari tambahkan kode untuk mengimplementasikan sudut membulat. Ini sangat sederhana dan hanya membutuhkan dua baris kode.
Berikut isi kutipannya: #bulat { |
Di sini, kami menambahkan dua baris kode serupa, -moz- untuk browser Firefox dan -webkit- untuk browser Safari/Chrome.
Catatan: Sejauh ini, browser IE tidak mendukung atribut border-radius, jadi jika Anda ingin IE memiliki efek sudut membulat, Anda perlu menambahkan sudut membulat secara terpisah.
Terjemahan literal dari properti border-radius adalah border radius. Sama seperti Photoshop, semakin besar nilainya, semakin besar pula sudut membulatnya.
3: Sudut membulat individual
Jika Anda mengikuti kebiasaan masa lalu, itu akan membuang banyak waktu. Sekarang CSS3 dapat menyelesaikannya dengan cepat!
Sekarang kita hanya ingin sudut kanan atas dan kanan bawah div dibulatkan, jadi kita hanya perlu melakukan sedikit modifikasi:
Berikut isi kutipannya: #indie { |
Bayangkan saja elemen halaman web apa yang akan digunakan pendekatan ini? Ya!
4: Ubah opacity menggunakan CSS3
Sekarang Anda dapat menulis beberapa baris kode secara konvensional untuk mengimplementasikan efek opacity (hack). Namun, CSS3 menyederhanakan proses ini.
Baris kode ini mudah diingat, cukup "opacity: value;":
Berikut isi kutipannya: #opasitas { warna latar belakang: #000; opacity: 0,3; } |
5: Efek bayangan
Ada banyak cara untuk mendapatkan bayangan. Yang paling umum adalah menggunakan Photoshop untuk membuat gambar bayangan dan kemudian menerapkannya ke properti latar belakang. Namun CSS3 membuat pekerjaan Anda lebih efisien. Sayangnya, saat ini hanya Safari dan Chrome yang mendukung fitur baru ini.
Ini hanya memerlukan satu baris kode, tetapi memiliki 4 nilai berbeda:
Berikut isi kutipannya: -webkit-kotak-bayangan: 3px 5px 10px #ccc; |
Izinkan saya menjelaskan apa yang diwakili oleh keempat nilai ini. 3px pertama adalah jarak horizontal (horizontal) antara bayangan yang ditentukan dan elemen div, dan 5px kedua mengacu pada jarak vertikal (vertikal) antara bayangan dan div. 10px ketiga mengacu pada keburaman bayangan (mirip dengan bulu-bulu di Photoshop), semakin besar nilainya, semakin halus. Semua orang tahu bahwa nilai akhir adalah warna bayangan.
Kode efek bayangan terakhir kita;
Berikut isi kutipannya: #bayangan { warna latar belakang: #fff; batas: 1 piksel padat #000; -webkit-kotak-bayangan: 3px 5px 10px #ccc; } |
Seperti yang Anda lihat, div kami memiliki latar belakang putih, batas hitam, dan bayangan abu-abu terang.
6: Ubah ukuran
Di CSS versi terbaru, dimungkinkan untuk mengubah ukuran elemen (tetapi saat ini hanya didukung oleh Safari)
Setelah menggunakan kode ini, sebuah segitiga kecil akan muncul di sudut kanan bawah elemen kita untuk mengingatkan pengguna bahwa elemen ini dapat diubah ukurannya. Kodenya masih sangat sederhana, bisa dikatakan hanya membutuhkan satu baris kode saja. Tentunya Anda juga bisa menggunakan beberapa properti yang pernah Anda gunakan sebelumnya, seperti "max-width", "max-height", " lebar minimum" dan "tinggi minimum".
Berikut isi kutipannya: #mengubah ukuran { warna latar belakang: #fff; batas: 1 piksel padat #000; ubah ukuran: keduanya; meluap: otomatis; } |
Di sini kita terutama berbicara tentang atribut resize dan overflow. resize: keduanya berarti semua sisi dapat diubah ukurannya juga termasuk horizontal dan vertikal. Overflow berfungsi dengan pengubahan ukuran, jadi otomatis digunakan di sini.
Meringkaskan
Jadi, apakah Anda mendapatkan sesuatu dari artikel ini? Meski saat ini hanya sedikit browser yang mendukung CSS3, namun tidak bisa dipungkiri bahwa CSS3 memang akan lebih menghemat waktu dalam pekerjaan kita. Jika Anda memiliki pengetahuan dan pemahaman tentang peningkatan progresif, saya rasa Anda akan siap menerima versi baru CSS3 yang hebat ini. Jangan menghabiskan seluruh waktu Anda di IE6, jika tidak, Anda hanya akan menjadi insinyur pengembangan front-end yang ketinggalan jaman.