Ellibir'e Hoşgeldiniz

Ellibir kişisel bir weblogdur.

Merak ettilerinizi ve burada bulunmasını istediklerinizi lütfen bildiriniz!

Üye girişi

Şifremi unuttum?

Üyelik kapatılmıştır.

Üzgünüm şuan için üyelik sadece iletişim sayfasındaki formdan ve cetgin@gmail.com adresine başvurarak alınmaktadır..



2010 mart takvim wallpaper

Şub 28 da Genel



2010 Mart ayına ait wallpaper şeklinde takvimler, ingilizceler ama çok güzeller. www.smashingmagazine.com‘dan…

Photoshop emboss efekti

Şub 23 da Video

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.

http://www.vimeo.com/7182741

CSS3 Renkli butonlar

Şub 23 da Genel

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

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

Şub 23 da Genel



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.

Zen codingle kod yazmak artık çok kolay…

Şub 23 da Genel

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.

http://www.vimeo.com/7405114

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.

Photoshop emboss

Şub 23 da Genel

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ş.

http://www.vimeo.com/7182741

Zen coding

Şub 23 da Genel

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.

http://www.vimeo.com/7405114

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.

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.

Sigara yasağı…

Şub 23 da Genel


Sigara yasağı şuan ülkemizdede uygulanıyor. Ülkemizdede bu yasağa karşı birçok çözüm bulunmuştu. Ama isviçrede bir barda uygulananı en ilgi çekici olan sanırım. Kaynak

Tasarım nereye gidiyor…

Şub 21 da Genel



Ntvmsnbc tasımların nereye gittiğini bir fotoğraf galerisi ile göstermiş buyrun.

Banner denemeleri

Şub 17 da Genel


 

 

Pages: 1 2 Next