5 Efek CSS3 Keren Anda Akan Melihat Lebih Dari

Iklan

CSS3 (dikombinasikan dengan kekuatan HTML5) dengan cepat didukung oleh semua browser utama (baca - apa pun kecuali Internet Explorer), jadi saya pikir sekarang akan menjadi saat yang tepat untuk melihat beberapa efek CSS keren yang dapat kami capai dengan menggunakan kekuatan browser Anda dan sedikit kode CSS. Anda harus dapat melihat semua efek yang diperlihatkan dalam artikel ini jika Anda menggunakan browser Chrome, Safari, atau Firefox terbaru.

Pertama - Apa itu CSS?

Jika Anda membaca artikel ini karena Anda tertarik tetapi tidak tahu apa arti CSS, izinkan saya menjelaskan dengan cepat. CSS adalah bahasa pengkodean yang digunakan untuk menghias halaman web. Itu singkatan Cnaik Style Sheet, dan pada dasarnya hanya menambah gaya dan bakat ke situs. Situs web tentu dapat dibaca tanpa CSS mereka, tetapi mereka mengerikan seperti semua situs web kembali pada tahun 1995. Sementara file HTML menggambarkan struktur dan konten tekstual dari suatu halaman, CSS membuatnya menampilkannya dengan cara seperti perancang dimaksudkan, dan tentukan semuanya dari tata letak halaman, ukuran teks dan warna, dan sekarang sejumlah efek mewah dengan pengantar dari CSS3.

Di masa lalu, mencapai efek yang sama seperti yang dijelaskan dalam artikel ini akan berarti mengunduh CSS besar atau bahkan grafik yang lebih besar. Sekarang, CSS bisa menjelaskan kepada browser Anda bagaimana halaman itu ingin dilihat, dan browser akan menangani pemrosesan. Sepertinya saya memberi Anda rencana untuk membangun rumah sendiri alih-alih menjual seluruh rumah - ini jauh lebih murah!

Sudut Bulat

Kode untuk sudut-sudut bulat sangat mudah:

.box_round {-moz-border-radius: 20px; / * FF1 + * / -webkit-border-radius: 20px; / * Saf3-4, iOS 1+, Android 1.5+ * / radius batas: 20px; / * Opera 10.5, IE9, Saf5, Chrome, FF4 * /}

Bayangan teks

Berikut kode untuk beberapa bayangan teks:

.box_textshadow {text-shadow: 1px 1px 3px # 888; / * FF3.5 +, Opera 9+, Saf1 +, Chrome * / }

Gradien

Berikut kode untuk gradien CSS:

.box_gradient {background-color: # 3f9fe3; background-image: -moz-linear-gradient (atas, # 3f9fe3, #white); / * FF3.6 * / latar belakang: -moz-linear-gradient (atas, # 1E5799 0%, # 207cca 26%, # 2989D8 39%, #FFFFFF 100%); / * firefox * / background-image: -ms-linear-gradient (atas, # 3f9fe3, #white); / * IE10 * / background-image: -o-linear-gradient (atas, # 3f9fe3, #white); / * Opera 11.10+ * / background-image: -webkit-gradient (linear, kiri atas, kiri bawah, dari (# 3f9fe3), hingga (#white)); / * Saf4 +, Chrome * / background-image: -webkit-linear-gradient (atas, # 3f9fe3, #white); / * Chrome 10+, Saf5.1 + * / background-image: linear-gradient (atas, # 3f9fe3, #white); filter: progid: DXImageTransform. Microsoft.gradient (startColorStr = '# 3f9fe3', EndColorStr = '# white'); / * IE6 – IE9 * / }

Rotasi

Di sini kode untuk memutar sesuatu:

.box_rotate {-moz-transform: rotate (7.5deg); / * FF3.5 + * / -o-transform: rotate (7.5deg); / * Opera 10.5 * / -webkit-transform: rotate (7.5deg); / * Saf3.1 +, Chrome * / -ms-transform: rotate (7.5deg); / * IE9 * / transform: rotate (7.5deg); filter: progid: DXImageTransform. Microsoft Matriks (/ * IE6 – IE9 * / M11 = 0.9914448613738104, M12 = -0.13052619222005157, M21 = 0,13052619222005157, M22 = 0,9914448613738104, sizingMethod = 'auto expand'); zoom: 1; }

Animasi

Anda memerlukan kode transisi seperti ini ke elemen apa pun yang ingin Anda ubah. Anda juga perlu menggunakan beberapa kelas CSS semu (seperti: arahkan kursor untuk mengubah properti yang ingin Anda animasikan, seperti warna, ukuran, atau rotasi)

.box_transition {-moz-transition: all 0.5s easy-out; / * FF4 + * / -o-transisi: semua kemudahan 0,5s; / * Opera 10.5+ * / -webkit-transisi: semua kemudahan 0.5s; / * Saf3.2 +, Chrome * / -ms-transisi: semua kemudahan 0.5s; / * IE10? * / transisi: semua kemudahan 0,5s; } 

Ketidakcocokan Lintas Browser

Meskipun sebagian besar browser modern mendukung semua CSS3 dengan beberapa cara, beberapa masih memerlukan beberapa kode atau peretasan yang sedikit berbeda untuk membuatnya bekerja dengan penerapan standar mereka yang khusus. Dalam kode di atas misalnya, Anda akan melihat banyak contoh -moz- atau -webkit- mendahului beberapa properti CSS, yang terkait dengan browser berbasis Mozilla atau Webkit. Menulis baris tambahan ini bisa jadi menyusahkan, jadi periksalah generator css3 untuk menulisnya untuk Anda.

Kesimpulan

Web akan menjadi jauh lebih menarik dengan ekstensi CSS3 dan HTML5 baru. Memang, kita akan melihat semburan lain dari teks yang berkedip dan rasio whiz-bang yang tinggi terhadap konten nyata (seperti yang kami lakukan saat GIF animasi pertama kali "ditemukan") tetapi dalam jangka panjang kita akan belajar cara menggunakan alat CSS3 untuk membuat web lebih menarik antarmuka. Dan hei, kamu selalu bisa mematikan semuanya!

Jika Anda seorang desainer atau pengembang web sendiri, ingatlah bahwa CSS3 seharusnya tidak menjadi satu-satunya pilihan. Jika situs Anda tidak akan berfungsi tanpa CSS3, Anda belum menggunakannya dengan benar. CSS harus digunakan untuk meningkatkan pengalaman, bukan fungsionalitas program.