CSS3 ile Çoklu Sütun Düzeni (Dergi-Benzeri)
Genel olarak, insanlar son derece uzun içerik okurken izlerini kaybedeceklerdir. Bu nedenle, dergi ve gazete gibi yazılı ortamlarda, içeriğin kolay okunması için birden fazla sütuna bölünmesi.
Web'de bir sütun oluşturmak tamamen farklı bir hikaye. Bu oldukça zor. Aslında, çok uzun zaman önce içeriği el ile bir bölüme ayırmanız gerekebilir. divs ve sağa veya sola doğru kaydırın, sonra genişliği, dolguyu, kenar boşluğunu, kenarlıkları vb..
Ancak, işler artık çok daha basit CSS3 Çoklu Sütun Modülü. Adından da anlaşılacağı gibi, bu modül içeriği gazete veya dergilerde gördüğümüz sütunlu düzene bölmemize izin veriyor.
Tarayıcı Desteği
Şu anda tüm tarayıcılarda birden fazla sütun desteklenmektedir - Firefox 2+, Chrome 4+, Safari 3.1+ ve Opera 11.1 - önceden belirtildiği gibi, Internet Explorer hariç, ancak bir sonraki sürüm IE10 bu Modül için destek vermeye başlamış görünüyor..
Diğer tarayıcılar için çalışması için Firefox’un -moz- öneki, Chrome ve Safari’nin -webkit- önek. Opera herhangi bir ön ek gerektirmediğinden sadece resmi özellikleri kullanabiliriz..
Kaynak: CSS3 Çoklu sütun düzenini ne zaman kullanabilirim??
Birden Çok Sütun Oluştur
Sütunları oluşturmadan önce, HTML5’e sarılmış olan gösteri için bazı metin paragrafları hazırladık. takip eden etiket;
Lorem ipsum dolor amet sitect, adipiscing elit komplo şefi. Nunc libero magna, venenatis quis aliquet et, rutrum augue'de. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse nulla tortor değil. Quisque commodo ornare mi, oturmak amet aliquet justo bibendum non. Tamsayı bibendum convallis sapien, orc placerat amet tincidunt oturmak. //ve bunun gibi
… Ve için genişliği belirtin 600px stil sayfasından bu kadar.
Şimdi sütunları oluşturmaya başlayalım..
Aşağıdaki örnekte, içeriği ikiye böleceğiz iki sütun ile sütun sayısı özelliği. Bu özellik, tarayıcıya içeriği belirtilen sayıya göre sütunlara dönüştürmesini ve tarayıcının her sütun için uygun genişliğe karar vermesine izin verecektir..
makale -webkit-column-count: 2; -moz sütunlu-sayısı: 2; Sütun sayısı: 2;
Sayımla tanımlanmasının yanı sıra, kullanılarak genişlik belirtilerek sütunlar oluşturulabilir. sütun genişliği kaç sütun üretilmesi gerektiğine karar vermek için tarayıcıyı terk etmek.
Bu örnekte, sütun genişliğini belirtiyoruz 150px, içeriğin üç sütuna bölünmesiyle sonuçlandı.
makale -moz-sütun genişliği: 150 piksel; -webkit-column-width: 150px; sütun genişliği: 150 piksel;
Spec belirtildiği gibi. Kolonun gerçek genişliği mevcut boşluğa bağlı olarak belirtilen kolon genişliğinden daha geniş veya daha dar olabilir. Ayrıca, genişlik değeri açıkça belirtilmezse, “Oto” varsayılan olarak alınacak, bu da demek olabilir “sütun yok”.
Sütun Boşluğu
Sütun Boşluğu Her sütunu ayıran boşlukları tanımlar. Aralık değeri em veya px, ancak şartnamede belirtildiği gibi değer negatif olamaz. Aşağıdaki örnekte aradaki boşluğu belirtiyoruz 30px, sütunların arasındaki boşluklar biraz daha geniş görünür.
makale -webkit-column-gap: 30 piksel; -moz-sütun boşluğu: 30px; sütun aralığı: 30 piksel;
Sütun Kuralı
Sütun arasına kenarlık eklemek istiyorsanız, kolon-kural çok benzeyen mülk, sınır özelliği. Öyleyse diyelim, sütun arasına noktalı bir kenarlık koymak istiyorsak, yazabiliriz;
makale -moz-column-rule: 1px noktalı #ccc; -webkit-column-rule: 1px noktalı #ccc; column-rule: 1px noktalı #ccc;
Sütun Açıklığı
Bu özellik oldukça benzer çalışır colspan içinde tablo etiket. Bu özelliğin ortak uygulaması, içeriğin başlığını tüm sütunlara yaymaktır. İşte bir örnek.
makale h1 -webkit-column-span: tümü; Kolon boyu: Tüm;
Yukarıdaki örnekte h1 Tüm sütunlara yayılmak için ve sütun yayılımı belirtilmişse, 1 varsayılan olarak alınacaktır. Ne yazık ki bu mülk, bu yazının yapıldığı sırada, sadece Opera ve Chrome'da çalışır..
Son sözler
Şimdilik hepsi bu kadar, CSS3 ile çoklu sütunlar oluşturmak için gerekli tüm temel şeyleri yaptık ve başlangıçta da belirttiğimiz gibi, bu modül modern tarayıcılarda çok iyi çalışıyor ancak henüz Internet Explorer'da çalışmıyor.
Sonuçta, şimdi CSS3 ile sütunlar oluşturma konusunda oldukça iyi bir anlayışa sahip olduğunuzu ve deneyler için zamanınız varsa, yöntemlerinizi ve sonuçlarınızı aşağıdaki yorum kutusunda paylaşmaktan çekinmeyin. Bu yazıyı okuduğunuz ve eğlendiğiniz için teşekkür ederiz..
- gösteri
- Kaynak İndir
