Geçtiğimiz günlerde StumbleUpon’da yeni siteler keşfederken karşılaştığım bir makaleyi paylaşmak istedim. Bu makalede sitemizde kullanacağımız farklı renklerdeki butonları 3 dosyada nasıl toplayacağımız anlatılıyordu.

İşin Mantığı:
Yapmamız gereken şey öncelikle beyazdan griye doğru rengi kayan (gradient) bir buton oluşturmak olacak. Bunu izleyen aşama ise butona saydamlık vermek. Saydamlık vererek arkaplana koyduğumuz rengin butonun rengi gibi görünmesini sağlayacağız.

Butonumuz
Butonumuzu tasarladıktan sonra 3 parçaya böleceğiz. ilk iki parça butonun sağ ve sol başları olacak. üçüncü parça ise butonumuz ne kadar uzarsa uzasın işe yaramasını sağlayacak olan 1 piksellik orta parçayı oluşturmak olacak.

Son uygulamamız ise butona arkaplan olarak bir renk atamak ve butonu istediğimiz yerde kullanmak olacak.

HTML Kodu

<div class="btn btn1"><a href="#">Arama Butonu</a><span></span></div>

CSS Kodu

body {
	margin: 0;
	padding: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
}
.btn {
	float: left;
	clear: both;
	background: url(images/btn_sol.png) no-repeat;
	padding: 0 0 0 10px;
	margin: 5px 0;
}
.btn a{
	float: left;
	height: 40px;
	background: url(images/btn_orta.png) repeat-x left top;
	line-height: 40px;
	padding: 0 10px;
	color: #fff;
	font-size: 1em;
	text-decoration: none;
}
.btn span {
	background: url(images/btn_sag.png) no-repeat;
	float: left;
	width: 10px;
	height: 40px;
}
.btn1 { background-color: green; }
.btn2 { background-color: red; }
.btn3 { background-color: orange; }

Div ayracımıza btn ve btn1 ekleyerek butonumuzu başlattık. A ayracı ile orta kısmının yazımız kadar uzun olmasını sağladık. Span ayracını açıp kapatarak sağ taraftan butona bit komutunu verdik.

İşte bu kadar basit bir yöntemi 3 ufak png24 yada png8 dosyası ve kısa html&css kodları ile halletmemiz mümkün.

Yazının aslı Sohtanaka.com adresinde bulunmakta.

Uzunca bir süredir blog’um üstünden paylaşım yapmamıştım. Bunda biraz tatil modunun da etkisi olsa gerek. Bu günkü yazımızda Yatay ve dikey CSS menüleri hazırlamamızı sağlayan bir Web Uygulamasını tanıtacağız. CSS Menu Builder ile menü arkaplanının tipini ve menü tuşlarının şeklini belirledikten sonra renkler üstünde dilediğiniz oynamaları yaparak sitenize en uygun menüyü tasarlamanız mümkün. Şu an menü arkaplanı için kısıtlı seçim olsa da işinizi rahatlıkla görecektir.

Table ayraçlarını kullanırken, arkaplan resmi atamasıyla kolaylıkla yapabildiğimiz birden fazla resim dosyalı butonları ilk zamanlarda div ile yapmak zor olmuştu. Fakat çok basit bir mantığı olan div yöntemini woork‘de ele almışlar. Yukarıdaki butonlarda kullanacağımız 1 düğme arkaplanı ve 7-8 tane de özel ikon gerekmekte.

<a class=”button” href=”#”>
<span class=”delete”>Bu yazıyı sil</span>
</a>

Burada gördüğünüz <a> bizim kapsayan elemanımızı span ise ikonu oraya ekleyecek elemanı ifade edecek.

a.button{
background:url(img/button.gif);
display:block;
color:#555555;
font-weight:bold;
height:30px;
line-height:29px;
margin-bottom:14px;
text-decoration:none;
width:191px;
}
a:hover.button{
color:#0066CC;
}

Yukarıdaki CSS kodunda gördüğünüz gibi arkaplana geniş ve yuvarlak köşeli button.gif resmini ekledik.


.delete{
background:url(img/delete.gif) no-repeat 10px 8px;
text-indent:30px;
display:block;
}

Son kodumuz ile de delete class’ına sahip olan span elementine minik ikon ekledik. Orjinal yazıya ulaşmak ve kullanılan resimleri indirmek için ilgili yazıya bakabilirsiniz.

This article is written by Antonio Lupetti.