CSS
CSS Position ile Konumlandırma : Static, Relative,Absolute,Fixed,Sticky
HTML’de normal şartlarda divler yani bizim web sitemizin blokları birbirlerini takip eden akışa sahiptir. Biz position etiketi ile konumlandırmayı manuel olarak ayarlayabiliyoruz. Bu etiket position ile bir kaç yapı öğreneceğiz. Bunlar ; Relative Absolute Fixed Static Sticky Ayrıca top bottom left right gibi yönleride yardımcı eleman olarak kullanıyoruz. <!DOCTYPE html> <html> <head> <title>Position</title> <meta charset="utf8"> <style type="text/css"> .bir { background-color: yellow; width: 400px; position: relative; bottom: 10px; height: 100px; } .iki { background-color: red; width: 400px; height: 100px; } .uc{ background-color: green; position: fixed; width: 400px; height: 100px; } .ana { background-color: blue; width: 600px; position: abs...
HTML Position Sticky Örneği: Telefon ile Arama Butonu
Özellikle mobil gösterimlerde size büyük avantajlar sağlayacak telefon ile ara ve whatsapp iletişim butonu örneğini hazırladım. HTML ve CSS kodlarını kullanarak kendi kullanımınıza uygun olarak düzenleyebilirsiniz. Bu buton dijital pazarlama çalışmalarında Sizlere büyük avantaj sağlayacaktır. Dönüşüm ve etkileşim oranını arttırdığı herkes tarafından bilinen bu elementi full width olarak kullanmanızı tavsiye ederim. <html> <head> <title>Yapışkan Buton Yapımı</title> <style type="text/css"> .telefon { background-color:red; position: sticky; position: -webkit-sticky; bottom:0; width: 100%; margin:0; } .telefon h4 { padding:10px; } .telefon h4 a { text-decoration: none; color: white; } </style> </head> <body> <h1>Yapışkan Buton Kullanarak T...
HTML’de Açılır Buton Details ve Summary
HTML’de details ve summary bloğu ile açılır sayfa bölümleri oluşturabiliyoruz. Sıkça sorulan sorular (f.a.q) gibi kısımlarda UI ve UX çalışmalarında işlevselliği arttırmak için bu yapıyı sık kullanırız. Ayrıca SEO çalışmalarında aşırı içeriği sayfada daha derli toplu hale getirmek için de bu yapıyı sık sık kullanıyorum. <details> <summary>Açılır buton</summary> <p>Bölüm açıldığında gösterilecek yazı burada yer alacak.</p> </details> Önizleme Açılır buton Bölüm açıldığında gösterilecek yazı burada yer alacak. Şimdi Açılır bölümümüze biraz stil kazandıralım.Bunun için CSS kodları yazmamız gerektiğini biliyoruz. Dilersek html içerisinde style tagi ile de halledebiliriz. Bunun için; details {} ve summary {} etiketleri lerine, background-color: c...
- 1
- 2
