CSS3 Multiple Columns Kullanımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS3 Multiple Columns Kullanımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(1711)
RAPOR ET
CSS3 derslerimize devam ediyouz.Bu derste multiple columns özelliğini işleyeceğiz.Öncelikle işlevinden bahsedelim.Belirli bir alanı dikey olarak parçalara bölmemize yarıyor.Örneği görünce daha iyi anlarsınız.Şimdi kodları inceleyerek başlayalım.

1-column-count


Alanı kaç parçaya böleceğimizi belirliyoruz.Örnek olarak
column-count:4;

diyerek 4 parçaya böldürüyoruz.

2-column-gap


Column gap ise bölünen parçalar arası boşluk miktarını belirliyoruz.Örnek olrak
column-gap:20px;

diyerek aralarındaki boşluğu 20px yapabiliriz.

3-column-rule


Column rule ise bölünen parçalar arasına çizgi çizmemize yarıyor.Parametreleri border ile aynı.

column-rule:kalınlı stili renk;
Stil çeşitleri : none,hidden,dotted ,dashed,solid,double,groove,ridge,inset,outset,initial,inherit

Örnek olarak
column-rule:1px solid #ddd;

kulanımı bu şekilde.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<style type="text/css">
.metin{width:600px;color:#666;
column-count:4;-webkit-column-count:4;-moz-column-count:4;-o-column-count:4;
column-gap:50px;-webkit-column-gap:50px;-moz-column-gap:50px;-o-column-gap:50px;
column-rule:1px solid #ddd;-webkit-column-rule:1px solid #ddd;-moz-column-rule:1px solid #ddd;-o-column-rule:1px solid #ddd;
}
</style>
</head>
<body>

<div class="metin">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum neque vitae elit lobortis, a euismod augue porttitor. Nulla fringilla sollicitudin nibh et rutrum. Sed at aliquam mauris. Curabitur varius lacus viverra, iaculis neque nec, venenatis dui. Quisque elementum, magna at adipiscing malesuada, purus tellus interdum turpis, a pellentesque leo turpis et augue. Nulla suscipit vel erat id rhoncus. Proin orci erat, varius vel neque id, pharetra blandit libero. Suspendisse hendrerit quam massa, a condimentum magna laoreet in. In dictum id lectus sed euismod. Vestibulum ultrices, metus eget suscipit scelerisque, felis felis elementum diam, a sodales nisl nisi sed lorem. Suspendisse potenti. Sed congue rutrum tristique.
Quisque dapibus vulputate felis at laoreet. Aenean sagittis enim vel justo lacinia varius. Nullam suscipit ut felis id sagittis. Ut in blandit orci. Ut rutrum vel eros non iaculis. Aliquam elementum aliquet lorem, id gravida orci tristique quis. Suspendisse vel egestas sem. Vivamus vel augue justo. Maecenas euismod, purus ac rutrum tincidunt, ante lectus placerat magna, eu hendrerit nisl quam eget magna. Nam dapibus eget nibh vel faucibus. Donec faucibus, nisl ac congue rutrum, magna metus eleifend leo, vel semper mauris erat quis velit.
</div>

</body>
</html>


Görüntüsü :
http://ustaderslik.com/resim/ders/74f7erf45d5.png
Gördüğünüz gibi metin classı içindeki metini 4 parçaya ayırdı.Temel olarak kullanımı bu şekilde.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol