Perbedaan antara CSS3 dan CSS

Situs web modern terdiri dari tiga file atau kode yang berbeda, HTML, JavaScript dan CSS. HTM mendefinisikan struktur situs web; JavaScript mendefinisikan bagaimana situs web akan berperilaku; dan CSS mendefinisikan keseluruhan penampilan dan gaya situs web. Spesifikasi CSS dipertahankan oleh W3C. Di satu sisi, kami memiliki versi dasar dan di sisi lain, CSS3 terbaru dan kuat. Mari kita lihat perbedaan antara keduanya.

Apa itu CSS?

CSS adalah kependekan dari Cascading Style Sheets. Ini memberi Anda kontrol kreatif atas keseluruhan desain dan tata letak halaman web Anda. Tujuan CSS adalah untuk merampingkan proses menata halaman web. CSS adalah bahasa desain sederhana yang memungkinkan Anda membuat halaman web yang menarik. Ini membantu untuk menentukan berpikir seperti warna, font, posisi elemen tertentu, dan sedikit animasi. Jika Anda telah menggunakan gaya dalam pengolah kata seperti Microsoft Word atau program tata letak halaman seperti Adobe InDesign, CSS akan terasa akrab bagi Anda. Elemen visual apa pun di situs web seperti latar belakang, kotak, teks, header, dan footer, secara harfiah apa pun dapat diubah dengan CSS.

Apa itu CSS3?

CSS3 adalah iterasi terbaru dari bahasa Cascading Style Sheets dan angka 3 bukan hanya referensi ke fitur baru di CSS tetapi tingkat ketiga dalam kemajuan spesifikasi CSS. CSS3 adalah versi modular baru dari spesifikasi CSS dengan beberapa fitur baru yang menarik untuk membuat desain web Anda berupaya ke tingkat yang sama sekali baru, membuatnya lebih mudah dan lebih fleksibel. Ini adalah istilah selimut baru yang digunakan untuk menggambarkan fitur dan fungsionalitas CSS baru yang telah muncul selama beberapa tahun terakhir. Sekarang, bagian dari fungsionalitas baru ini adalah pengembangan CSS yang berkelanjutan melalui W3C dan bagian lain dari itu sedang didorong oleh generasi baru browser yang secara khusus dilayani untuk menyediakan alat yang lebih kuat untuk membuat desainer untuk membuat situs web situs web. Ini membawa sejumlah besar fitur dan penambahan baru, seperti pemilih canggih, sudut bulat, tata letak baru, animasi atau transisi, bayangan, gradien, pemilihan warna, dan banyak lagi.

Perbedaan antara CSS3 dan CSS

Pemilih

- Selektor berada di jantung lembaran gaya cascading yang pada dasarnya adalah pola yang digunakan untuk memilih elemen HTML yang ingin Anda gaya. CSS3 menampilkan kotak peralatan baru yang kuat dan kuat yang memungkinkan Anda memilih elemen yang lebih spesifik untuk penataan sambil menghilangkan kebutuhan untuk ID dan kelas sewenang -wenang yang sering Anda sertakan. Dengan berbagai pemilih, Anda dapat menargetkan hampir semua elemen halaman. CSS3 menambah fungsionalitas pemilih atribut dasar dengan memungkinkan Anda memilih elemen berdasarkan string dalam nilai atribut.

Warna

- CSS3 menawarkan beberapa cara baru yang menarik untuk bermain dengan warna. Sebelumnya, warna dinyatakan menggunakan format heksadesimal - sistem penomoran yang dimulai pada 00 dan berakhir di FF. Spesifikasi warna CSS3 mendefinisikan daftar kata kunci warna yang diperluas yang didukung oleh browser web. Daftar ini sekarang mencakup 147 kata kunci warna tambahan dan model baru yang disebut 'RGBA' (penambahan alpha) yang memungkinkan spesifikasi opacity warna. Perubahan yang paling signifikan adalah Anda sekarang dapat menyatakan warna semitransparen.

Border-Radius

- Properti CSS Border-Radius mendefinisikan sudut-sudut bulat dari elemen apa pun, memungkinkan Anda untuk dengan mudah memanfaatkan sudut-sudut bulat di elemen desain Anda. Dengan CSS3, Anda bahkan dapat menggunakan gambar untuk perbatasan dan membuat sudut bulat di perbatasan Anda tanpa gambar atau markup tambahan. Ini juga memiliki penambahan properti latar belakang seperti kemampuan untuk memiliki banyak latar belakang dan peningkatan untuk mengontrol ukuran gambar latar belakang, orientasi dan kliping. Properti Box Shadow memungkinkan Anda untuk menambahkan bayangan drop ke elemen.

Pembentukan teks

- CSS3 menyediakan satu ton properti pemformatan teks, banyak di antaranya sudah ada di CSS2 tetapi dengan beberapa fitur tambahan seperti Properti Bayangan Teks Baru. Properti Teks Bayangan Teks Baru ini memungkinkan Anda untuk menambahkan bayangan ke karakter individu dalam node teks. Efek bayangan untuk teks membuat halaman web terlihat lebih jelas dan menarik. Sebelum CSS3, Anda akan melakukan hal yang sama menggunakan gambar atau elemen teks duplikat dan kemudian posisikan.

Gradien

- Gradien adalah salah satu fitur yang paling dinanti untuk menjadi asli CSS. Ini adalah tambahan yang sangat kuat untuk CSS yang memungkinkan Anda mengatur warna latar belakang suatu elemen ke gradien. Anda dapat menggunakan gradien dua warna yang sederhana dan sederhana atau Anda bisa keluar dengan menggunakan banyak penghentian warna dan berbagai tingkat opacity di seluruh gradien. Gradien dapat berupa linier atau radial dan membuat efek visual yang secara visual kaya seperti gradien dalam teknologi lain seperti SVG.

Transisi dan animasi

- CSS3 memiliki fitur menarik lainnya yang disebut transisi yang menyediakan cara untuk mengontrol kecepatan animasi saat Anda bertransisi dari satu nilai properti CSS ke yang lain. Misalnya, Anda dapat menghidupkan ketinggian elemen dari nol piksel menjadi seratus piksel untuk mengungkapkan isi elemen. Animasi CSS3 memiliki spesifikasi sendiri dan mereka memungkinkan Anda membuat kerangka kunci untuk mengontrol animasi dan properti yang memungkinkan Anda untuk mengontrol waktu, durasi, dan perulangan animasi.

CSS3 vs. CSS: Bagan Perbandingan

Ringkasan CSS3 VS. CSS

CSS3, dalam segala hal, adalah penerus yang layak yang berisi fitur baru yang menarik untuk membantu usaha desain web Anda. Ini memiliki banyak fitur kuat yang membuat desain web Anda berfungsi lebih sederhana, lebih mudah dan fleksibel dari sebelumnya. CSS3 tidak hanya memberi pengguna sejumlah besar fitur baru yang menarik untuk dimainkan, tetapi lebih banyak untuk memberi pengguna cara yang lebih fleksibel untuk menyelesaikan masalah yang ada. Sekarang ada lebih dari 40 modul di CSS3 pada berbagai tahap penyelesaian dan dukungan browser. Untuk satu, CSS3 menampilkan seluruh kotak alat seleksi canggih yang memungkinkan Anda memilih elemen yang lebih spesifik untuk penataan.