Memahami bagaimana IFrames bekerja dalam desain situs web
Ketika Anda menanamkan elemen di HTML Anda, Anda memiliki dua peluang untuk menambahkan gaya CSS ke dalamnya:
- Anda dapat menata IFRAME itu sendiri.
- Anda dapat menata halaman di dalam IFRAME (dalam kondisi tertentu).
Menggunakan CSS untuk Menata Elemen IFRAME
Hal pertama yang harus Anda pertimbangkan saat menata iframe Anda adalah IFRAME itu sendiri. Meskipun sebagian besar browser menyertakan iframe tanpa banyak gaya ekstra, namun tetap disarankan untuk menambahkan beberapa gaya agar tetap konsisten.
Berikut beberapa gaya CSS yang selalu saya sertakan di iframes saya:
- margin: 0;
- padding: 0;
- border: none;
- lebar: nilai ;
- tinggi: nilai ;
Dengan lebar dan tinggi diatur ke ukuran yang pas di dokumen saya. Berikut ini contoh bingkai tanpa gaya dan satu dengan hanya gaya dasar. Seperti yang Anda lihat, gaya ini sebagian besar hanya menghapus perbatasan di sekitar iframe, tetapi mereka juga memastikan bahwa semua browser menampilkan iframe dengan margin, padding, dan dimensi yang sama.
HTML5 menyarankan Anda untuk menggunakan properti overflow untuk menghapus bilah gulir, tetapi itu tidak dapat diandalkan. Jadi jika Anda ingin menghapus atau mengubah bilah gulir, Anda harus menggunakan atribut gulir pada iframe Anda juga. Untuk menggunakan atribut gulir, tambahkan atribut seperti lainnya dan kemudian pilih salah satu dari tiga nilai: ya, tidak, atau otomatis. ya memberitahu browser untuk selalu menyertakan scroll bar bahkan jika tidak diperlukan. tidak ada kata untuk menghapus semua scroll bar apakah diperlukan atau tidak.
auto adalah default dan termasuk scroll bar ketika mereka dibutuhkan dan menghapusnya ketika mereka tidak.
Berikut ini cara mematikan scrolling dengan atribut scrolling:
scrolling = "no" >
Ini adalah iframe.
Untuk mematikan bergulir di HTML5 Anda seharusnya menggunakan properti overflow. Tetapi seperti yang Anda lihat pada contoh ini, ia tidak berfungsi dengan baik di semua browser.
Beginilah cara Anda mengaktifkan gulir sepanjang waktu dengan properti luapan:
style = "overflow: scroll;" >
Ini adalah iframe.
Tidak ada cara untuk mematikan pengguliran sepenuhnya dengan properti luapan.
Banyak desainer menginginkan iframes mereka untuk berbaur dengan latar belakang halaman yang ada sehingga pembaca tidak tahu bahwa iframes ada di sana. Tetapi Anda juga dapat menambahkan gaya untuk membuatnya menonjol. Menyesuaikan batas sehingga iframe lebih mudah ditampilkan. Cukup gunakan properti bergaya perbatasan (atau properti batas-atas, kanan-perbatasan, batas-kiri, dan batas-bawah yang berbatasan) untuk menata batas-batasnya:
iframe {
border-top: # c00 1px bertitik;
border-right: # c00 2px dotted;
kiri-batas: # c00 2px titik-titik;
border-bottom: # c00 4px dotted;
}
Tetapi Anda tidak harus berhenti dengan menggulir dan membatasi untuk gaya Anda. Anda dapat menerapkan banyak gaya CSS lainnya ke iframe Anda. Contoh ini menggunakan gaya CSS3 untuk memberi iframe bayangan, sudut membulat, dan memutarnya 20 derajat.
iframe {
margin atas: 20px;
margin-bottom: 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
box-shadow: 4px 4px 14px # 000;
-moz-transform: rotate (20deg);
-webkit-transform: rotate (20deg);
-o-transform: memutar (20deg);
-ms-transform: rotate (20deg);
filter: progid: DXImageTransform.Microsoft.BasicImage (rotasi = .2);
}
Styling Konten Iframe
Styling isi iframe sama seperti menata halaman web lainnya. Tetapi, Anda harus memiliki akses untuk mengedit halaman . Jika Anda tidak dapat mengedit halaman (misalnya, di situs lain).
Jika Anda dapat mengedit halaman, maka Anda dapat menambahkan style sheet eksternal atau gaya tepat di dokumen seperti Anda akan menata halaman web lain di situs Anda.