Bir çok web sayfasında kullanılan lightbox ve Facebook’da sık sık karşılaştığımız sayfa içi pencerelere benzer. (Lütfen daha net görebilmek için demoya bakın.)

• Esnek bir yapısı vardır. Bu uygulamayı kullanarak kendi alert (uyari), confirm (onay) pencerelerinizi yaratabilirsiniz.
• Bir çok tarayıcıda çalışır (test edilenler: ie6-7-8-9, firefox 3.6, chrome 6.0) (lütfen tarayıcı testlerinizi yapın ve yorum olarak bu makalenin altına ekleyin.)
• Mesaj kutularının içerikleri html ile oluşturulabilir.
• Küçük boyutludur. 10,4 kb (minified: 7.94 kb)

Dosya boyutu : Uygulamanın boyutu daha küçük olabilirdi. İçerisinde var olan bir çok işlem Internet Explorer desteğini sağlamak içindir. Internet explorer(6-7-8) sabit (position:fixed) konumlandırmayı desteklemediği için resize ve scroll olaylarında bir çok işlem yaptırmak durumundaydım. Bu yüzden boyut arttı. Tabi framework kullanmamanın da kendi fonksiyonlarımızı yazarak dosya boyutunu artırdığını unutmayalım.

Neden framework (jquery, mootools, prototype.js vs) kullanmadım : Burada uygulamanın geliştirilmesinin tarihini kısaca anlatayım. Önce şuanda olduğu gibi framework’süz bir şekilde geliştirdim uygulamayı. Ardından aynı uygulamayı jquery kullanarak tekrar geliştirdim. Bir çok kez sil baştan yeniden yazdım kodları. Farklı kodlama tekniklerini denedim. Hem kullanım alanını genişletmek hem de tarayıcılara ek yük bindirmemek için en son olarak herhangi bir çatı kullanmamaya karar verdim. Zaten kullanacağım çatının da çok az yararı olacaktı. Bir kaç fonksiyon için jquery kullanmaya değmez diye düşündüm.

Örnek sayfayı görebilmek için buraya tıklayın.

Uygulamayı indirebilmek için buraya tıklayın.

Boyutun küçültülmüş halini (minified) indirebilmek için buraya tıklayın.

Kullanım:

Uygulamanın sitil kodları aşağıdaki gibidir ve istediğiniz şekilde düzenleyebilirsiniz:

.message-box-overlay {
	background-color:#000;
	opacity:0.4;
	filter:alpha(opacity=40);
}
 
.message-box {
	font-size:12px;
	font-family:Tahoma;
	background-color:#fff;
	overflow:hidden;
	text-align:left;
	padding:8px;
}
.m-box-table td.tl, .m-box-table td.br {
	width:10px;
	height:10px;
}
 
.m-box-table td.tl {
	background:url(images/topleft.png) no-repeat;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/topleft.png',sizingMethod='scale');
}
.m-box-table td.tr {
	background:url(images/topright.png) no-repeat;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/topright.png',sizingMethod='scale');
}
.m-box-table td.bl {
	background:url(images/bottomleft.png) no-repeat;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bottomleft.png',sizingMethod='scale');
}
.m-box-table td.br {
	background:url(images/bottomright.png) no-repeat;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bottomright.png',sizingMethod='scale');
}
.m-box-table td.tc {
	background:url(images/transparent.png) repeat-x;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/transparent.png',sizingMethod='scale');
}
.m-box-table td.bc {
	background:url(images/transparent.png) repeat-x;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/transparent.png',sizingMethod='scale');
}
.m-box-table td.ml {
	background:url(images/transparent.png) repeat-y;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/transparent.png',sizingMethod='scale');
}
.m-box-table td.mr {
	background:url(images/transparent.png) repeat-y;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/transparent.png',sizingMethod='scale');
}

En basit olarak bir mesaj penceresi gösterebilmek için şu kodu çalıştırmalısınız:

messageBox.show("Merhaba Dünyalı");

Bu işlem sol üst köşede mesaj penceresi gösterecektir.

messageBox nesnesi temel olarak 2 metoda sahiptir.
show ve close.
Tahmin edilebileceği gibi show mesaj penceresini gösterir ve close ise mesaj penceresini kapatır.

show fonksiyonunun yapısı:

3 argüman alır.

1.si gösterilecek içeriktir ki html destekler.
2.si gösterilecek pencerenin dikey olarak konumudur. Girilmesi zorunlu değildir. Girilmezse sıfır (0) kabul eder ve pencere en üstte gösterilir. Bu alana top,middle,center,bottom kelimelerini ya da pixel olarak uzaklığı ifade eden sayısal (numerik) bir konumlandırma değeri girebilirsiniz. middle ile center (script için) aynı anlama karşılık gelmektedir ve dikey olarak ekranın ortasını tanımlamaktadır.
3.sü ise gösterilecek pencerenin yatay olarak konumuzudur. Girilmesi zorunlu değildir. Girilmezse sıfır (0) kabul eder ve pencere en solda gösterilir. Değer olarak 2. argümandaki değer türlerinin aynısını girebilirsiniz.

2. ve 3. argümanlar için girilecek değerler string türünde olmalıdır.
“top” : en üst. sadece 2. argümanda kullanılabilir.
“bottom” : en alt. sadece 2. argümanda kullanılabilir.
“left” : en sol. sadece 3. argümanda kullanılabilir.
“right” : en sağ. sadece 3. argümanda kullanılabilir.
“center” veya “middle” : orta. 2. ve 3. argümanlarda kullanılabilir.
anlamlarını taşımaktadırlar.

close fonksiyonunun yapısı :
Açılan messageBox penceresini kapatma işlemi için messageBox nesnesinin close metodunu çalıştırmanız yeterlidir.

Kapama işlemi için örnekler:

messageBox.show("<a href='messageBox.close()'>Beni Kapat</a>");

Uygulama ayarları:
messagebox.js dosyasının içerisinde /* SETTINGS */ ile başlayıp /* END SETTINGS */ ile biten aralıkta ayar satırları bulunuyor.

top_distance : 200,
overlay_close : false,
animation : false, // or "fade"
min_width : 300,
max_width : 900,

top_distance, üstten uzaklık. (Eğer konumlandırma için show metodunun ilk argümanı top girilmişse geçerli sayılır.)

overlay_close, arka plana tıklandığında mesaj penceresinin kapatılıp kapatılmayacağı belirlenir.

animation, messageBox penceresinin açılırken ve kapanırken ne tür bir animasyon kullanacağını belirler. Şuan için animasyon olarak sadece “fade” desteklenmektedir. Yakın zaman “slide” animasyon türüde eklenecektir.

min_width, messageBox penceresinin alabileceği minimum genişliktir.

max_width, messageBox penceresinin alabileceği maximum genişliktir.

Not : Yakında zamanda uygulamaya min_height ve max_height özellikleri de eklenecektir.

Örnek sayfayı görebilmek için buraya tıklayın.

Uygulamayı indirebilmek için buraya tıklayın.

Boyutun küçültülmüş halini (minified) indirebilmek için buraya tıklayın.

Uygulamayı örnek dosyasıyla birlikte indirmek için buraya tıklayın.

Program ffmpeg için görsel bir arayüz görevi görüyor.

• Kurulum gerekmiyor.
• Kullanımı basit bir yapısı var.
• Bir çok video türünü destekliyor (avi, mpeg1, mpeg2, divx, mpeg4, mp4, flv, vmw).
• Windows XP/Vista/7 üzerinde çalışabiliyor.

Umarım işe yarar.

İndirmek için buraya tıklayın.

En çok bilinen iki css sıfırlayıcı (reset) dosyası olan Eric Meyer’ in css dosyası ve Yahoo User Interface (yui) css dosyasından farklı olarak Toucan sıfırlayıcısı tarayıcılar arasındaki css tanımlama farklılıklarını yok etmekle birlikte tüm tarayıcılarda  tipografi, tablolar, başlıklar, paragraflar, listeler, formlar vs. elementler için stil tanımlamalarını yeni jenerik kurallara göre yeniden yapılandırır.

Küçük, esnek ve tarayıcı dostu yapıya sahiptir. Ücretsizdir.

Toucan CSS Reset sitesi : http://borderleft.com/labs/

Demo için tıklayın.

Küçültülmüş halini indirmek için buraya ya da  normal (okunabilir, sıkıştırılmamış) halini indirmek için buraya tıklayın.

• Yeni ve daha hızlı javascript motoru
• HTML5, CSS3 ve SVG desteği
• Basit kullanıcı arayüzü
• Daha hızlı gezinme için gelişmiş özellikler

Firefox’ta kullandığımız FireBug benzeri entegre olarak sunulmuş Developer Tools (Geliştirici Araçları) barındırıyor.
Javascript motoru gerçekten hızlı (bir çok javascript uygulaması ile test edildi.).

SunSpider test sonuçları:
Firefox 3.6.10 : 1260 ms
Internet Explorer 9 Beta : 659 ms

Olumsuz özellikleri:
Adres satırı ve tablar yan yana konumlandırılmış. Bu alışık olmadığımız bir durum. Kötü tarafı ise bu konumlandırmayı değiştiremiyorsunuz.
Toolbarların ve araçların konumlandırılması sabitlenmiş ve siz değiştiremiyorsunuz. Bu benim için ciddi bir olumsuzluk.

PHP ve MySQL ‘ de aynı işlevi yapan fonksiyonlar vardır. Mesela php’de time() ve mysql’de UNIX_TIMESTAMP() fonksiyonları 01-01-1970′den bugüne kadar geçen tüm saniyelerin toplamıdır.
Yazılımlarımızda performans kazanımı için özellikle birden fazla sorgu gerçekleştirirken kullanacağımız sorgu cümlelerine dikkat etmeliyiz.

Yukarıdaki timestamp fonksiyonlarını kullanan bir örnek verelim.
Veritabanına 10 satır veri girecek isek php’nin time() fonksiyonunu kullanarak oluşacak timestamp değerinin bir değişkene atayıp sorgularımızı gerçekleştirmemiz daha performanslı olacaktır.

INSERT INTO uyeler VALUES(1, 'Gökhan Bora', UNIX_TIMESTAMP())
INSERT INTO uyeler VALUES(2, 'Ali Veli', UNIX_TIMESTAMP())
....
INSERT INTO uyeler VALUES(10, 'Kırkdokuz Elli', UNIX_TIMESTAMP())

yerine

$tsval = TIME();
 
INSERT INTO uyeler VALUES(1, 'Gökhan Bora', $tsval)
INSERT INTO uyeler VALUES(2, 'Ali Veli', $tsval)
....
INSERT INTO uyeler VALUES(10, 'Kırkdokuz Elli', $tsval)

kullanmamız gerekiyor. Çünkü ilk örnekte MySQL 10defa UNIX_TIMESTAMP() fonksiyonunu çalıştırıyor.

Benzer bir durumda mysql RAND() fonksiyonu için geçerli. Birçok programcı bu hataya düşer. Tablodan rasgele bir satırı almak için bu fonksiyonu kullanır. Bunun yerine php’de rasgele sayı üretip bu sayıya göre satırı almalıyız.
Örnek (nettuts’tan alıntıdır.)

// ne yapmamalıyız
$r = mysql_query("SELECT username FROM user ORDER BY RAND() LIMIT 1");
 
// doğru olan
$r = mysql_query("SELECT count(*) FROM user");
$d = mysql_fetch_row($r);
$rand = mt_rand(0,$d[0] - 1);
 
$r = mysql_query("SELECT username FROM user LIMIT $rand, 1");

Aşağıdaki kaynaktan daha fazla performans ipucuna erişebilirsiniz:
Kaynak: http://net.tutsplus.com/tutorials/other/top-20-mysql-best-practices/

Birçoğumuz ip adreslerini veritabanında saklarken 15 karakter uzunluğunda varchar ile oluşturulmuş sütunlar kullanırız. Bu durum INT alanından 4byte daha fazla kayba neden olur. Bunun yerine UNSIGNED INT kullanmamız sistem kaynaklarını 4byte daha az tüketmemizi sağlar.

Daha performanslı bir yapı için 10 karakter uzunluğunda UNSIGNED INT kullanıyoruz. IP’yi veritabanına kaydederken INET_ATON() fonksiyonunu kullanıyoruz.

INSERT INTO uyeler VALUES(3, 'Gökhan Bora', INET_ATON('192.168.5.4'));

IP’yi veritabanından alırken ise INET_NTOA() fonksiyonunu kullanıyoruz.

SELECT INET_NTOA(ip) AS ip FROM uyeler WHERE id=3;

Kaynaklar:
http://dev.mysql.com/doc/refman/5.0/en/miscellaneous-functions.html

find ./ -type d -exec chmod 755 {} \;

Bir dizin altındaki sadece dosyaların yetkilendirme (chmod) ayarlarını yapmak için :

find . -type f -exec chmod 644 {} \;

kaynak: http://duntuk.com/chmod-directories-only

ek:
Linux altyapılı sunucunuzda windows’un “Thumbs.db” dosyalarını silmek için :

find . -type f -name "Thumbs.db" -exec rm {} \;

http://www.iconfinder.net/

http://www.veryicon.com/

http://www.iconlet.com/

http://www.iconseeker.com/

http://icons-search.com/

İkon kaynakları :

http://xyberneticos.com/index.php/2008/11/09/icon-pack-free/

http://www.noupe.com/icons/50-most-beautiful-icon-sets-created-in-2008.html

http://www.dezinerfolio.com/2008/12/23/avatar-icon-sets-beauty

http://webdesignledger.com/freebies/21-best-icon-sets-for-designing-web-apps

http://www.famfamfam.com/lab/icons/

http://dryicons.com/free-icons/

http://www.allwebdesignresources.com/webdesignblogs/graphics/free-icons-sites-websites-that-offer-free-icons/

Bu tür sorunlar yaşamamanız için benim önerilerim şunlar:

1. Öncelikle kullandığınız ide,metin editörü vb (artık herneyse) ayarlarından varsayılan karakter setini utf-8 yapın ve dosyalarınızı utf-8 karakter seti formatında kaydedin.
2. Veritabanı oluştururken bağlantı karşılaştırmanızı utf8_xxx yapın.
3. Veritabanı oluştururken karakter seti olarak yine utf8_xxx seçin.
4. Veritabanına veri girdiğiniz html sayfanızın karakter setinin utf-8 olmasına dikkat edin.
5. Sitenizin script dosyasından veritabanı sunucusuna bağlandıktan sonra şu sorguyu çalıştırmayı unutmayın : ” SET NAMES ‘UTF-8′; ” (çift tırnaklar yok, tek tırnaklar var.)

Bunları yaptıktan sonra sitenizde karakter seti sorunları yaşamazsınız. Ancak var olan veriler utf-8′e çevrilmez ise bu sefer eski içeriğiniz sayfanızda hatalı gösterilecektir.

Benim tek cümleyle önerim: “Herşey utf-8 olsun ve bunu biran önce yapın.”.

Şimdi kodlara geçelim.

Önce basit bir html sayfası oluşturarak tooltipimizi kullanacak elemanı yaratıyoruz.

<html>
<head>
<title>Javascript Tooltip</title>
<link rel="stylesheet" type="text/css" href="tooltip.css" />
<script src="tooltip.js" type="text/javascript"></script>
</head>
<body>
<div id="nesne" title="selam <b>nasılsınız</b>"></div>
</body>
</html>

Fare ile sayfamızdaki nesnenin üzerine gelince görünen yazı tahmin edildiği gibi şu şekilde olacaktır :

Bunu daha görsel hale getirmeye çalışacağız. Yazı sonunda öğrendiklerimizle sonucu şu hale getirebileceğiz.

tooltip.js dosyamızın içinde tooltip adında bir fonksiyon oluşturacağız. işimizi yapan fonksiyon bu olacak.

 
function tooltip(nesne,zamanasimi,tipwidth,sinif) {
	var tip = {
		mesaj : null,
		nesne : null,
		temp : null
	}
 
	tip.mesaj = nesne.title;
	tip.temp = nesne.title;
	nesne.title="";
	nesne.style.cursor="help";
	tip.nesne = document.createElement("div");
	if(sinif) {tip.nesne.className=sinif;} else {tip.nesne.className="toolbox";}
 
	with(tip.nesne.style) {
		position	= "absolute";
		left		= stil_al(nesne,"left");
		top		= stil_al(nesne,"top");
		width		= tipwidth||'auto';
		display	= "none";
	}
	tip.nesne.innerHTML = tip.mesaj;
 
	document.body.appendChild(tip.nesne);
	setTimeout(function(){tip.nesne.style.display="inline"},zamanasimi||0);
	nesne.onmousemove = function(e) {
		e = window.event||e;
		tip.nesne.style.left = (e.clientX)+"px";
		tip.nesne.style.top = (e.clientY)+"px";
	}
	nesne.onmouseout = function() {
		tip.nesne.parentNode.removeChild(tip.nesne);
		if(tip.temp!=null) {nesne.title=tip.temp;}
	}
}

Fonksiyonumuz yukarıdaki gibidir. Fonksiyonumuzu kullanırken lazım olacak olan stil_al fonksiyonu önceki makalede anlatılmıştır. Bu fonksiyon html elemanının dökümandaki sitil ya da konum bilgilerini almaya yarıyor.

stil_al fonksiyonumuz :

function stil_al(nesne,ozellik) {
	sonuc = '';
	// Eğer internet exploer ise ve ozellik opacity ise
	if(document.all && ozellik=='opacity') {
		// ozellik değerini değiştir ve filter yap.
		ozellik = 'filter';
	}
	if(nesne.currentStyle) {
		// ozellik içinde - geçiyorsa tireyi sil ve tireden sonraki ilk harfi büyüt.
		ozellik = ozellik.replace(/\-(\w)/g, function (icerik_match, p1){return p1.toUpperCase();});
		sonuc = nesne.currentStyle[ozellik];
	} else {
		sonuc = document.defaultView.getComputedStyle(nesne, "").getPropertyValue(ozellik);
	}
	return sonuc;
}

Şimdi tooltip fonksiyonunun anlatımına geçelim.

fonksiyonumuz şu argümanları alıyor:
nesne = aktif nesne,
zamanasimi = ne kadar zaman sonra mesaj kutusu gösterilecek,
tipwidth = gösterilen mesaj kutusunun genişliğini belirtebiliriz,
sinif = gösterilen mesaj kutusuna bir css sitil sınıfı atayarak her mesaj kutusunda farklı görselliğe sahip kutular oluşturabileceğiz.

	var tip = {
		mesaj : null,
		nesne : null,
		temp : null
	}

Bu kısımda tip adında 3 özellikli bir nesne oluşturuyoruz. Bu nesne tooltip bilgilerini kaydetmede işimize yarayacak.

	tip.mesaj = nesne.title;
	tip.temp = nesne.title;
	nesne.title="";
	nesne.style.cursor="help";
	tip.nesne = document.createElement("div");
	if(sinif) {tip.nesne.className=sinif;} else {tip.nesne.className="toolbox";}

Bu kısımda tip nesnemizin mesaj ve temp değerini fonksiyona ilk argümanda geçirilmiş nesnenin title özelliğinden alıyoruz.
mesaj özelliği üzerinde işlemler yapacağımız için bir de temp değeri oluşturduk ve temp değeri orjinal mesajı tutacak. Buradaki amaç fare nesne üzerinden ayrıldıktan sonra nesnenin title özelliğine ilk değeri tekrar atmaktır.
ilk argümandaki nesnenin üzerine fare gelince bizim gösterdiğimiz mesajla birlikte kendi orjinal mesajını göstermesin diye nesnemizin title özelliğine boş (null) veriyoruz. nesnemizin üzerine fare geldiğinde cursor’u help olarak değiştiriyoruz ve daha anlamlı bir görsel haline getirmiş oluyoruz.
tip nesnemizin nesne özelliğine yeni oluşturduğumuz bir div elementi geçiriyoz. Sahte title olarak kullanacağımız eleman (mesaj kutusu da diyebiliriz) burada oluşturulmuş oluyor.
Eğer 4. argüman olan sinif değeri girilmişse mesaj kutusu olarak kullanacağımız tip.nesne’nin css sınıfını (className) sinif olarak giriyoruz. Eğer girilmemişse varsayılan olarak mesaj kutumuzun css sınıfını toolbox olarak belirliyoruz.

	with(tip.nesne.style) {
		position	= "absolute";
		left		= stil_al(nesne,"left");
		top		= stil_al(nesne,"top");
		width		= tipwidth||'auto';
		display	= "none";
	}
	tip.nesne.innerHTML = tip.mesaj;
	document.body.appendChild(tip.nesne);

Burada tip nesnemizin nesne özelliğinde sakladığımız mesaj kutumuzun zorunlu bazı konumlandırma ve sitil özelliklerini belirliyoruz.
position = “absolute”; // mesaj kutumuzun hareket etmesi için diğer elementlerden bağımsız olması gerekiyor. bu yüzden absolute verdik.
left ve top değerlerine ilk argümanla girilmiş html nesnesinin left ve top özelliklerini atadık.
width değerine 3. argümanla girilmiş width değerini yada 3. argüman girilmemişse auto (otomatik oluştur) değerini verdik.
display özelliğine none vererek oluşturduğumuz mesaj kutusunun gösterilmemesini sağladık. Buradaki amaç fonksiyonun bizim belirlediğimiz ve fonksiyonumuza 2. argüman olarak girilen zaman aşımı değerine göre gösterilmesi.

Daha sonra mesaj kutusu olarak kullandığımız tip.nesne’nin innerHTML yani html içeriğini fonksiyonun ilk satırlarında belirlediğimiz ve ilk argümanla girilmiş ana nesnemizin title değerini içeren tip.mesaj değerini verdik.
document.body.appendChild(tip.nesne); ile mesaj kutumuz olan tip.nesne’yi dökümanımızın gövdesine (body) ekledik.

Buraya kadar istediğimiz mesaj kutusunu oluşturduk. Mesaj kutusunu ana nesnemize göre konumlandırdık. Ana nesnemizin title özelliğini boşaltarak ikinci bir mesaj gösterilmesini engelledik. Enson olarak nesnemizi dökümanımıza dahil ettik.

Buradan sonra ise gösterilen mesaj kutusunun fare koordinatlarına göre hareket ettirmek ve gösterilecek mesaj kutusunun zaman aşımı işlemini yapmak kaldı. Bu işlemlerin ardından da farenin ana nesne üzerinden gittiğinde fonksiyonumuzun ilk satırlarında oluşturduğumuz mesaj kutusunu silme işlemi yapılacak.

	setTimeout(function(){tip.nesne.style.display="inline"},zamanasimi||0);
	nesne.onmousemove = function(e) {
		e = window.event||e;
		tip.nesne.style.left = (e.clientX)+"px";
		tip.nesne.style.top = (e.clientY)+"px";
	}
	nesne.onmouseout = function() {
		tip.nesne.parentNode.removeChild(tip.nesne);
		if(tip.temp!=null) {nesne.title=tip.temp;}
	}

İlk satırda setTimeout ile eğer son argüman olan zaman aşımı değeri verilmişse bu değer, verilmemişse 0 (sıfır) değerini geçirerek mesaj kutumuz olan tip.nesne’nin gösterilmesini sağladık.

Fonksiyonumuza ilk argüman olarak girilmiş ana nesnemiz olan nesne’nin onmousemove olayına fare koordinatlarını (e.clientX ve e.clientY) kullanarak mesaj kutumuzun dökümandaki konumunu değiştirebilen bir kaç özellik yazdık.
onmouseout olayına (fare ana nesne üzerinden gitmişse) ise mesaj kutumuzu yok eden kodları yazdık ve gene bu olayın içine tüm işlemler bittikten sonra ana nesnemizin title özelliğine orjinal mesajımızı (tip.temp) aktardır. Böylelikle fare ana eleman üzerinden ayrılıp tekrar geldiğinde tüm işlemler baştan eksiksik yapılması sağlandı.

Tüm bu işlemler ile birlikte istediğimizi yaptık. Ama mesaj kutumuzun sitil özelliklerini değiştirmemizde bize görsel açıdan yarar sağlayacaktır. Bunun için html dosyamızda içeri aldığımız tooltip.css dosyasına bir kaç satır css kodu yazmamız gerekiyor.
Örnek :

#nesne {
	width:100px;
	height:50px;
	border:1px solid #000;
}
.toolbox {
	display:inline;
	padding:6px;
	margin:18px 8px;
	background-color:#fff;
	border:1px solid #000;
	font-family:Tahoma;
	font-size:12px;
	opacity:0.9;
	filter:alpha(opacity=90);
}

Anlatım sonucunda oluşturduğumuz dosyalara buradan ulaşabilirsiniz.
HTML Dosyası
Javascript Dosyası
CSS Dosyası