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 ;