IFrames'ın web sitesi tasarımında nasıl çalıştığını anlama
HTML'nize bir öğe gömdüğünüzde, CSS stillerini eklemek için iki seçeneğiniz vardır:
- IFRAME kendisini stil edebilirsiniz.
- Sayfayı IFRAME içinde stil uygulayabilirsiniz (belirli koşullar altında).
IFRAME Öğesini Stillemek için CSS Kullanımı
Iframe'lerinizi şekillendirirken dikkate almanız gereken ilk şey IFRAME'in kendisidir. Çoğu tarayıcıda fazladan stil içermeyen iframe'ler yer alırken, onları tutarlı tutmak için bazı stiller eklemek yine de iyi bir fikirdir.
Burada iframe'lerime her zaman eklediğim bazı CSS stilleri:
- kenar boşluğu: 0;
- dolgu malzemesi: 0;
- kenarlık: yok;
- genişlik: değer ;
- yükseklik: değer ;
Belgenime uyan boyut ve genişliğe ayarlı. İşte stilleri olmayan bir çerçevenin örnekleri ve sadece tarzın temelleri. Gördüğünüz gibi, bu stiller çoğunlukla iframe çevresindeki kenarlığı kaldırırlar, ancak aynı zamanda tüm tarayıcıların aynı kenar boşluklarına, dolgulara ve boyutlara sahip iframe görüntülediğinden emin olurlar.
HTML5 , kaydırma çubuklarını kaldırmak için taşma özelliğini kullanmanızı önerir, ancak bu güvenilir değildir. Bu nedenle, kaydırma çubuklarını kaldırmak veya değiştirmek isterseniz, iframe'inizdeki kaydırma özelliğini de kullanmalısınız. Kaydırma özelliğini kullanmak için, onu başka bir özellik gibi ekleyin ve ardından üç değerden birini seçin: evet, hayır veya otomatik. evet, tarayıcıya, ihtiyaç duyulmasa bile, her zaman kaydırma çubuklarını dahil etmesini söyler. Hayır, gerekip gerekmediğini tüm kaydırma çubuklarını kaldırmak için söyler.
auto varsayılan değerdir ve gerektiğinde kaydırma çubuklarını içerir ve olmadıklarında bunları kaldırır.
Kaydırma özniteliğiyle kaydırma işlemini nasıl kapatacağınız aşağıda açıklanmıştır:
kaydırma = "hayır" >
Bu bir iframe.
HTML5'te kaydırmayı kapatmak için taşma özelliğini kullanmanız gerekir. Ancak bu örneklerde de görebileceğiniz gibi, henüz tüm tarayıcılarda güvenilir şekilde çalışmıyor.
Taşma özelliğiyle her zaman kaydırma işlemini nasıl açacağınız aşağıda açıklanmıştır:
style = "taşma: kaydırma;" >
Bu bir iframe.
Taşma özelliğiyle kaydırma işlemini tamamen kapatmanın bir yolu yoktur .
Birçok tasarımcı, iframe'lerinin, bulundukları sayfanın arka planıyla uyum içinde olmalarını ister, böylece okuyucuların iframe'lerin bile orada olduğunu bilmemeleri gerekir. Ancak onları öne çıkarmak için stilleri de ekleyebilirsiniz. Kenarların ayarlanması, iframe'in daha kolay ortaya çıkması için kolaydır. Kenarlıklara stil vermek için kenarlık stili özelliğini (veya ilgili kenarlık üstü, sınır-sağ, kenarlık-sol ve kenar-alt özellikleriyle) kullanmanız yeterlidir:
iframe {
kenarlık: # c00 1px noktalı;
border-right: # c00 2px noktalı;
sınır-sol: # c00 2px noktalı;
kenar-alt: # c00 4px noktalı;
}
Ama stilleriniz için kaydırma ve kenarlıklarla durmamalısınız. Iframe'inize birçok CSS stili uygulayabilirsiniz. Bu örnek iframe bir gölge, yuvarlatılmış köşeler vermek ve 20 derece döndürmek için CSS3 stillerini kullanır.
iframe {
kenar boşluğu: 20px;
kenar boşluğu: 30px;
-moz-sınır yarıçapı: 12px;
-webkit-sınır yarıçapı: 12px;
sınır yarıçapı: 12px;
-moz-box-shadow: 4px 4px 14px # 000;
-webkit-box-shadow: 4px 4px 14px # 000;
kutu gölge: 4px 4px 14px # 000;
(20deg) döndürmek;: -moz-transform
-webkit-transform: döndürme (20deg);
-o-dönüşümü: döndürme (20deg);
(20deg) döndürmek;: -MS-transform
Filtre: progid: DXImageTransform.Microsoft.BasicImage (dönüşüm = .2);
}
Iframe İçeriklerini Şekillendirmek
Bir iframe içeriğini şekillendirmek tıpkı diğer web sayfalarını şekillendirmek gibidir. Ancak, sayfayı düzenlemek için erişiminiz olmalıdır . Sayfayı düzenleyemiyorsanız (örneğin, başka bir sitede).
Sayfayı düzenleyebiliyorsanız, tıpkı sitenizdeki başka bir web sayfasını stil gibi yaptığınız gibi , belgeye doğrudan bir harici stil sayfası veya stil ekleyebilirsiniz.