CSS ile etkileyici border’lar

Önceleri sadece imajlar kullanarak yaptığım oldukça görsel olan ayiricilar için artık css yöntemleri yeterli olmakta.Bu konuda takip ettiğim 2 yöntem bulunmakta ,ama yöntemlere geçmeden örneklerimizi inceleyelim.

1.Yöntem : 2 katman alt ve üst borderlarını belirlemek.

<div class="katman bir"></div>
<div class="katman iki"></div>

.katman {
	width:400px;
	height:50px;
	display:block;
	margin:0 auto;
}
.bir {
	border-bottom:1px solid #333;
}
.iki {
	border-top:1px solid #111;
}

2.Yöntem : 1px’lik katman

<div class="katman"></div>

.katman {
	background-color:#333;
	border-bottom:1px solid #111;
	height:1px;
}

Bunun yanında liste elemanları içinde bu yöntem oldukça uygundur.

<ul>
	<li>Liste elemanı 1</li>
	<li>Liste elemanı 2</li>
	<li>Liste elemanı 3</li>
	<li>Liste elemanı 4</li>
	<li>Liste elemanı 5</li>
</ul>

ul{
	margin:10px 0 0 10px;
}
ul li {
	color:#fff;
	width:200px;
	padding:5px 0 5px 0;
	border-bottom:1px solid #111;
	border-top:1px solid #333;
}

ancak ilk ve son eleman için bazı border degerlerini sıfırlamamız gerekmekte.

ul li:first-child{
	border-top:none;
}
ul li:last-child{
	border-bottom:none;
}

Özellikle 2. yöntemi bir süredir kullanmaktayım ancak bu yazıyı yazmak ancak soh tanaka‘nın bu yazısı sonrası aklıma geldi.