CSS3′ün en büyük sorunlarından biri birden fazla tarayıcıda çalışmasını sağlayabilmektir. bu şu anlama geliyor: en basitinden bir gölge efekti verebilmek için çapraz tarayıcı uyumlu bir şekilde kod yazmanız gerekiyor.

bu yazıda ise basit kullanıcı arabirimleri ile tamamen özelleştirilebilir kodlar üretebileceğiniz CSS3 araçları yer almaktadır.

CSS3 Generator
Efektlerin hepsini tamamen özelleştirebileceğiniz ve popüler CSS3 özellikleriden istediğinizi seçebileceğiniz bir araçtır.

Devamı ve kaynak için : rhymes – bildirgec.org

Web tasarımı bu günlerde HTML5 ve CSS3 ile büyük bir Upgrade yaşamakta. Tarayıcı desteklerinin giderek artması ile somut kullanımını giderek daha sık görmeye başladığımız, web dillerinin bu yeni versiyonları için hazırlanmış örnekleri ve eğitimleri, ilgili web sitelerinde çok daha fazla sayıda görmek mümkün.

Devamı ve kaynak için : algoz – bildirgec.org

HTML

<h3>Enter Name : </h3>

<div id="auto_box">
<input type="text" />
<div class="list_name none">
<p>Prashant</p>
<p>Arun</p>
<p>Sunny</p>
<p>Girish</p>
<p>Vikas</p>
<p>Raghubir</p>
<p>Sameer</p>
<p>John</p>
<p>Steve</p>
<p>Ember</p>
<p>Nichole</p>
<p>Tom</p>
</div>
</div>

jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js" language="javascript"></script>
	<script type="text/javascript" language="javascript">
		$( function() {
			$('#auto_box input').bind('keyup',function( e ){
		if( e.keyCode == 40 ) {
			if( $( '.highlight' ).length < 1 ) {
				$('.list_name p:first' ).addClass( 'highlight' );
			} else {
				if( $( '.highlight' ).next().length < 1 ) {
					$( '.highlight' ).removeClass( 'highlight' );
					$('.list_name p:first' ).addClass( 'highlight' );
				} else {
					var itsNext = $( '.highlight' ).removeClass( 'highlight' ).next().addClass( 'highlight' );
					if( itsNext.is( ':hidden' ) ) {
						$( this ).trigger( { type : 'keyup', keyCode : 40 });
					} else {
						$( '.highlight' )[0].scrollIntoView();
					}
				}
			}
			return;
		}
		if( e.keyCode == 38 ) {
			if( $( '.highlight' ).length < 1 ) {
				$('.list_name p:last' ).addClass( 'highlight' );
			} else {
				if( $( '.highlight' ).prev().length < 1 ) {
					$( '.highlight' ).removeClass( 'highlight' );
					$('.list_name p:last' ).addClass( 'highlight' );
				} else {
					var itsPrev = $( '.highlight' ).removeClass( 'highlight' ).prev().addClass( 'highlight' );
					if( itsPrev.is( ':hidden' ) ) {
						$( this ).trigger( { type : 'keyup', keyCode : 38 });
					} else {
						$( '.highlight' )[0].scrollIntoView();
					}
				}
			}
			return;
		}
		if( e.keyCode == 13 ) {
			$( '.highlight' ).trigger( 'click' );
			return;
		}
		if( $.trim( this.value ) == '' ) {
			$( '.list_name' ).hide();
			return;
		}
		var strToMatch = this.value;
		$( '.list_name' ).show();
		$( '.list_name p' ).each( function() {
			if( this.innerHTML.toLowerCase().indexOf( strToMatch.toLowerCase() ) > -1 ) {
				$( this ).show();
			} else {
				$( this ).hide();
			}
		});
	});

	function fixScroll() {
		var listContainer = $('#auto_box .list_name' )[ 0 ];
		listContainer.scrollTo( 0, 40 * $( '.highlight' ).prevAll().length );
	}

	$('#auto_box' ).click( function() {
		$( 'input', this ).focus();
	});

	$( 'span b' ).live( 'click', function() {
		$( '<p>' + $(this).parent().text().substr(1) + '</p>' ).appendTo( '.list_name' );
		$( this ).parent().remove();
	});

	$('.list_name p').live( 'click', function() {
		$('<span><b>x</b>'+this.innerHTML+'</span>').insertBefore('#auto_box input');
		$( this ).remove();
	}).live( 'mouseover', function() {
		$( '.highlight' ).removeClass('highlight');
		$( this ).addClass('highlight');
	});

	});

CSS

#auto_box{border:1px solid #ccc;padding:5px;}
		#auto_box span b{float:right;margin:3px 0 0 3px;font-size:10px;color:red;cursor:pointer}
		#auto_box span{font-weight:bold;display:inline-block;border:1px solid #eee;padding:0 4px;margin-right:5px;-moz-border-radius:5px;}
		#auto_box input{border:0;}
		.highlight{background:#DFF7FF}
		#auto_box .list_name{overflow-y:scroll;height:200px}

Demo

Kaynak(Source)

Bir programcı olarak çoğu zaman dışarıda olduğum zamanlar kod düzenlemek durumda kaldığım çok oluyor. Bu tür durumlarda en büyük yardımcım notepad olmaktadır. ama komutların yazım şekilleri ve parametleri açısından gelişmiş düzenleyiciler kullanmak herzaman kolaylık sağlamaktadır. işte olmadık yerde düzenlemeler yapabilmeniz için çevirimiçi düzenleciler…

Amy Editor
amy, 2007 yılında Petr Krontorad tarafından oluşturulmuştur. Bu gelişmiş düzenleyici görünüm itibariyle mac tarzındadır. Satır numaraları, yazım denetimi gibi özelliklerinin yanında daha bir çok kullanışlı özelliğe sahiptir. Ayrıca amy 20 tane dili desteklemektedir.

JSBin
ismindende anlaşılabileceği gibi jsbin, javascript odaklı bir düzenleyicidir. sade ve basit tasarımıyla oldukça hoş olan bu düzenleyicinin öne çıkan öne güzel özelliği “preview” düğmesi sayesinde yazdığınız kodu anında test edebiliyorsunuz. Diğer güzel özellikleri arasında ise çalışmalarınıza jquery ve mootools gibi javascript framworkler dahil edebiliyorsunuz.

Bespin
bespin, mozilla labs tarafından html5 kullanılarak hazırlanmış bir düzenleyicidir. Bu gelişmiş düzenleyiciyi kullanabilmek için bir hesap oluşturmak gerekiyor.

Kodingen
kodigen, gelişmiş düzenleyiciler arasında yerini almıştır. bu düzenleyicinin, kullanım açısından kolaylık sağlayan listeleri mevcuttur. Ayrıca isterseniz hesap oluşturarak ortak çalışmalar yapabilir, çalışmalarınızı depolayabilirsiniz. Aynı şekilde bu düzenleyicide birçok dili desteklemektedir.

Kaynak(Source)

Aynı işlem javascript kullanılarak yapılmaktadır bir çok sitede ama bunu javascript kullanmadan da yapabilmemiz mümkündür.

HTML

<div id="content-slider">
	<ul id="content-slider-inside">
		<li id="one">1</li>
		<li id="two">2</li>
		<li id="three">3</li>
		<li id="four">4</li>
		<li id="five">5</li>
	</ul>
</div>

<ul id="navigation">
	<li><a href="#one">1</a></li>
	<li><a href="#two">2</a></li>
	<li><a href="#three">3</a></li>
	<li><a href="#four">4</a></li>
	<li><a href="#five">5</a></li>
</ul>

CSS

#content-slider {
	width: 650px;
	overflow: hidden;
	height: 300px;
}

#content-slider-inside {
	list-style: none;
	height: 320px; 		// these 3 lines
	overflow: scroll;	// help Opera
	overflow-y: hidden;	// behave
}

	#content-slider-inside li {
		width: 650px;
		height: 300px;
	}

Demo Download

Kaynak(Source)

Pretty CSS3 Buttons

A Sexy Button Using CSS

Radioactive Buttons with CSS Animations and RGBa

Sexy Buttons

Cool Overlapped Menu using Sprites

Super Awesome Buttons

Fancy Buttons

Kaynak(Source)

CSS Cheat Sheet (V2)

CSS Shorthand Cheat Sheet

Colorful CSS Shorthand Cheat Sheet

CSS Cheat Sheet

CSS2 Reference Guide

Bir çok modern tarayıcının desteklediği CSS3 ve HTML5 kullanmaya başlayanlar için kolaylık sağlayan bir framework.

HTML5

52Framework, çok hızlı bir HTML5 desteği sağlamaktadır. HTML5 daha temiz kodlama imkanıyla büyük avantajlar sunmaktadır. Başlıca desteklediği header, nav, section, article ve footer HTML5 taglarının yanı sıra daha bir çok tag desteklemektedir.

CSS3

Dünyadaki bir çok web tasarımcısı CSS3′ü uzun zamandır bekledikleri en çarpıpıcı şey olarak nitelendirmektedirler. CSS3 zaman açısından sizlere tarasım ve şablon bölümlemede büyük bir avantaj sunmaktadır. Ayrıca CSS3′ün yazı ve çerçevelere gölge verme, köşe yuvarlatma ve animasyon gibi daha bir çok özelliği bulunmaktadır.

Site – Download – Demo