Beşiktaş Haber Portalı

Css3 ile gelen yeniliklerden biri de borderlar üzerinde artık daha fazla hakim olabileceğiz. Yani şöyle ki artık borderlara istediğimiz resmi arkaplan olarak atayabileceğiz. Çok güzel bir özellik değil mi.  Diğer özellik ise kalın borderlarda her pixele ayrı bir renk tonu atayarak gradient görünümlü borderlar hazırlayabilirsiniz. Birde köşeleri ovalleştirebildiğimizi zaten bir önceki konuda ayrıntılarıyla anlatmıştım.

Köşelerde her pixele ayrı renk atama:

Evet bu özellik şu anda sadece Firefox tarayıcısında çalışıyor. Örnek kodlarımız da işte şöyle:

1
2
3
4
5
6
7
8

#kutu {
	border: 8px solid #000;
	-moz-border-bottom-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-top-colors:    #033 #039 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-left-colors:   #033 #039 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-right-colors:  #033 #039 #777 #888 #999 #aaa #bbb #ccc;
	width:400px;
}

Aşağıda da örnek görünümü bulunuyor. Bu kutuyu görebilmeniz için Firefox ile sitemizi ziyaret etmeniz gerekir.

Kutuyu Görebilmeniz İçin Bu Sayfayı Firefox İle Açın.

Bordera arkaplan resmi atama:

Css3 ile borderlarımıza arkaplan atamak için kullanacağımız kod ise border-image kodudur. Örnek kodumuz şu şekildedir:

1
2
3

#kutu{
	border-image: url(resmin-yolu);
}

Yorumlar