Günümüzde birçok web geliştiricisi duyuru pencerelerini kullanmakta. İnternette de onlarca duyuru penceresi konulu makale var.

Duyuru penceresi dediğimiz şey sayfanın ilk izlenimidir. Hızlı açılmalıdır, kullanıcının kafasını karıştırmamalıdır. Fakat günümüzde birçok web sayfasında sayfa genelinden sonra anca yüklenip açılan duyuru pencereleri görmekteyiz.



Okumakta olduğunuz yazının devamında klasik duyuru pencerelerinden daha kullanışlı ve basit bir örnek hazırlayacağız.

1. Daha hızlı
2. %99 CSS
3. 0 görsel

İçerisinde bir satırlık java kodu var. O da pencereyi kapatmamıza yarayan işlemi yapmakta.



Pencerenin dikkat çekmesi için oluşturulan perde bütün browserlara uyum sağlayacak nitelikte.

#perde {

background-color:black;
 opacity: 0.7;
 -moz-opacity:0.70;
 filter: alpha(opacity=70);
 z-index: 20;
 height: 100%;
 width: 100%;
 background-repeat:repeat;
 position:fixed;
 top: 0px;
 left: 0px;
}

Stil detaylarına bakacak olursak kırmızı renklerdeki penceremizde bir tık koyu renkte dahili gölge (inner shadow) bulunmakta.

#duyuru {

z-index: 50;
 position:absolute;
 background-color:#bb5046;
 width:530px;
 height:230px;
 left: 50%;
 top: 50%;
 margin-top: -185px;
 margin-left: -275px;
 border-radius:20px;
 padding:20px;
 -moz-box-shadow:inset 0 0 80px #822820;
 -webkit-box-shadow: inset 0 0 80px #822820;
 box-shadow: inset 0 0 80px #822820;
}

Yine arka plan renkleriyle uyumlu bir yazı ve başlık tipi kullandım.

#duyuru p{

text-align:left;
 font:14px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 color:#fcd1cd;
 text-shadow: #822820 2px 1px;
}

#duyuru h1{
 font:20px Georgia, 'Times New Roman';
 color:white;
 letter-spacing: -1px;
 margin-bottom: 10px;
 text-align:center;
 text-shadow: #822820 2px 1px;
}

Kapat buttonunu ise yine görsel kullanmadan hazırladım. Oval bir kutucuğun içine X koyarak görsel açıdan güzel bir sonuç elde ettim.

#duyuru .kapat{right:0;
 top:0;
 padding:1px;
 font:10px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 text-align:center;
 border-radius:3px;
 z-index: 60;
 position:absolute;
 background-color:white;
 border:1px #858585 solid;
 margin:-12px -12px 0 0;
 border-radius:10px;
 color:#111;
 width:15px;
 height:15px;
 cursor:pointer;
}

#duyuru .kapat:hover{
 background-color:#CCC;
 color:white;
}

Ayrıca sola yaslı olarak AdobeWordPress logosunu da eklemeyi unutmadım. Logonun sağ kısmına noktalardan oluşan bir çerçeve oluşturarak açıklama metni için alan yarattım.

#duyuru p .awlogo{

margin:15px;
 border-right:1px #822820 dotted;
 float:left;
}

İşin HTML kısmına ise aşağıdaki satırları ekledim :

<div id="perde"></div>
<div id="duyuru">
<div class="kapat" onclick="document.getElementById('duyuru').style.display = 'none';document.getElementById('perde').style.display = 'none';">X</div>
<h1>AdobeWordPress.com Duyuru Penceresi</h1>
<p>Bu duyuru penceresi okumakta olduğunuz makale sonucunda oluşmuştur. Bir satırlık javascript koduyla çalışan bu pencere diğerlerine kıyasla <u>hızlı</u> ve <u>geliştirilebilirdir</u>.<br /><br />
<img class="awlogo" src="http://www.adobewordpress.com/wp-content/themes/themolio/images/logo.png" />
<br /><a href="www.adobewordpress.com">www.adobewordpress.com</a><br />Adobe program dersleri ve WordPress blog sisteminin detaylarını konu alan interaktif Türkçe eğitim merkezi.</p>
</div>

Not : Bu pencereler site-içi duyuru amaçlı kullanılmalı. Reklam yayını için kullanılmamalıdır.

Umarım işinize yaramıştır. AdobeWordPress’i ve beni takip etmeye devam edin.

Görüşmek üzere…

Kaynak : http://www.adobewordpress.com/siteni...eresi-ekleyin/