XHTML sayfalarda gördüğünüz şeffaf tasarımlar CSS ile nasıl yapılır?





Temelde bu örnek, bir tablonun arkaplanında yer alan bir görsel ve o tablonun hücrelerinin opaklık değerinin düşürülmesiyle oluşmuştur. Dolayısıyla örneğimizin ilk adımı tablo oluşturmak olmalıdır.

Yeni bir HTML dokümanı oluşturarak içerisine 4 sütun, 1 satırdan oluşan bir tablo ekleyin. Tablonun genişlik ve yükseklik değerlerini kullanacağınız arkaplan resmine göre ayarlayın ve her bir hücreye gelmesi gereken menü yazılarınızı yazın. Son olarak tablonun kullanacağı class değerini seffafTable olarak ayarlayın.

<table border=�0� width=�400� height=�360� class=�seffafTable�> <tr> <td>01.Tarihçe</td> <td>02.Hakkında</td> <td>03.Ürünler</td> <td>04.İletişim</td> </tr> </table> <div style="font-size: 0.65em;padding-right: 10px;text-decoration: underline;width:150px" align="right"> <a href="http://www.arastirbul.com/forum" _fcksavedurl="http://www.arastirbul.com/forum" _fcksavedurl="http://www.arastirbul.com/forum" target="_blank" title="siz de sitenize/bloğunuza ekleyin!">WebMasterForumu</a></div></body></html>

Tabloyu oluşturduktan sonra CSS komutlarımızı yazmaya başlayalım. Öncelikle tablonun arkaplan resmini belirleyeceğiz. Bunun için tabloyu oluştururken kullandığımız seffafTable stilini oluşturarak arka plan resmini ekleyelim.

.seffafTable { background-image:url(zemin.jpg); } <div style="font-size: 0.65em;padding-right: 10px;text-decoration: underline;width:150px" align="right"> <a href="http://www.arastirbul.com/forum" _fcksavedurl="http://www.arastirbul.com/forum" _fcksavedurl="http://www.arastirbul.com/forum" target="_blank" title="siz de sitenize/bloğunuza ekleyin!">WebMasterForumu</a></div></body></html>

.seffafTable TD { background-color:#000000; filter:alpha(opacity=50); -moz-opacity:.50; } <div style="font-size: 0.65em;padding-right: 10px;text-decoration: underline;width:150px" align="right"> <a href="http://www.arastirbul.com/forum" _fcksavedurl="http://www.arastirbul.com/forum" _fcksavedurl="http://www.arastirbul.com/forum" target="_blank" title="siz de sitenize/bloğunuza ekleyin!">WebMasterForumu</a></div></body></html>

---