Şeffaf Tasarımlar

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

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!
  • Etiketler;
Hakan Çamoğlu
1983 İstanbul doğumludur. 1999 yılından bu yana web tasarımı/programlama üzerine çalışan Hakan Çamoğlu, halen 2004 yılında kurduğu ajansında işlerini sürdürmektedir. Aynı zamanda özel eğitim merkezlerinde web tasarımı konusunda eğitmenlik ve danışmanlık yapmaktadır. Vidobu.com kurucu ve ortağıdır. Flash, Dreamweaver ve Captivate konularında Adobe Certified Expert sertifikasına sahiptir. Vazgeçemediği hobileri ise fotoğraf çekmek ve gitar çalmaktır.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Bence bunun resimlerle anlatılacak bir tarafı yok. Basit ama çok görsel bir ders.
elinesağlık çok güzel bir uygulama
choq güzel olmuş
çok güzel eline sağlık
abi kralsın ya seni bizimle buluşturan sanalkurs.net e en içten saygılarımı sunar. bilgilerini bizimle paylaştığın için teşekkür ederim selam ve dua ile...
çok güzel olmuş sağol ama arkadaşlar bilmediğimiz kodların açıklamalarını yapsalar daha iyi resimlerden daha önemli bence
üstad ben flashta çalışırken şeffaf bi görsel galeri yapmak istesem, şansım olurmu. tşk
ben beceremedim :S
Teşekkürler hocam Daha çok ustalar için anlatılmış gibi :)
bu anlatımları okudukça kendimi aptal gibi hissediyorum. herkes anlıyorda ben neden anlayamıyorum:agla:
artık ie hariç yeni çıkan hemen hemen her tarayıcı artık 'opacity' komutunu tanıyor... yani filter:alpha(opacity=50); -moz-opacity:.50; şeklinde değil de direk olarak opacity:0.5; şeklinde kullanılabiliyor... :-dusun:
Sağ ol fakat bunu kullandığımızda css validator hata veriyor.
<style type= text/css> <!-- .seffafTable TD { background-color:#000000; filter:alpha(opacity=50); -moz-opacity:.50; font-size:12pt; color:white; text-align:center; } .seffafTable { background-image:url(zemin.jpg); } --> </style> <html> <font color="#b2a"> <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> </html> çalıştıramayan arkadaşlara
Çok güzel:kirp:
Background olarak koyduğumuz resimin boyutunun herhangi bir önemi varmı?örneğin 800*600 lük bir jpg olur mu?
Background olarak koyduğumuz resimin boyutunun herhangi bir önemi varmı?örneğin 800*600 lük bir jpg olur mu?
merhaba arkadaşlar bu opacity kodu İE 8 Mozilla operada falan çalışması için nasıl kullanmak gerek :S:-dusun: yardımcı olursanız sevinirim
.
divlere yada form araçlarına (inputlar, texarealar gibi) bunlara nasıl yapabiliriz bunu burdaki komutlar tablolar için mi geçerli sacdece
RAWENHEARTH DAHA ÇOK TEŞEKKÜRÜ HAKKETTİ bence

Yukarı Git