Cara Mengaktifkan CSS3 Border Radius Di Internet Explorer 8

CSS3 memberikan kita kemampuan untuk menciptakan sudut tumpul dengan properti  border-radius . Tap...

CSS3 memberikan kita kemampuan untuk menciptakan sudut tumpul dengan properti border-radius. Tapi seperti yang Anda tahu, fitur baru ini tidak diakui di Internet Explorer 8 (IE8) dan versi yang sebelumnya. Jadi, ketika Anda menerapkan CSS3 Border Radius ke elemen, maka hasilnya masih tetap lancip di bagian tepi.

Cara Mengaktifkan CSS3 Border Radius Di Internet Explorer 8 ... Membuat border radius di Internet Explorer versi terbaru...

Anda mungkin menemukan banyak saran yang berbeda di Internet, agar Anda mengabaikan IE8. Anda tentu dapat melakukannya. Tapi jika Anda bekerja pada sebuah situs web untuk lembaga pemerintah atau bank, Anda mungkin tidak memiliki pilihan lain, Anda masih harus membuat website terlihat bagus seperti dalam browser modern, yang mencakup kemampuan untuk menerapkan CSS3 Border Radius

Jika Anda benar-benar harus membuat website Anda support di IE8 ke bawah, anda bisa bisa menerapkan tips berikut ini.

CSS3Pie

CSS3Pie adalah semacam polyfill untuk fitur CSS3 dekoratif. Selain CSS3 Border Radius yang kita akan bahas dalam artikel ini, CSS3Pie juga mendukung Box Shadow dan Gradien, meskipun itu terbatas pada tipe Linear Gradient. 

Download CSS3Pie (di sini). Masukan ke dalam direktori proyek Anda. Seperti Anda juga dapat melihat dari gambar di bawah, saya telah membuat satu stylesheet serta satu file HTML.

Belajar CSS3 di Internet Explorer

Buka stylesheet dalam kode editor dan pilih salah satu elemen dalam file HTML dengan sudut membulat, seperti:
[.border-radius {
 height: 100px;
 width: 100px;
 background-color: #2ecc71;
 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;
}
]

Sebagai lebar elemen dan tinggi keduanya 100px, dan border-radius diatur ke 50px, elemen akan menjadi lingkaran:

membuat border, table, kolom, tinggi lebar di css3 Internet Explorer

Dalam IE8, seperti yang kita harapkan, itu akan tetap menjadi persegi, tapi jangan khawatir.

Cara membuat kotak persegi di Internet Explorer secara manual

Untuk mengaktifkan efek sudut bulat, masukkan baris ini: behavior: url(css/pie.htc); seperti itu.
[.border-radius {
 height: 100px;
 width: 100px;
 background-color: #2ecc71;
 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 border-radius: 50px;
 behavior: url(css/pie.htc);
}]

Perhatikan bahwa path file di url() harus berupa path absolut atau relatif ke file HTML. Anda juga dapat menambahkan baris ini di file terpisah. 

Anda mungkin memiliki stylesheet yang digunakan untuk Internet Explorer. Anda dapat menempatkan behavior: url(css/pie.htc); dalam file itu, tapi pastikan bahwa itu dinyatakan dalam selector CSS yang sama.
[/* declared in ie.css */
.border-radius {
 behavior: url(css/pie.htc);
}]

Refresh halaman di IE8. lihat hasilnya sudut sudah tumpul, dan ini harus bekerja di IE7 atau kebawah juga.

Pemecahan Masalah 
Internet Explorer mungkin akan bertingkah aneh. Jika ini tidak berhasil (mungkin sudut tumpul tidak berlaku), menambahkan properti position dan zoom  harusnya akan memecahkan masalah:
[<style>
.border-radius {
 behavior: url(<?php echo get_template_directory_uri() ;?>/css/pie.htc);
 position: relative;
    zoom: 1;
}
</style>]

Penggunaan CSS3 Pie di WordPress

Anda juga memanfaatkan pie.htc dalam situs web untuk memungkinkan CSS3 di IE8. Pada tahap ini, Anda siap untuk mengubah website menjadi tema berfungsi WordPress. Dalam hal ini, seperti WordPress adalah dinamis, di mana setiap halaman dapat melayani tingkat URL yang berbeda, kita harus menentukan path absolut. 
Anda juga dapat mengubah jalur dalam CSS seperti ini:
[.border-radius {
 behavior: url(http://localhost/{website}/wp-content/themes/{the_theme}/css/pie.htc);
 position: relative;
 zoom: 1;
}
]

Atau menambahkan gaya internal di header.php, seperti berikut:
[<style>
.border-radius {
 behavior: url(<?php echo get_template_directory_uri() ;?>/css/pie.htc);
 position: relative;
 zoom: 1;
}
</style>]

Setelah CSS3 Border Radius bekerja di IE8, hal tersebut karena CSS3Pie. 

COMMENTS

Nama

Inspiration Photografer Photoshop Software Video Tutorial Web Design
false
ltr
item
Desain Grafis, Tutorial dan Inspirasi : Cara Mengaktifkan CSS3 Border Radius Di Internet Explorer 8
Cara Mengaktifkan CSS3 Border Radius Di Internet Explorer 8
https://4.bp.blogspot.com/-y5VU7HsBDiQ/Uz-l0oXyMQI/AAAAAAAAAI0/n_viz3DqbGQ/s1600/ie-corner-cover.jpg
https://4.bp.blogspot.com/-y5VU7HsBDiQ/Uz-l0oXyMQI/AAAAAAAAAI0/n_viz3DqbGQ/s72-c/ie-corner-cover.jpg
Desain Grafis, Tutorial dan Inspirasi
http://www.javagrafis.com/2014/04/cara-mengaktifkan-css3-border-radius-di.html
http://www.javagrafis.com/
http://www.javagrafis.com/
http://www.javagrafis.com/2014/04/cara-mengaktifkan-css3-border-radius-di.html
true
917012177411184077
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy