CSS İLE ETKİLEYECİ BORDERLAR

Ö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.

• Örnek
• Download

• Örnek
• Download

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;
}

BONUS: Liste elamanlarında kullanım

<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;
}