CSS Uygulaması : MessageBox Yapımı

Merhaba Arkadaşlar,
Bu makalede bir CSS uygulaması ile Takipçilerinize , Üyelerinize yaptıkları işlem sonucunda döndüreceğiniz MessageBox ‘lar yapacağız. Örneğin web sayfalarımızda olan üye girişleri bölümünde veritabanına bakarak dönen işlem sonucunda doğru ise yeşil arkaplan ile bir başarılı mesajı ve ardından üye girişi sonucundaki sayfaya yönlendirme , yanlış ise kırmızı arkaplanlı bir hata mesajı ve ardından yeniden form sayfasına yönlendirme işlemi gibi hareketler yapabiliriz.

Başka bir örnek vermek gerirse blog ‘umuza bir takipçi girip yorum yaptığında eğer doldurulması zorunlu tüm alanlar dolduruldu ise başarılı yazısının bulunduğu şık bir tasarımı , eğer zorunlu alanlardan bir veya bir kaçı doldurulmadı ise hata veren messagebox ‘ı ekrana getirebiliriz.

Uygulamamızda herhangi bir form ‘u döndererek işlem yapmayacağız. Direk olarak farklı bir kaç tasarım ile css ‘i birleştirerek ortaya çıkacak görüntüleri göreceğiz.

İlk olarak iki adet sayfamızı oluşturuyoruz. Bunlar ” index.html ” ve ” stil.css ” olacaktır. Hayali karakterimizin bir üye girişi olarak düşünüyoruz ve buna ek olarak birde bilgilendirme mesaj kutusu yaparak tasarımımıza başlıyoruz.. İndex.html dosyamız için ilk olarak şu kodları yazıyoruz.

    BilgiSayaci.Org - CSS İle MessageBox Uygulaması
</pre>
<div class="basarili">
<div class="basarili-title"><img src="basarili.png" alt="" />Başarılı :)</div>
<div class="basarili-content">Başarılı Bir Şekilde Giriş Yaptınız. Anasayfaya Yönlendiriliyorsunuz. Lütfen Bekleyiniz...</div>
</div>
<div class="hata">
<div class="hata-title"><img src="hata.png" alt="" />Hata :(</div>
<div class="hata-content">
Giriş Yapmak İsterken Bir Veya Birkaç Alanı Doldurmayı Unuttunuz. Bu alanlar ;
<ul>
	<li>Üye Adı :</li>
	<li>Üye Şifresi :</li>
</ul>
</div>
</div>
<div class="bilgilendirme">
<div class="bilgilendirme-title"><img src="bilgilendirme.png" alt="" />Yeni Güncelleştirmeler Var !</div>
<div class="bilgilendirme-content">Merhaba , Site Yönetim Paneliniz İçin Yeni Bir Sürüm Mevcut Durumdadır. Lütfen Panel Sağlayıcınız İle İletişime Geçiniz...</div>
</div>
<pre>

Bu kodları yazdıktan sonra index.html sayfamızı çalıştırdığımızda bir kaç adet resimve yazılardan oluşan renksiz bir sayfa göreceğiz. İşin stil kısmına geçerek asıl süslemeleri yapalım ve asıl görüntümüzü o zaman alacağımızı bilelim lütfen 🙂 . ” Stil.css ” sayfamızı açıyoruz ve kodlarımızı şu şekilde yazıyoruz.

.basarili{padding: 30px; background-color: #E9FFDD; border: 1px solid #5bec73; width: 600px; margin-bottom: 20px;}
.basarili-title{margin-bottom: 20px; font-family: tahoma,sans-serif; font-size: 16px; font: bold; color: #3f5134;}
.basarili-content{font-family: tahoma,sans-serif; font-size: 11px; color: #3f5134;}

.hata{padding: 30px; background-color: #FBE3E4; border: 1px solid #d92727; width: 600px; margin-bottom: 20px;}
.hata-title{margin-bottom: 20px; font-family: tahoma,sans-serif; font-size: 16px; font: bold; color: #4c1717;}
.hata-content{font-family: tahoma,sans-serif; font-size: 11px; color: #4c1717;}

.bilgilendirme{padding: 30px; background-color: #c4cfff; width: 600px; border: 1px solid #639797;}
.bilgilendirme-title{margin-bottom: 20px; font-family: tahoma,sans-serif; font-size: 16px; font: bold; color: #1a2243;}
.bilgilendirme-content{font-family: tahoma,sans-serif; font-size: 11px; color: #1a2243;}

Gördüğünüz üzere stil sayfamızı kodlarken ” padding ” , ” border ” , ” margin ” gibi düzgün görünümlerde olmazsa olmaz bileşenlerimizi de kullanmamazlık yapmadık. Yazı tipi olarak Tahoma ‘yı seçerken başlık bölümlerini 16px , içerik bölümlerini 11px boyutunda yazdık. Böylece başlıkları daha göz alıcı bir hale büründürmüş olduk. Bu tarz mesaj kutularının artık olmazsa olmazı haline gelen ikonları da tek tek amaca uygun bir biçimde seçerek her bir başlığın soluna yerleşimini yaptık. Bunun için ek bir CSS kodu yazmadık çünkü eklediğimiz ikonlar tam istediğimiz şekilde sayfada durdu.

Daha Neler Yapılabilirdi ?

Eğer bu mesajların görüntüleneceği sayfalarınız keskin çizgilerden oluşuyorsa herhangi bir nokta ile oynamadan sadece beğenmediyseniz renk ayarları ile oynayarak kullanmanızı tavsiye ederim. Eğer sayfanız biraz hiperaktif bir görüntü sergiliyorsa CSS3 ile hayatımıza giren ” Border-Radius ” komutunu çok abartmadan kullanmanızı tavsiye ederim. Hatta daha şık durması için heryere aynı radius uygulamak yerine değişik değerler uygulayabilirsiniz. Örneğin stil sayfanızı küçük değişiklikler ile yenilediğimizde böyle bir görüntü elde edebilirsiniz.

.basarili{padding: 30px; background-color: #E9FFDD; border: 1px solid #5bec73; width: 600px; margin-bottom: 20px; border-radius: 0px 15px 0px 15px; -moz-border-radius: 0px 15px 0px 15px; -o-border-radius: 0px 15px 0px 15px; -webkit-border-radius: 0px 15px 0px 15px; -ms-border-radius: 0px 15px 0px 15px;}
.basarili-title{margin-bottom: 20px; font-family: tahoma,sans-serif; font-size: 16px; font: bold; color: #3f5134;}
.basarili-content{font-family: tahoma,sans-serif; font-size: 11px; color: #3f5134;}

.hata{padding: 30px; background-color: #FBE3E4; border: 1px solid #d92727; width: 600px; margin-bottom: 20px; border-radius: 0px 15px 0px 15px; -moz-border-radius: 0px 15px 0px 15px; -o-border-radius: 0px 15px 0px 15px; -webkit-border-radius: 0px 15px 0px 15px; -ms-border-radius: 0px 15px 0px 15px;}
.hata-title{margin-bottom: 20px; font-family: tahoma,sans-serif; font-size: 16px; font: bold; color: #4c1717;}
.hata-content{font-family: tahoma,sans-serif; font-size: 11px; color: #4c1717;}

.bilgilendirme{padding: 30px; background-color: #c4cfff; width: 600px; border: 1px solid #639797; border-radius: 0px 15px 0px 15px; -moz-border-radius: 0px 15px 0px 15px; -o-border-radius: 0px 15px 0px 15px; -webkit-border-radius: 0px 15px 0px 15px; -ms-border-radius: 0px 15px 0px 15px;}
.bilgilendirme-title{margin-bottom: 20px; font-family: tahoma,sans-serif; font-size: 16px; font: bold; color: #1a2243;}
.bilgilendirme-content{font-family: tahoma,sans-serif; font-size: 11px; color: #1a2243;}

Bu kod ile stil sayfamızı yeniledikten sonra ekrana baktığımızda bizi şu görüntünün karşılamış olması gerekmektedir:

Bugünkü uygulamamızında sonuna geldik. Mesaj kutularınızda kullanmanız için çalışma dosyaları içerisine birde işinize yarayabileceğini düşündüğüm ikon seti koyuyorum.
Bir başka makalede görüşmek üzere İyi Çalışmalar 🙂

Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 8 No ‘lu Maddeden İndirebilirsiniz..