Blog
Anasayfa Css Css3 Kolonlama Siste...
Css3 Kolonlama Sistemi
Aykut Erdoğan Tarafından Yazıldı!
2385 Okunma
Css
Merhaba arkadaşlar. Bu makalemizde sizlere css3 ile birlikte gelen bir özelliğe değineceğim. Genel adıyla columns sayesinde gazete ve dergilerdeki gibi metinlerimizi görüntülerken kolonlar ile ayırarak görüntüleyebiliyoruz. Çoklu kolonlarımızı düzenlemek için 8 adet özelliğimiz bulunmaktadır. Bu özellikler vasıtasıyla kolonumuzun yapısını, genişliğini ve kolonlar arası mesafesini düzenleyebiliyoruz.Bu özellikler şunlardır;
» column-count
» column-width
» columns
» column-gap
» column-rule
» column-break ya da break-*
» column-span
» column-fill
Burada column-count, column-width, column-gap, column-rule özellikleri internet explorer dışında tüm yeni nesil tarayıcıların desteklediği özelliklerdir. Columns, column-break yada break-*, column-span ve column-fill gibi özellikleri sadece webkit tabanlı tarayıcılar desteklemektedir. Şimdi kısa bu özelliklerden bahsedelim.

column-count
Kolon sayısını belirtmemizi sağlar.
#kolonlunesne{
width:800px;
column-count:2;
-webkit-column-count:2;
-moz-column-count:2;
}
Tarayıcı Desteği :Chrome 2.0+ | IE 10.0+ | Firefox 1.5+

column-width
Nesnemizi kolonlara bölmek için ikinci bir yöntem diyebiliriz. Belirttiğimiz genişlikte otomatik kolonlar oluşturulur. Dipnot olarak belirtmeliyimki column-width ile column-count aynı anda kullanılabilirler.
#kolonlunesne{
column-width:250px;
-moz-column-width:250px;
-webkit-column-width:250px;
}
Tarayıcı Desteği :Chrome 2.0+ | IE 10.0+ | Firefox 1.5+
Mobil Tarayıcı Desteği :Chrome 36+ | Android 2.1+ | Safari 3.2+

columns
Column-count ve column-width özelliklerini birlikte kullanmamızı sağlar.
#kolonlunesne{
columns: 250px 3;
}
Tarayıcı Desteği :Chrome 2.0+ | IE 10.0+ | Firefox Destek Yok

column-gap
Kolonlar arasına boşluk koymak için kullanılıyor.
#kolonlunesne{
column-gap: 25px;
-webkit-column-gap: 25px;
-moz-column-gap: 25px;
}
Tarayıcı Desteği :Chrome 2.0+ | IE 10.0+ | Firefox 1.5+
Mobil Tarayıcı Desteği :Chrome 36+ | Android 2.1+ | Safari 3.2+

column-rule
Column-rule ile kolonlar arasına çizgi koyabiliyoruz.
#kolonlunesne{
column-rule: 2px solid #333
-webkit-column-rule: 2px solid #333;
-moz-column-rule: 2px solid #3333;
}
Tarayıcı Desteği :Chrome 2.0+ | IE 10.0+ | Firefox 1.5+
Mobil Tarayıcı Desteği :Chrome 36+ | Android 2.1+ | Safari 3.2+

break-before, break-inside ve break-after
break-before : Çoklu kolon özelliği kullanılmış bir nesnenin içindeki bir elemanın öncesinde kolonun bölünmesini veya bölünmemesini sağlar. auto, left, rightalways, avoid-page, avoid-column, avoid, page ve column değerleri ile kullanılmaktadır.
break-inside : Çoklu kolon özelliği kullanılmış bir nesnenin içinde bulunan elementin kolondaki durumunu düzenlemek için kullanılır. auto, avoid-page, avoid, avoid-column değerleri ile kullanılmaktadır.
break-after : Çoklu kolon özelliği kullanılmış bir nesnenin içindeki bir elemanın sonrasında kolonun bölünmesini veya bölünmemesini sağlar.auto, left, right, page, column, always, avoid, avoid-page ve avoid-column değerleri ile kullanılmaktadır.
#kolonlunesne h1{
-webkit-column-break-after:always;
margin:10px 0;
font-size:14px;
}
Tarayıcı Desteği :Chrome 2.0+ | IE 10.0+ | Firefox Destek Yok

column-span
Kolonlarımıza başlıklar koymak istiyorsak ve başlıkları tüm kolonlarımıza yaymak istiyorsak bu özelliği kullanabiliriz. All ve none şeklinde iki değer alır. Yada kolon sayımızı belirterek o kolonu işleme almasını sağlayabiliriz.
#kolonlunesne h1{
column-span:all;
-webkit-column-span:all;
-moz-column-span:all;
}
Tarayıcı Desteği :Chrome 2.0+ | IE 10.0+ | Firefox Destek Yok

column-fill
Çoklu kolon kullanımında tarayıcılar yüksekliklerini otomatik ayarlarlar. Bu özelliği kolon yüksekliklerini ayarlamak için kullanabiliriz. Balance ve auto değerlerini alır.
balance : Her kolonun yüksekliği eşit olacak şekilde ayarlamak için bu özelliği kullanabiliriz.
auto : Kolonları sırayla doldurur. Bu özelliğimiz yükseklik tanımı yapılması halinde işleme alınır. Belirtilen yükseklik değerini göre içeriği doldurur.
#kolonlunesne{
column-fill:auto;
-webkit-column-fill:auto;
-moz-column-fill:auto;
}
Tarayıcı Desteği :Chrome 2.0+ | IE 10.0+ | Firefox Destek Yok

İlerleyen zamanlarda çok kullanacağımız bir özellik olacağına inanıyorum. Sonraki makalelerde görüşmek üzere...
yaklaşık 4 yıl önce
css3, column-count, column-width, column-gap, colu...
Yorumlar
Yorum Yok
 
Yorum Yap
Makalelerden Haberdar Ol
Sponsorlu Bağlantılar
Çok Okunanlar
Jquery ile Veritabanında...
 31195 Okunma
Php ve Ajax ile Sayfa Yen...
 15072 Okunma
Pdo ile Mysql'den Ve...
 10498 Okunma
Php ve Xml ile Dinamik Si...
 10330 Okunma
Javascript ile Saat Yapı...
 9697 Okunma
Son Yorumlar
oguz
teşekkürler dostum.
Mehmet A
Merhaba, Sözlüğer a...
Metin Ersal
Teşekkürler...
Ümit Akdeniz
Çok teşşekür ede...
Ahmet K.
Sözlüğün &cced...
TAKİPTE KALIN!
Mesaj Gönder
Tasarım - Kodlama : Aykut Erdoğan
 
Makale Önizleme
Jquery ile Veritabanından Sayfa Yenilenmeden Veri...
Merhaba arkadaşlar. Bu makalemizde veritabanından sayfamıza çektiğimiz kayıtları yeni kayıt eklendiğinde, silindiğinde ve güncellendiğinde sayfa yenilenmeden otomatik olarak web sayfamızda göstereceğiz. Örnek olarak Facebook ve Twitter'ı verebiliriz. Bu işlemi php ve jquery yardımı ile yapacağız. Şimdi kodlarımıza geçelim. index.php<!DOCTY...
yaklaşık 4 yıl önce | Javascript
Devamı
Makale Önizleme
Php ve Ajax ile Sayfa Yenilenmeden Veritabanına K...
Merhabalar, bu makalemizde ajax ile veritabanına kayıt işlemini anlatacağım. Öncelikle html kodlarla başlayacağız. Sonrasında javascript ve php kodlarımıza geçeceğiz. Şimdi index.php sayfası html kodlarımıza geçelim. <html> <head> <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" /> <title> Ajax Kay...
yaklaşık 5 yıl önce | Javascript
Devamı
Makale Önizleme
Pdo ile Mysql'den Veri Çekme ve Listel...
Merhaba arkadaşlar. Bu makalemizde pdo ile mysql veritabanımızdan veri çekip listeleyeceğiz. Tekli veri çekmeyi ve çoklu veri çekmeyi anlatacağım. Öncelikle bağlantı kodlarımızı yazacağız. baglanti.phptry{ $db = new PDO('mysql:host=localhost;dbname=pdokayit','root','root'); $db->exec('SET CHARACTER SET utf8...
yaklaşık 4 yıl önce | Php
Devamı
Makale Önizleme
Php ve Xml ile Dinamik Site Haritası Oluşturma
Merhaba arkadaşlar. Bu makalemizde sitemizin sayfalarını arama motorlarına sunan sitemap sayfamızı yapacağız. Alışılmışın aksine bu sayfamızı dinamik olarak yani içerik girildikçe kendi kendini güncelleyecek şekilde yapacağız. Öncelikle mantığını anlatayım. Sadece xml ile bunu yapmamız mümkün olmadığından php'den yardım alacağız...
yaklaşık 6 yıl önce | Php
Devamı
Makale Önizleme
Javascript ile Saat Yapımı
Merhaba arkadaşlar. Bu makalemizde javascript yardımıyla saat yapacağız. Mantığını anlatalım öncelikle. O anki saati, dakikayı ve saniyeyi javascript yardımı ile alıyoruz ve bir nesneye atıyoruz. Bu kadar basit. Şimdi kodlarımıza geçelim. <html> <head> <title>Saat</title> <style type="text/css"> #div { f...
yaklaşık 5 yıl önce | Javascript
Devamı
Makale Önizleme
Php E-Posta Filtreleme Fonksiyonu
Merhaba arkadaşlar. Bu yazımda sizlere bir e-posta adresinin geçerli bir mail adresi olup olmadığının kontrolünü nasıl yapacağımızı anlatacağım.Bunun için kendimiz bir fonksiyon yazmayacağız, Php'de var olan bir fonksiyonu kullanacağız. Php 5.2 ve sonraki sürümlerinde geçerli olan filter_var() fonksiyonu ile kontrolümüzü...
yaklaşık 4 yıl önce | 1 Yorum
Devamı
Makale Önizleme
Php Sözlük Uygulaması
Merhaba arkadaşlar. Bu dersimizde tr-ing | ing-tr sözlük yapacağız. Öncelikle mantığını anlatmak istiyorum. Forma girilen kelimeyi ve radio butonlar vasıtasıyla seçilen dili cevir.php sayfamıza gönderiyoruz. Burada öncelikle bağlantı kodlarımızı yazıyoruz ardından POST ile aldığımız değerler ile veritabanında sorgulama yapıyoruz ve girilen ke...
yaklaşık 6 yıl önce | 45 Yorum
Devamı
Makale Önizleme
Css Resim Efektleri
Merhaba arkadaşlar. Bu makalemizde css filtre efektlerinden bahsedeceğim. Aynı zamanda örneklerle göstereceğim. Filtre efektleri photoshop ve benzeri programlarla yapabildiğimiz efektleri bir kaç satır kod ile yapabilmemizi sağlıyor. Üstteki görselde görüldüğü üzere toplamda 9 adet efektimiz bulunmaktadır. Aşağıda yapacağımız &oum...
yaklaşık 2 yıl önce | 1 Yorum
Devamı
Makale Önizleme
Jquery ile Veritabanından Sayfa Yenilenmeden Veri...
Merhaba arkadaşlar. Bu makalemizde veritabanından sayfamıza çektiğimiz kayıtları yeni kayıt eklendiğinde, silindiğinde ve güncellendiğinde sayfa yenilenmeden otomatik olarak web sayfamızda göstereceğiz. Örnek olarak Facebook ve Twitter'ı verebiliriz. Bu işlemi php ve jquery yardımı ile yapacağız. Şimdi kodlarımıza geçelim. index.php<!DOCTY...
yaklaşık 4 yıl önce | 13 Yorum
Devamı
Makale Önizleme
Php Sözlük Uygulaması
Merhaba arkadaşlar. Bu dersimizde tr-ing | ing-tr sözlük yapacağız. Öncelikle mantığını anlatmak istiyorum. Forma girilen kelimeyi ve radio butonlar vasıtasıyla seçilen dili cevir.php sayfamıza gönderiyoruz. Burada öncelikle bağlantı kodlarımızı yazıyoruz ardından POST ile aldığımız değerler ile veritabanında sorgulama yapıyoruz ve girilen ke...
yaklaşık 6 yıl önce | 45 Yorum
Devamı
KISIM SEÇ
 
8 Kategori
75 Makale
91 Yorum
 
 
7 Albüm
29 Tasarım
 
 
7 Proje
Bu Makaleyi Okudunuz mu?
 
  Css Uzun Metinleri Üç Nokta ile Durdurmak