Css ile hazırladığım mesaj kutuları
Web uygulamalarında, yapılan bir işlem sonrasında kullanıcılarınıza bir mesaj göstermek gerekebiliyor. Kullanıcının yaptığı işlem başarısız ise bir hata mesajı, başarılı ise bir işlem tamam mesajı gösteriyoruz. Veyahut kullanıcılarımızı bir konu hakkında bilgilendirmek için bir bilgi mesajı, yine bir konu hakkında uyarı vermek için de bir ikaz mesajı gösteriyoruz. İşte bu mesaj türlerini biraz görsel yönden biraz da renk yönünden desteklediğimizde kullanıcıda daha fazla etki bırakabiliriz.
Css Message Boxes
Kendi hazırladığım web uygulamalarında mesaj kutularını daha etkili hale getirmek için CSS ile bir eklenti pakedi hazırlamıştım. Ve bu pakedi sizlerle de paylaşmak istiyorum. "Css Message Boxes" ismini verdiğim bu pakedi web sayfanıza bağladıktan sonra bir DIV etiketiyle beraber kolayca kullanabilirsiniz. Yazıya devam etmeden önce bir demo görmek isterseniz Demo Sayfası bağlantısına tıklayabilirsiniz.
Paket içerisinde 4 adet mesaj kutusu bulunuyor. Bunlar hata, ikaz, tamam ve bilgi isimlerinden oluşuyor. Pakedi hazırlarken renkleri ve FamFamFam setindeki simgeleri kullandım. CSS ile kod yazarken uzaklık belirtmek için kullanılan Padding ve Margin değerlerini EM cinsinden atadım. Böylece web tarayıcınızı yeniden boyutlandırdığınızda görüntüde herhangi bir kayma oluşmuyor.
Nasıl kullanacağız?
Öncelikle yazının sonundaki bağlantıdan Css Message Boxes pakedini bilgisayarınıza indirmeniz gerekiyor. Paket içerisinde bir demo sayfası yer alıyor ve bu sayfadan nasıl kullanıldığına bakabilirsiniz. Yine de küçük bir örnek göstermek yararlı olabilir.
1-) İlk önce paket içerisindeki css.css sayfasını alttaki gibi web sayfamıza bağlıyoruz:
-
<style type="text/css">@import "mBox/css.css";</style>
2-) Göstermek istediğimiz mesaj kutusunu DIV etiketi ile hazırlıyoruz. Dikkat etmemiz gereken şey, mesaj kutusunun türünü CLASS özniteliğinde belirtmemiz.
3-) Ve sonuç olarak alttaki gibi şık ve verdiğimiz mesaj türüne uygun bir görüntü elde etmiş oluyoruz. Ne kadar basit değil mi? Basit ama bir o kadar da etkili bence...
Sonuç
Şimdiye kadar hazırladığım web uygulamalarında, bahsettiğim bu mesaj kutularını yeni baştan kodluyordum veya kopyala-yapıştır yapıyordum. Fakat bunu bir eklenti pakedi haline dönüştürüp yukarıda anlattığım şekilde kullanmak daha pratik oluyor. Özellikle zamandan tasarruf tabi. Umarım beğenirsiniz ve sizin de işinize yarar 
Yorum takibi
Geri izleme
Yazıyı Paylaş
25 Aralık 2007, 09:30
Programlama, İnternet & Web
Bugün 3 kez, toplam 3,679 kez okundu.
css, eklenti, mesaj, mesaj kutusu, paket, renk, simge, web
25 Aralık 2007, 11:07
Eline sağlık Erhan şık duruyor.
Bu css olayını tam anlamıyla öğrenmek istiyorum aslında ama bakalım hayırlısı
25 Aralık 2007, 11:57
bu verdiginiz mesaj kutulari internette her yerde bulunabilen cssler. hazirlayan ki$i famfamfam’dan alabilirsiniz diyor zaten. ben de 5 aydir kullaniyorum web sitelerimde.
turkler, her zamanki gibi kaynak belirtmeyip ba$kasinin emegine konanlar!
25 Aralık 2007, 12:15
@ercu eser
Bu nasıl bir cümle? Neyi alabiliriz? Ben neyi aşırmışım ki kaynak göstermem gerekiyor?
Bence siz Türk’lere lâf söylemeden önce Türkçe’nizi ve Türklüğünüzü yeniden gözden geçirin.
25 Aralık 2007, 13:42
tşk ederim burhan abi. çok şık duruyolar.
25 Aralık 2007, 13:49
ercu sert girmiş olaya arada türkler mürkler deyip herkesi kaynatmış bu kabul edilebilir bir durum değil ama eburhan senin başlıkta “Css ile hazırladığım mesaj kutuları” gibi işi kendine çevirmen de yanlış çünkü gerçketen de bu örneklerin aynısı yabancı bir sitede yer alıyordu tükçeye çevirdim filan deseydin bari…
25 Aralık 2007, 13:59
@Sérkan
Ben birşeyi anlatamıyorum galiba. Bu mesaj kutularını yabancı sitelerde ben de gördüm ama hepsini bir arada hiçbiryerde görmedim. Ayrıca yabancı sitelerde gördüklerimin sorunları vardı. Web tarayıcıyı yeniden boyutlandırdığınızda kaymalar oluyordu. Ben de aldım yeni baştan “kendi kurallarım çerçevesinde” ve “sıfırdan” kodladım. SARI olan mesaj kutusu hariç hepsinin renklerini kendim belirledim.
Böyle de diyemem çünkü ben çeviri falan yapmadım. Yaptıysam veya bu yazıyı başka bir yerden kopya çekerek hazırladıysam NAMERT olayım. Yapmadığım birşeyi de yapmış gibi gösteremem.
Sizden ricam şu. Lütfen daha önce bu mesaj kutularının hepsini hangi yabancı sitede gördüyseniz bana linkini yazın. Eğer aynısı ise YEMİN EDERİM yazıyı kaldıracağım.
25 Aralık 2007, 14:32
Başka sitelerde buna benzer birşeyler olması gayet normal ama sonuçta kimin neyi yapıp neyi yapamayacağı ortadadır. Erhan’ın bugüne kadar yaptıkları şeyler ortada o yüzden insanları yargılamadan önce dikkat etmek gerekir. Onun da ötesinde eğer bir iddianız varsa kaynak belirtmeniz gerekir. Bu kim olursa olsun değişmez.
25 Aralık 2007, 16:08
Böyle sert tepkileri anlamak mümkün değil. Eğer bir yerden alınmışsa (ki alınmadığına ben eminim, Erhan bu konulara en az sizin kadar duyarlıdır) bunu ifade etmenin şekli bu olamaz, olmamalı.
@Erhan, ihtiyacı olan arkadaşlara güzel bir hizmet, tasarımlarına uymayacak olan arkadaşlara (mümkün tabi) kullanım yönteminin gösterimi açısında iyi bir yazı olmuş, tebrik ederim.
25 Aralık 2007, 17:15
Ne yani bu CSS örneklerinin bir tek burada anlatıldığını falan mı düşündünüz
Acayip komiksiniz. Bence hiç yorum falan yazayım demeyin. Hatta yanından bile geçmeyin 
Sanki tüm yazılarını içerik çalarak yapan biriymiş gibi davranmayın Erhan’a ki neden çalsın? Zaten bildiği şeyler değil mi? Normal insanlar için 3 düşün 1 söyle falan derler. Ama üzgünüm aynı şeyleri sizin için söyleyemeyeceğim. 10-15 kez düşünün. Mümkünse düşündükten sonra da konusurken kısa konuşun. Boş konuşmayın.
Komik olmayın
25 Aralık 2007, 17:40
Bu arada teşekkür ederim… Kendi blogumda tekil yazı sayfası dağınık görünüyodu.. Bu tablolar orada işime yarayacak
25 Aralık 2007, 18:29
@eburhan
nasil bir zihniyet bu inanamiyorum ya!? birincisi bunu “toplami$”sindir kabul edebilirim ancak topladigin kaynaklari vermek durumundasin. internet boyle bir $ey i$te, kimse babasinin hayrina bir $ey payla$miyor, para vermiyorsan backlink vereceksin.
hayir efendim ff’da ve ie’de sorun ya$andigini gormedim.
e guzel, ben de $imdi wordpress’i degi$tiriyorum kendi degi$ken isimlerimle sonra for dongulerini while yapicam, ifleri switch oh bu da benim kurallarim.
bu arada buyrun efendim size kaynak, kanit:
http://www.bioneural.net/2006/04/01/create-a-valid-css-alert-message/
bu arada neden bu kadar tepkiliyim aciklayayim:
ayni $eyi (kaynak belirmeme) bu kutular icin yapan turkiyede 2. ki$isiniz (css turkiye mi oyle bir sitede daha yaptilar). ve ben bunu kullaniyorum ve haksiz yere sizden alip yaptim gibi bir durum olu$uyor.
sonuc olarak burada yapman gereken $udur:
blog entrysinde konuya girerken “xxx adli sitede (yukarida verdim) tarayici sorunlari olan kodu sorunsuzca calistirmaniz icin degi$tirdim” $eklinde ba$lamalisin, yani normal bir blogger boyle yapar en azindan.
bu arada sert yorumlarimi sitende yayinlattigin için t$k ederim.
25 Aralık 2007, 18:50
Erhan’ın burada birinci yapmak istediği; bu mesajları tek bir dosya haline getirip zamanı geldiğinde o dosyadan bu mesajların stillerini çekmektir. İkinci yapmak istediği CSS kodlarını tarayıcı farklılıklarında sıfıra indirgemek. Bu gayet iyi düşünülmüş bir sistem. Çünkü CSS bilen bir kişide bilmeyen bir kişide bu dosyadan yararlanabilir. Daha fazla konuşmak istemiyorum çünkü şu yorumlar sinirlerimi şu an yıpratmış durumda. Burada bir emek var ki değmiş bir çalışma siz buna laf atıyorsunuz. Olacak iş mi şimdi bu ? Meyve veren ağaç taşlanır. Başarılarının devamını dilerim Erhan.
25 Aralık 2007, 19:34
güzel bir çalışma olmuş.
erhan abi videolu css ne bilim ajax gibi webmasterlar için bir çalışman var mı?
gerçekten de ihtiyaç var bu konularda.
yazısal bir çok kaynak var ama görüntü gibi yerini tutmuyor.
25 Aralık 2007, 20:45
@ercu eser
Öncelikle bu mesaj kutularını birçok yerde görebilirsin ve bunlar herkes tarafından kullanılıyor. Bu mesaj kutuları “ercu eser” üzerine “şu isimli lisans” ile “şu tarihte” lisanlanmıştır diye birşey de görmedim ben. Zaten 2 satır css kodunun lisanslanmış olması da saçma olurdu. Ayrıca ben bu konularda vurdumduymaz birisi olsaydım web sitemin altında WordPress’e ve şu anda kullandığım temanın asıl sahibine bile link vermezdim.
Bu mesaj kutularını daha önce görmüştüm evet ama hiçbirisinin kodunu aynen alıp da kullanmadım. Bunlar benim kendi hazırladıklarım. Zaten dikkat edersen kullanmış olduğum Renkler ve Simgeler çoğunlukla farklı. Sadece SARI mesaj kutusunu başka bir web sitesinde görmüştüm ve renkleri hoşuma gittiği için aynı renkleri kullanmak istedim fakat simgesini değiştirdim. Çünkü diğer SARI mesaj kutularında kullanılan (
) simgesi bana göre yanlış. Kendi belirlediğim (
) simgesi bu SARI mesaj kutusuna daha uygun bence.
Kusura bakma ama çok SAÇMA bir yorum. Ben internetteki milyonlarca site arasında dolaşıp “eğer siz şunu kullanmıyorsanız ben kullanabilir miyim?” diye tek tek sormam mı gerekiyor? Ayrıca başkalarının sizin hakkınızda ne düşündüğü beni bağlamaz. Bu durumu “sizden alip yaptim gibi” gibi değerlendiriyorsan bu sizin kompleksli olduğunu gösterir. Bu lafınıza göre sizde olan birşeyin başkasında olmasını kabullenmiyorsunuz.
Ve gelelim sorun var mı yok mu? Öncelikle sorunun olup olmadığını anlaman için PX ve EM birimleri arasındaki farkı biliyor olman gerekiyor. Bu fark neymiş internette araştır lütfen. Ben yine de senin için kısa bir açıklama sayfası hazırladım.
- - - - -
PX ile EM Arasındaki Fark Nedir?
- - - - -
Ve son birşey. Dikkat ettiysen ben mesaj kutularını hazırlaken FamFamFam simge paketini kullandım. Ve bu simge pakedinini web sitesine link verdim. Niye bundan bahsetmiyorsun acaba? Ben kötü niyetli olup aşırma yazı yazan biri olsam FamFamFam sitesine de link verip teşekkür etmezdim. Kısacası lütfen tanımadığın kişiler hakkında yorum yaparken biraz daha dikkatli ol ve bu sert tavrını değiştir. Çünkü insanlar konuşa konuşa anlaşırlar birbirlerine çamur atarak değil.
25 Aralık 2007, 21:20
Çok eskiden beri var sanırım bu hatta bazı wordpress temalarında default olarak geliyor…
25 Aralık 2007, 23:10
@eburhan : Güzel bir çalışma, tebrikler.
@ercu eser : Eburhan’ın yapmış olduğu ilk yoruma katılıyorum. “Türkler böyle işte” gibi ifadeler kullanarak milletini aşağılamaktan zevk mi alıyorsun bilemiyorum ama bence eline bir imla kılavuzu alıp okumalısın. Diğer yandan alfabeyi de gözden geçirmeni tavsiye ederim; çünkü bildiğim kadarıyla “$” diye bir harf yok. Tüm bunlardan öte eburhan bir yerden alıp değiştirmedim, kendim yazdım sıfırdan - kanıtlarıyla - demesine rağmen neden hala şuradan almışsınız buradan aldım diye link koymanız gerek diyorsun anlayamıyorum?
25 Aralık 2007, 23:17
Erhan’ı 3 yıldır tanırım ve şimdiye kadar haksız bir olayını görmedim. Tamam bir insan şimdiye kadar yanlış yapmadı diye bundan sonra da yapmaz diye bir kural olmadığına adım gibi eminim. Yalnız burda böyle bir sorun da yok!
Örneği verilen uygulama fikir ve uygulama açısından bilenler için oldukça sade ve alternatifleri olan bir uygulama. Yani Erhan DIV ile çağırmış, Osman P ile çağırmış, ben de SPAN ile çağırıyorum. Yani üstelik Erhan bir style dosyası hazırlayıp dışardan şablona çağırmış ben se site kodları arasında CSS kodlarının arasına koymuşum. Demek istediğim yapılan uygulama zaten yalın ve basit olmakla birlikte kaç kişi yaparsak yapalım birbirine benzeyecek, her ne kadar arka planda ufak tefek kod farklılıları olsa da. Üstelik ortaya atılan fikir öyle uçuk kaçık veya kimsenin aklına gelmeyecek birşey değil ki? Altı üstü arkaplanına renk verilmiş ve border renkleri ile kutu halini almış. (Erhan sakın çalışmanı küçümsediğimi sanma, ne yaparsak yapalım çalışmaların birbirne benzeyeceğini açıklamak için böyle söyledim) Şimdi sizin aklınıza böyle bir uygulama fikri gelse kaç değişik yolla yapabilirsiniz ki? Hem webde gördüğü güzel uygulamlardan etkilenmiyorum diyen yalancıdır. Ben de bir çok güzel birşey gördüğümde kendi başıma yapmaya çalışmışımdır.
Bence yorum yapmadan önce iyice bir düşünün ve kelimeleriniz tartın. Çünkü sonradan komik duruma düşme olasılığınız çok fazla olabiliyor. Bakın kendimden örnek vereyim. Opereysin.com bloguna ilk defa bloglinkleri.blogspot.com‘da gördüğüm bir haber ile girdim ve yazılara yorum yapmak için üye olma şartını görünce yaptıklarının yanlış olduğunu söylemeyi düşündüm (!) Ama sonra kendi kendime yav ben bu blogu daha tanımıyorum bile, bir “Hakkımızda” bölümüne gireyim, belki vardır bir sebebi dedim ve sonra adamların kaliteli içerik üretmek adına (isteyen katılır isteyen katılmaz) blogu bayağı bir kastırdıklarını gördüm. Sonra yorum yapmaktan vazgeçtim. Çünkü en azından bu konunun önceden konuşulduğunu öğrenmiş oldum. Sözüm o ki, birine suçlamalarda bulunurken önce o kişiyi tanımaya bakın. Böylece gerçekten haklı iseniz o kişinin kaçış kapılarını da kapamış olursunuz. Sizin de yapmanız gereken Erhan’ın blogunu bir kaç saat de olsa okumanız. O zaman niye yanlış kişiyi suçladığınızı anlayacaksınız
Of be ne döktüm içimi
26 Aralık 2007, 00:43
On Bağlantı #10…
Bağlantı #96: Artık biri size “Sen MSN hack’leyebiliyor muydun?” diye sorarsa bu bağlantıyı yollayın, akılları başlarına gelsin. Tırt Trinity’ye de selam olsun. Erhan Harmankaya’ya teşekkür ediyoruz.
Bağlantı #97: Reiki hakkında …
26 Aralık 2007, 15:41
çeviri de olsa alıntı da olsa ne olursa olsun. türkçe kaynak için erhan abi çalışmıyor mu bu bize yeter kendine güvene, erhan abiyi beğenmeyen daha orjinal yazılar yazar. zaten burda amaç türkçe içerik. bilmem anlatabildim mi…
26 Aralık 2007, 16:07
ben polemiklere girmek istemiyorum. bu blogu takip edenler zaten erhan’ın neler yapıp neler yapamayacağını biliyor.
yaptığı işler de ortada. kendi de belirtmiş zaten neyi nerden aldığını. blogumda yorum kısımlarını bu şekilde yapmayı planlıyorum erhan saol 
27 Aralık 2007, 23:26
Icon seti linki yerine direkt olarak kaynak gösterilmesi daha makul olurdu.
Ama bu mühim değil, kodları açılmış basit bir çalışmayı geliştirdi eburhan. Zaten herkes bu günlüğün sahibinin bilgi düzeyini biliyor. Anlayan anlamıştır sanırım.
İyi günler,
Tartışma yerine bilgi alışverişi görmek istiyoruz…
28 Aralık 2007, 12:20
böyle şeyleri gördükçe ne makale yazasım ne de forumlarda soru cevaplayasım geliyor. Evet eleştri “iyi” olanı bulmak için olması gereken bir şey ama eleştri de her zaman yapıcı olmalı, kötü olanı dışlayıp sen kötüsün demek değildir. Kötü olanı iyileştirmek eleştrinin asıl amacı olmalıdır. Kaldıki erhan’ın yazısında kötü birşey göremiyorum ben belki benim hatam o ama neyse…
Küçük detaylara takılmak yerine biraz anlayışlı olalım ve “empati” kurmaya çalışalım arkadaşlar. Herkese sevgiler
“Bilmezki sorsun,
Sormazki bilsin,
Bilse sorardı,
Sorsa bilirdi.”
28 Aralık 2007, 18:04
Erhan, Meyve veren ağaç taşlanır. Sadece bunu düşünerek çalışmalarına devam et. Biz seni ve çalışmalarını çok seviyoruz. Bir kaç kendini bilmez yüzünden polemik oluşturmaya gerek yok.
29 Aralık 2007, 02:15
ben eburhan’ı uzun zamandır takip ediyorum. jquery olsun ajax-tr olsun bi kere bile kopyalanmış bi iş yaptığını görmedim bence ortada bi yalnış anlaşılma var. zaten kısıtlı türkçe döküman sıkıntısı yaşarken bu tarz işler yapan insanları kötülemek yerine desteklemek gerekir. eburhan teşekkürler.
29 Aralık 2007, 04:16
@Erhan, kardeşim yazdığın bu güzel makaleden ötürü sana teşekkür ediyorum. Fazla üzerine düşmediğim bir konuydu senin sayende biraz hatırlama ve ileride kullanma gereksinimi duydum.
Şimdi tartışmalara bakıyorum da bir hanım bir söz söylemiş herkes onu tartışıyor. Hani delinin bir kuyuya taş atmış misali.
O lafları eden hanım arkadaşı muhatap alıp konuşmanız hata arkadaşlar. Kendisinin birazcık bilgisi ve bu konuya ilgisi olsa ikonları Erhan’ın yapmadığını, Erhan’ın yabancı bir kaynaktan direkt Türkçe’ye çeviriyi hiç yapmadığını, kendi başına ve kendi bilgisi dahilinde bir kod yazdığını anlardı!
Allah kitap aşkına, ya o hanım arkadaşın son yazdığı cümleye nasıl bir şekilde tahammül edilir birisi bana bunu izah etsin! Gerek blog camiası gerekse de Türk internetinde faydalı olmaya çalışan ve elimizden geldiğince “Özgün İçerik” oluşturmaya çalışan bir grup adamız. Bir grup adamız diyorum, bu kategoriye kendimi sokuyorum. Hatta ve hatta kendimi nasıl bu kategoriye sokuyorsam Erhan’ı da ha keza bu kategoriye öyle sokuyorum.
Şimdi böyle insanları siz tutup kendi sitesinde resmen “hırsızlıkla” suçlarsanız ondan sonra çok debelenirsiniz Türk interneti gelişmiyor diye! Adam bizlere faydalı olmaya çalışıyor, birşeyler anlatmaya çalışıyor, hanımın konuştuğuna bakın!
Erhan kardeşim çok özür dilerim, bu yorumu yazmak zorundaydım, ileri gittiysem affola, yorum dilersen silinebilir. Alınmam gücenmem.
Başarıların daim olsun inşallah.
29 Aralık 2007, 12:12
Bir blog konusu kolay yazılmıyor. Ayrıca konu çok işe yarar eyv.
31 Aralık 2007, 11:03
[…] Eburhan’dan “Css ile hazırladığım mesaj kutuları” Bağlantı […]
31 Aralık 2007, 20:36
Konunun başlığı “Css ile hazırladığım mesaj kutuları”. Biraz tamamen siz hazırlamışsınız gibi bir manaya geliyor. Belki “İnternetten derlediğim mesaj kutuları” gibi bir başlık seçseydiniz daha doğru olabilir ve daha az tepki çekebilirdi
2 Ocak 2008, 00:34
Ercu cssden çok anlamıyosun , görüşüm o yönde …
10 Ocak 2008, 13:44
Erhan bulup derleyip yeniden düzenleyip kendi adına yayınlamış da olsa ki zannetmiyorum ve asla ihtimal vermiyorum, bu kadar büyütülecek birşey değil.
ercünün dediklerine gelirsek;
1. Türklere ve Türklüğe hakaret edemezsin. Anayasal şuç.
2. Sen bugüne kadar öğrendiklerini annenin karnında mı öğrendin? Yazdın mı bilmiyorum ama yazdıysan 2 satır kodu hep kendi kafandan mı yazdın? Birşeyleri örnek almadın mı?
İnsanlar taklit ederek öğrenirler. Çocuklar bile konuşmayı taklit ederek öğrenir. Zaten taklit etme bizim kendimizde var. Taklitten sonrası kendini geliştirip özgün değerler ve ürünler vermektir. Eminim Erhan da bu fazlasıyla var. Erhan’ın araştırıp getirip önümüze koyması bile birden fazla teşekkürü gerektirecek durumdur. Bu yüzden acımasızca eleştirmek yerine, eleştirilerin yapıcı olsun. Karalamak yerine birlikte birşeyleri düzeltmek olsun.
Erhan sağolasın kardeşim. Paylaşımların için. Biz senin arkanda değil yanındayız. Seninle omuz omuzayız.
BİLİNE….
25 Ocak 2008, 09:44
[…] Upload Class isimli PHP uygulaması ile bir sunucuya dosya yükleme işlemi yapabiliyorduk. Css Message Boxes isimli CSS uygulaması ile de web sayfamızı kullananlara, yapılan bir işlemin sonrasında […]
27 Ocak 2008, 21:26
Blogger için yaptım ama daha o ilk CSS kodunda linki falan ayarladım ama olmadı site uçtu yani gerçi sonra düzelttim ama nasıl olacak bu iş? O CSS kodunu nereye yazacağım.
30 Ocak 2008, 17:24
Dostum seni sürekli takip ediyorum.
Çok başarılı bir çalışma yapıyorsun.
Canı gönülden kutlarım.
Emeğine sağlık.
5 Şubat 2008, 15:57
Ellerine sağlık güzel olmuş.
14 Mart 2008, 22:47
[…] eburhan’ın internet alemi ile paylaşmış olduğu ve benimde çok işimi gören CssBoxes uygulamasısnı kullandım. İkonlar için iconfinder.net’ten faydalandım. Esin kaynağı olarak […]