CSS İle Şeffaflık

Yazan: Mehmet Selim 11 Ağustos, 2008

Css İle Şeffaf Tasarımlar

           CSS ( Cascading Style Sheets ) ile tasarımlarımıza doğal şeffaflık verebiliyoruz. Katmanlarımızın üzerine yazılarımıza resimlerimize CSS ile şeffaflık kazandırabiliyoruz. CSS’in bu özelliği webmaster’ların hoş gözüken sayfalar yapması için yapılmış çok yararlı bir işlev. Örnek vermek gerekirse şeffaflık çoğu tasarımda çok hoş duruyor Photoshop ile yapmaktansa CSS ile katman’a renk verip ona şeffaflık kazandırmak daha avantajlı. Aşağıda bu işlemin nasıl yapıldığını örnekler vererek gösterceğim.

 

CSS İle Şeffaflık

  CSS ile bir katmana yazıya veya resime şeffaflık kazandırmak çok kolay  şeffaflık kazandırmak için şu iki kodu ekliyoruz : filter:alpha(opacity=40); opacity:.40; aşağıdaki örnekleri deneyebilirsiniz.

1. Örnek ; 

#Layer1 {
 position:absolute;
 left:243px;
 top:171px;
 width:305px;
 height:227px;
 z-index:1;
 filter:alpha(opacity=40);
 opacity:.40;
 background-color: #999999;

}

Örneği denemek için tıklayınız.

2. Örnek ;

.style1 {
 color: #333333;
 font-weight: bold;
 filter:alpha(opacity=20);
 opacity:.20;
 font-size: 36px;
}

Örneği denemek için tıklayınız.

3. Örnek ;

#Layer2 {
 position:absolute;
 left:402px;
 top:236px;
 width:261px;
 height:232px;
 z-index:1;
 background-image: url(logo.jpg);
 filter:alpha(opacity=20);
 opacity:.20;
}

Örneği denemek için tıklayınız.

Şeffaf resim tablosu ;

 

Kategori : CSS Etiketler :

Yorumlar
13 Ağustos 2008

Vyy knkaa guseLmiş =)

Posted yapan Murderdolls
13 Ağustos 2008

eLine sağLık kanka güzeL biLgi

Posted yapan JoSePh
22 Eylül 2008

Güsel Paylaşım Biz Neden Paylaşım Yapamıyoruz.. :)

Posted yapan 11-I PrQressive
23 Eylül 2008

Blog mantığı ayrı forum değil burası : ) ama ziyaterçilerin makalelerini yollaya biliceği bir platform yapabilirim.

Posted yapan Mehmet Selim
Yorum yapın

(gerekli)

(gerekli)