Çoğu zaman tasarımlarda transparan elementlerle karşılaşırız. Peki bu elementleri imaj olarak mı kesmek gerekir yoksa CSS yardımıyla oluşturmak gerekir ? CSS ile oluşturmak için temel opacity / transparan kodlarından yardım alırız. Genellikle buton veya kutusal tasarımlarda yarı transparan, arka planın görüldüğü elementleri kolaylıkla entegre ederiz. Ama bir dakika … Buton veya kutuya opacity değerlerini verdiğimizde kutu veya buton içerisindeki yazı / imaj’ların da mı opacity’si değişiyor. Eeee, sadece kutunun değişmesini nasıl sağlayacağız ?

Transparan Bir Kutu Oluşturalım

[code lang=“css”]

[/code]

Kutuyu biraz da CSS ile şekillendirecek olursak:

[code lang=“css”] width: 351px; height: 236px; opacity: 0.5; background: #000; border: 2px solid #166ca3; [/code]

Her şeyin tıkırında çalışmasını beklerken kutumuz transparan oluyor, yazıyı da okumada güçlük çekiyoruz. Bu beklediğimiz bir sonuç değildi. Her şey tıkırında çalışması gerekirken, çalışmadı !

Şimdi Hack Zamanı

Neden böyle çaışacağını açıklayacak olursak, bildiğiniz üzere child-element ilişkisi yüzünden en baştaki div’e uygulanan css değerleri, doğal olarak div’in child’ları olan h2 ve h3 elementlerine de uygulanmış oldu. Bu da kutu ve içerisindeki her şeyi transparan yaptı. Peki, h2 ve h3 elementleri div’in içerisinde olmasa ne olurdu ?

Sizin de bildiğiniz üzere, bir element’in başka bir elemt ile aynı alanda bulunması onun child’i olacağı anlamına da gelmiyor. Tam bu noktada CSS’in nimetlerinden faydalanma vaktidir. Bizim h2 ve h3 elementlerimizi div’imizin üzerine taşırsak bu sorunu hallederiz:

[code lang=“css”]

9. ve 10. Sınıfta

Anlamadığın konu kalmasın!

[/code]

Kutunun tam üzerine geitirip pozisyonlamak için de CSS’in yardımını kullanalım:

[code lang=“css”] h2 { position: relative; top: 0; left:0 } h3 { position: relative; top: 20px; left:0 } [/code]