CSS İle Şeffaflık

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 ;