Genel,

CSS3 Renkli butonlar

css3button

CSS3 ile renkli butonlar çok daha hoş hatta photoshopta hazırlanmış gibi gözüküyor. Üstelik kulanımıda çok basit.

Butonu kullanmak için üzerine taransparan bir png dosyası ve ilgili Css kodları kısaca şöyle;
Transparan png dosyası;buttonbg.png

.awesome{
background: #222 urlbuttonbg.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
position: relative;
cursor: pointer;
}


Size kodları ile ebatlarını kolayca ayarlayabilirsiniz;

/* Sizes ---------- */
.small.awesome {
font-size: 11px;
}
.medium.awesome {
font-size: 13px;
}
.large.awesome {
font-size: 14px;
padding: 8px 14px 9px;
}

background-color: kısmında butonunuza ait renkleri belirleyebilirsiniz;

/* Colors ---------- */
.blue.awesome {
background-color: #2daebf;
}
.red.awesome {
background-color: #e33100;
}
.magenta.awesome {
background-color: #a9014b;
}
.orange.awesome {
background-color: #ff5c00;
}
.yellow.awesome {
background-color: #ffb515;
}

Yazıyı yayınlamamdan birkaçdakika sonra arkadaşlarım beni uyardı; Ben Firefox 3.5.3 Kullanıyorum oyuzden köşeler oval görünüyor. Fakat arkadaşlarım ie 6 ( ki ben neden hala insanlar ie kullanır şaşıyorum) kullandığı için browserları CSS3’ü desteklemediği için köşeleri oval olarak göremiyorlar. CSS3’ü destekleyen browserlar;
Opera 10

Firefox 3.5.3

Önizleme:Türkçe
Önizleme:İngilizce
author: www.zurb.com

Genel,

Otomatik olarak WordPress blogunuzda kullandığınız resimleri yeniden boyutlandırmak



Web blogunuzda kullanacağınız resimlerin boyutları büyüdükçe tasarımda problemlere neden olur. Bu resimlerin boyutlarını ya bir resim düzenleme programında ayarlamak, yada img kodu içerisinde width ve height değerlerini değiştirerek ayarlayabilirsiniz. Fakat bunun üzerinde fazla zaman kaybetmemek için wortpress alt yapılı blogumuzda basit değişiklikler yaparak otomatik bir şekilde boyutlandırabiliriyoruz. Bunun için öncelikle:

1. timthumb.phpyi kopyalayarak wortpress blogunuzun bulunduğu sunucuya ftp programı ile yükleyin.
2. Aşağıdaki kodu functions.php dosyasına yapıştırın. w=590 yazan yere istediğiniz boyutu yazınız.

function imageresizer( $atts, $content = null ) {
	return '<img src="/timthumb.php?src='.$content.'&w=590"
           alt="" />';
}

add_shortcode('img', 'imageresizer');

Artık istediğiniz bir resmi blogunuza yükleyerek test edebilirsiniz.

Genel,

Zen codingle kod yazmak artık çok kolay…

Web tasarımı ile uğraşanlar bilirlerki kodlama büyük vakit alır, hele birde kodlamayı sıfırdan yapıyorsanız. Bu yüzden çoğu kişi kalıp kod kullanır. Fakat eninde sonunda tasarıma uyması için kod sisteminde değişiklik yapmanız gerekir. Kodlamayla ilgili editörlerin çoğu içerdikleri kod kütüphaneleriyle size yardımcı olurlar ama kolaylık sağlama konusundada Zen coding devreye girer. Zen coding kodlamayla ilgili editörlerde daha rahat ve kolay kodlama yapabilmemizi sağlayan bir javascript eklentisidir. Aşağıdaki videoyu izlerseniz sanırım olayı daha iyi kavrayabilirsiniz.

[vimeo]http://vimeo.com/7405114[/vimeo]

Download etmek için: Zen coding

Desteklediği Kod yazma editörleri;

Desteklemesi planlanan Kod yazma editörleri;


Ben Dreamweaver ve Ultraedit de kullandım. Ama her ikisindede hotkey atayamadım. Kullanım hakkında daha detaylı bilgiye sahip arkadaşlar varsa benimle bağlantıya geçsin. En sonunda Aptana studio’da zen coding’i tam anlamıyla kullanmaya başladım. Artık gerçekten bir zorunluluk haline geldi benim için.

Dreamweaverda kullanabilmek için Adobe Extension Manager yüklü olması gerekir.Daha sonra commands menüsünden, Manage Extensions sekmesi tıklanır. Zen codingden indirilen Dreamweaver zen coding extensioneklentisi install (yükleme) yapılır ve artık kod yazmaya başlayabiliriz.

Örneğin;div#ellibir+ul>li*5`kodunu yazıp. yazdığımız kodu mouse ile seçili hale getirip. commands menüsünden Expand Abbreviation sekmesini tıkladığımızda yazdığımız kodun.
<div id="ellibir"></div>
          <ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>

olarak değiştiğini göreceksiniz.



Benden bu kadar dediğim gibi zen coding hakkında daha fazla bilgiye sahip arkadaşlar yazılarını bizimle paylaşırlarsa sevinirim.

Genel,

Photoshop emboss

Photoshopta yazıların arka zemin rengi içerisine gömülü gibi gözükmesini sağlayan emboss efekti. Ellibir.nette artık bazı temel kolay uygulanabilecek photoshop tutorialleri video olarak vermeye başladık. Ayrıca vimeo hazırladığım videoyu DevelopmenT on Vimeo’ya eklemiş.

[vimeo]http://vimeo.com/7182741[/vimeo]