Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
CSS ile Işıkları Kapat
#1
isik-acik-kapa.gif?resize=502%2C65
Nasıl yapılır?

İlk olarak temel anlamda Z-index’i tanıyalım.

Z-index’i kısaca tanıyalım

Z-index, HTML yapısı içerisindeki öğeleri hiyerarşik olarak sıralamamızı sağlar. Bir elemanın z-index tanımlamasını görmesi için ilk olarak pozisyonunun değiştirilmesi gerekir. İşte bu yüzden hazırlayacağımız örnekte position:relativeveya position:fixed gibi tanımlamalar da yapacağız. Daha sonra z-index:100şeklinde bir tanım ile perdemizi oluşturacağız. Böylece z-index değeri 100‘den çok olan öğeler ön planda kalırken 100‘den küçük öğeler perdenin altında kalacak.

Özetle z-index bu kadar. Şimdi örneğimizi hazırlayalım.

Perdemizi oluşturalım

Perdemizi hazırlarken birincil önceliğimiz öğenin şeffaf olması olacaktır. İkinci öncelik ise perdenin tüm ekranı kaplaması olabilir. Yani fixed pozisyonundaki, opacity tanımlı bir öğeye ihtiyacımız var. Öyleyse CSS kodlarımız aşağıdaki gibi olacak.

PHP Kod:
#perde {
displaynone;
positionfixed;
top0px;
left0px;
width100%;
height100%;
background-colorblack;
opacity0.8;
filteralpha(opacity=80);
z-index100;


Şimdi de HTML kodlarımızı ekleyelim.

PHP Kod:
<div id="perde"></div

Perdenin önüne öğe (Video) ekleyelim

Odaklanılmasını istediğimiz videoyu perdenin önüne koyacağız. Yani 100‘den yüksek bir z-index değeri kullanacağız.

PHP Kod:
.video {
positionrelative;
z-index101;
display:block;
margin:0 auto;




Şimdi de videomuzu ekleyelim. Örnek olarak YouTube kanalımızdaki bir videoyu kullanıyoruz.

PHP Kod:
<iframe class="video" width="640" height="360" src="http://www.youtube.com/embed/UtSZRYRezxE" frameborder="0" allowfullscreen></iframe



Sıra geldi aç/kapat düğmesine

Düğmemizi de ekledik mi uygulamanın büyük kısmı tamamlanıyor. Düğme perdenin üstünde kalmak zorunda. Çünkü olur da ışıkları kapatırsak belki sonrasında tekrar açmak isteriz. Bu durumda düğme perdenin altında kalırsa tıklanılamaz hale gelir. Bunun olmasını istemeyiz. Öyleyse 100‘den yüksek bir z-index kullanacağız.

PHP Kod:
.ac-kapa {
positionrelative;
background-colortomato;
z-index101;
padding:10px;
color:white;
text-align:center;
text-decoration:none;




Düğmenin HTML kodlarını da ekleyelim.


PHP Kod:
<a href="#" class="ac-kapa" onclick="toggle();">Işıkları Aç/Kapat</a



Gizlenecek bir öğe de oluşturalım

Son olarak gizlenmesini istediğimiz, önemsiz bir öğe de oluşturalım. Z-index bu sefer 100‘ün altında olacak.

PHP Kod:
.gizlenecek {
positionrelative;
background-colorYellowGreen;
z-index:99;
color:white;
text-align:center;
padding:10px;




HTML kodlarımız;


PHP Kod:
<span class="gizlenecek">Burada da gizlenmesini istediğiniz farklı içerikler olabilir.</span



Ve JavaScript kodlarımız

Aç/Kapat butonunu çalıştırmak için JavaScript kodlarına ihtiyaç duyağımızı söylemiştik. İşte kodlar :

PHP Kod:
<script>
function 
toggle () {
var 
perde document.getElementById("perde");
if (
perde.style.display != "block")
perde.style.display "block";
else
perde.style.display "none";
}
</
script



Herşey hazır!

Sonuç

Kısaca şu tip bir kodlama yaptık.


PHP Kod:
<html>
<
head>
<
style>
#perde {
displaynone;
positionfixed;
top0px;
left0px;
width100%;
height100%;
background-colorblack;
opacity0.8;
filteralpha(opacity=80);
z-index100;
}
 
.
ac-kapa {
positionrelative;
background-colortomato;
z-index101;
padding:10px;
color:white;
text-align:center;
text-decoration:none;
}
 
.
gizlenecek {
positionrelative;
background-colorYellowGreen;
z-index:99;
color:white;
text-align:center;
padding:10px;
}
 
.
video {
positionrelative;
z-index101;
display:block;
}
</
style>
</
head>
<
body>
<
div id="perde"></div>
<
iframe class="video" width="640" height="360" src="http://www.youtube.com/embed/UtSZRYRezxE" frameborder="0" allowfullscreen></iframe>
<
span class="gizlenecek">Burada da gizlenmesini istediğiniz farklı içerikler olabilir.</span>
<
a href="#" class="ac-kapa" onclick="toggle();">Işıkları Aç/Kapat</a>
<
script>
function 
toggle () {
var 
perde document.getElementById("perde");
if (
perde.style.display != "block")
perde.style.display "block";
else
perde.style.display "none";
}
</
script>
</
body>
</
html
Ara
Cevapla PGM
Teşekkür verenler: kaRanLık-61


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi



Teknolojik -

Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping