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>

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);
}

Tablonun zemininden sonra sıra tablo hücrelerinin opaklıklarını düşürmekte. Hücrelere ulaşmak için CSS’te seffafTable stilinin içindeki TD tagını kullanacağız.

.seffafTable TD
{
background-color:#000000;
filter:alpha(opacity=50);
-moz-opacity:.50;
}

İşte hepsi bu!