CSS ile Çoklu Border (Çerçeve) Oluşturma

Vatanay Özbeyli CSS3, Tasarım Unsurları

Bildiğiniz gibi CSS Border kullanarak çerçeveler oluşturabiliyorduk. Fakat çoklu çerçeve oluşturmaya kalktığımızda işler sarpa sarıyordu.

İşte tam bu esnada yardımımıza box-shadow koşuyor. Bu kod dizesi ile gölgelendirme yapabiliyoruz. Detayları için gölgelendirme konulu makalemi okuyabilirsiniz.

Gölgelendirme yaparken uyguladığımız blur efektini 0’a çekince gayet keskin bir görüntü elde ediyoruz. Bu teknik sayesinde istediğimiz kadar border oluşturabiliyoruz.

CSS Kodları : 


.coklu-cerceve {
border: 3px solid blue;
-webkit-box-shadow: 0 0 0 3px red, 0 0 0 6px green;
 -moz-box-shadow: 0 0 0 3px red, 0 0 0 6px green;
 box-shadow: 0 0 0 3px red, 0 0 0 6px green;
}

HTML Kodları : 

<div> Deneme Kutusu </div>

Bir sonraki CSS konulu yazımda görüşmek üzere.