Bagaimana Bekerja dengan Modul CSS3 - dummies

Untuk kesederhanaan, modul CSS3 dapat dipisahkan menjadi sepuluh kategori: batas, latar belakang, font, efek teks, beberapa kolom, transisi, transisi 2D, transisi 3D, animasi, dan antarmuka pengguna. Perhatikan setiap modul untuk melihat apa yang bisa dilakukan.

Perbatasan: Modul perbatasan memperluas kemampuan kategori perbatasan dengan menambahkan opsi untuk menyetel radius perbatasan untuk membuat sudut melengkung, bayangan kotak untuk menambahkan bayangan jepret, dan gambar perbatasan untuk menggunakan grafik pada gaya perbatasan daripada menggunakan satu warna per tepi.

Backgrounds: Saat ini ada tiga tambahan baru untuk kategori latar belakang dengan CSS3. Ukuran latar belakang sangat berguna untuk membuat grafik skalabel, asal latar belakang menawarkan tiga lokasi untuk memposisikan gambar latar belakang relatif terhadap model kotak, dan klip latar belakang memungkinkan warna latar belakang dipangkas ke isi kotak daripada ke tepi sebuah kotak. kotak.

Selain itu, CSS3 sekarang memungkinkan Anda menggunakan beberapa gambar latar belakang untuk setiap kontainer.

Fonts: Alih-alih terjebak menggunakan font yang aman untuk semua desain Anda, properti font-face baru memungkinkan Anda memilih dan menggunakan font yang ada di server web Anda. Apa yang terjadi adalah a. ttf (True Type Fonts) atau. otf (OpenType Fonts) file font akan didownload secara otomatis ke perangkat pengguna jika dan kapan font tersebut tidak terdeteksi.

Anda mungkin telah melihat fitur serupa yang beraksi dengan situs yang menggunakan font Google dan font Typekit. Aturan gaya ini memperluas kemampuan itu dengan mengizinkan Anda menggunakan font sistem Anda sendiri. Namun, pastikan untuk tidak melanggar undang-undang hak cipta dengan menentukan font yang dilindungi hak cipta!

Text Effects: Sebenarnya ada 11 properti baru di modul ini, namun tidak semuanya memiliki dukungan browser utama. Properti yang saat ini memiliki dukungan adalah membenarkan, melimpah, bayangan, kata istirahat, dan bungkus kata.

Beberapa Kolom: Tanpa harus menggunakan wadah atau pelampung tambahan, sekarang Anda dapat membuat beberapa kolom teks dengan sepuluh properti kolom ganda yang berbeda. Meskipun kebanyakan dari mereka bekerja sekarang, beberapa masih memerlukan prefiks gaya browser tertentu. Meski begitu, mereka masih cukup rapi. Untuk hasil terbaik, atur jumlah kolom dan lebar celah.

Transisi: Berpeganglah pada topi Anda, Anda sekarang dapat membuat gerakan di halaman tanpa animasi gif, Flash, atau JavaScript! Transisi datang dalam tiga rasa, biasa, 2D, dan 3D. Dengan transisi reguler, Anda dapat memodifikasi satu atau beberapa properti elemen, seperti mengubah lebar objek selama jumlah detik tertentu, bila digabungkan dengan: hover pseudo-class.

Transisi 2D: Item dalam modul ini memungkinkan Anda memanipulasi properti 2D dari sebuah elemen. Gunakan secara terpisah atau gabungan untuk bergerak, skala, condong, berputar, peregangan, dan balikkan elemen sepanjang bidang horizontal atau vertikal. Misalnya, Anda bisa membuat kotak tumbuh dan berputar sambil bergerak dari kiri ke kanan.

Transisi 3D: Seolah-olah transisi 2D tidak cukup dingin, tunggu sampai Anda melihat apa yang dilakukan transisi 3D! Dengan menggunakan metode yang mengubah objek di sepanjang sumbu X dan / atau Y, Anda dapat membuat objek Anda muncul untuk diputar dalam ruang 3D, sehingga pemirsa dapat melihat sisi belakang "belakang" objek yang terbalik.

Meskipun dukungan browser terbatas untuk transformasi yang lebih maju, akhirnya Anda dapat memutar, skala, dan bergerak di sepanjang sumbu X, Y, dan Z, antara lain. Cukup kuat.

Animasi: Oke, apa yang terjadi bila Anda menggabungkan semua teknik transformasi baru ini? Animasi CSS3, bayi - jenis yang bisa menggantikan GIF animasi, Flash, dan bahkan beberapa JavaScript. Semua keajaiban terjadi dengan cara mengikat properti @keyframes baru ke pemilih dengan menggunakan properti animasi dengan nama dan durasi yang ditentukan.

Misalnya, Anda bisa mengubah posisi dan warna latar belakang objek sehingga objek memiliki tampilan morphing melalui ruang angkasa, dan kemudian Anda bisa memasukkan kode untuk membuat animasi membalikkan urutan dan melanjutkan perulangan tanpa henti.

Antarmuka Pengguna: Dengan properti baru ini, Anda dapat menambahkan properti ke objek yang berbeda yang mengubahnya menjadi elemen interaktif bagi pengunjung situs. Misalnya, Anda dapat mengubah ukuran lapisan dan bidang bentuk teks, memanggil tombol tab dan panah pada keyboard, dan membuat garis besar offset yang melampaui tepi perbatasan.

Sekarang Anda memiliki gambaran umum tentang modul baru ini, Anda dapat mengetahui lebih lanjut tentang apa yang dapat mereka lakukan. Misalnya, Anda bisa membuat bayangan pada bentuk dan teks, menerapkan efek gradien latar belakang, dan memindahkan objek Anda dari sini ke sana.