İK etiketleri ile web sayfalarında ilginç görünümlü çizgiler yapmak
Web sitelerinize yatay, ayırıcı tarzı çizgiler eklemeniz gerekiyorsa, birkaç seçeneğiniz vardır. Bu satırların gerçek resim dosyalarını sayfanıza ekleyebilirsiniz, ancak tarayıcınızın bu dosyaları almasını ve yüklemesini gerektirir; bu da sitenin performansını olumsuz etkileyebilir.
CSS border özelliğini, ayırıcı hattınızı etkili bir şekilde oluşturmak için, bir elemanın üstünde veya altında çizgiler olarak hareket eden kenarlıklar eklemek için kullanabilirsiniz.
Son olarak, yatay kural için HTML öğesini kullanabilirsiniz.
Yatay Kural Elemanı
Bir web sayfasına herhangi bir öğe eklediyseniz, muhtemelen bu satırların görüntülenme şeklinin ideal olmadığını keşfettiniz. Bu, sitenizin nasıl görünmesini istediğinizle uyumlu olacak şekilde, bu öğelerin görsel görünümünü ayarlamak için CSS'ye dönmeniz gerektiği anlamına gelir.
Temel bir İK etiketi, tarayıcının görüntülemek istediği şekilde görüntülenir. Modern tarayıcılar genellikle% 100 genişliğe, 2px yüksekliğe ve çizgiyi oluşturmak için siyah bir 3D sınırına sahip eğilmemiş İK etiketlerini görüntüler.
İşte standart bir İK elemanının bir örneği ya da bu görüntüde unstyled HR'nin modern tarayıcılarda nasıl göründüğünü görebilirsiniz.
Genişlik ve Yükseklik Tarayıcılar Boyunca Tutarlı
Web tarayıcıları arasında tutarlı olan tek stiller genişlik ve stillerdir. Bunlar, hattın ne kadar büyük olacağını tanımlar. Genişlik ve yüksekliği tanımlamazsanız, varsayılan genişlik% 100'dür ve varsayılan yükseklik 2px'dir.
Bu örnekte, genişlik ana öğenin% 50'sidir (aşağıdaki örneklerin hepsinin satır içi stillerini içerdiğini unutmayın. Bir üretim ayarında, bu stiller aslında tüm sayfalarınızda yönetim kolaylığı için bir harici stil sayfasında yazılır):
tarzı = "genişliği: 50%;">
Ve bu örnekte yükseklik 2emdir:
style = "height: 2em;">
Sınırların Değiştirilmesi Zorlu Olabilir
Modern tarayıcılarda tarayıcı sınırı ayarlayarak çizgiyi oluşturur. Sınırı stil özelliği ile kaldırırsanız, satır sayfada kaybolur. Gördüğünüz gibi (iyi, satırlar görünmeyecek gibi bir şey görmeyeceksiniz) bu örnekte:
style = "kenarlık: yok;">
Kenarlık boyutunu, rengini ve stilini ayarlamak çizginin farklı görünmesini sağlar ve tüm modern tarayıcılarda aynı etkiye sahiptir. Örneğin, bu gösterimde sınır kırmızı, kesikli ve 1 piksel genişliğindedir:
style = "kenarlık: 1 piksel kesikli # 000;">
Ancak, kenarlığı ve yüksekliği değiştirirseniz, stilleri modern tarayıcılarda olduğundan çok eski tarayıcılarda biraz farklı görünür. Bu örnekte gördüğünüz gibi, IE7'de ve altında (Microsoft'un desteklediği ve artık Microsoft tarafından desteklenmeyen bir tarayıcı) görüntülediğiniz gibi, diğer tarayıcılarda (IE8 ve üstü dahil) görüntülenmeyen eğimli bir iç çizgi var. :
stil = "yükseklik: 1,5em; genişlik: 25em; kenarlık: 1px katı # 000;">
Bu eski tarayıcılar, bugün daha çok modern seçeneklerle değiştirildikleri için, günümüzde web tasarımında bir endişe konusu değil.
Arka Plan Resmi ile Dekoratif Bir Çizgi Yapın
Bir renk yerine, HR'niz için arka plan görüntüsü tanımlayabilirsiniz, böylece tam istediğiniz gibi görünür, ancak yine de biçimlendirmenizde semantik olarak görüntülenir.
Bu örnekte, üç dalgalı çizgiden oluşan bir görüntü kullandık. Tekrarlama olmadan arka plan resmi olarak ayarlayarak, kitaplarda gördüğünüz gibi görünen içeriğe bir ara verir:
style = "height: 20px; background: #fff url (aa010307.gif) no-repeat kaydırma merkezi; kenarlık: yok;">
İK Elemanlarının Dönüşümü
CSS3 ile satırlarınızı daha da ilginç hale getirebilirsiniz. HR elemanı geleneksel olarak yatay bir çizgidir, ancak CSS dönüşümü özelliği ile nasıl göründüklerini değiştirebilirsiniz. HR elemanındaki favori dönüşüm, dönüşü değiştirmektir.
İK elementinizi sadece biraz diyagonal olacak şekilde döndürebilirsiniz:
hr {
-moz-dönüşümü: döndür (10deg);
-webkit-dönüşümü: döndür (10deg);
-o-dönüşümü: döndür (10deg);
-ms-dönüşümü: döndür (10deg);
dönüşümü: döndür (10deg);
}
Ya da tamamen dikey olacak şekilde döndürebilirsiniz:
hr {
-moz-dönüşümü: döndür (90deg);
-webkit-dönüşümü: döndür (90deg);
-o-dönüşümü: döndür (90deg);
-ms-dönüşümü: döndür (90deg);
dönüşümü: döndür (90deg);
}
Bunun, belgedeki geçerli konumuna dayanarak İK'yi döndürdüğünü unutmayın, böylece istediğiniz yerde almak için konumlandırmayı ayarlamanız gerekebilir. Bir tasarıma dikey çizgiler eklemek için bunu kullanmanız önerilmez, ancak ilginç bir etki elde etmenin bir yoludur.
Sayfalarınızda Satır Almanın başka bir yolu
Bazı kişilerin İK öğesini kullanmak yerine yaptıkları şey, diğer unsurların sınırlarına güvenmektir. Ancak bazen bir İK, sınırları oluşturmaya çalışmaktan çok daha kullanışlı ve kullanımı daha kolaydır. Bazı tarayıcıların kutu modeli sorunları, daha da zorlayıcı bir sınır oluşturmayı sağlayabilir.