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ü :
Gördüğünüz gibi metin classı içindeki metini 4 parçaya ayırdı.Temel olarak kullanımı bu şekilde.
UstaDerslik
