Css

20 adet bedava CSS3 kod üreteci

Okunma Sayısı : 70

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

İlham Verici 10 Adet Sade Web Sitesi Tasarımı

Okunma Sayısı : 147

Merhaba arkadaşlar. Bu yazımda sizinle 10 adet sade web sitesi tasarımı paylaşacağım. Bu paylaştığım web siteleri renk kullanımı, yerleşim ve içerik bakımından gerçekten çok şık ve bir okadarda sade. Bu şekilde sade web siteleri tasarlamak kullanıcılarınızın gözünü yormayacak ve istediklerine daha rahat ulaşmada yardımcı olacaktır. Paylaştığım bu 10 web sitesini inceleyerek sizde ileride yapacağınız tasarımlar için ilham alabilir, yaratıcılığınızı geliştirebilirsiniz.

İşte o sade ve bir okadarda şık 10 web sitesi tasarımı:

1. Maksimer

2. Capitalg

3. Fedena

Devamı >

10 Adet Mükemmel CSS Menü Dersi

Okunma Sayısı : 380

CSS artık modern bir web sitesi tasarımının vazgeçilmez bir aracı haline geldi. Neredeyse bütün web 2.0 web sitelerinde CSS’ye rastlamak mümkün. Kullanım bukadar fazla olunca CSS hakkındada internette bir çok eğitici ve öğretici makale yazılıyor. Heleki şu son zamanlarda CSS menü tasarımı hakkında bir çok ders yayınlandı. Bende bu dersler arasından en beğendiğim 10 dersi seçip siz sorbize okuyucuları ile paylaşmayı düşündüm. İşte o harika css menü dersleri.

Bu paylaştığım harika menü dersleri ile ilham alabilir, yaratıcılığınızı geliştirebilirsiniz. İşte o harika CSS menü dersleri:

1. Advanced CSS Menu

2. CSS Sprite Navigation Tutorial

3. CSS Techniques: Using Sliding Doors with Wordpress Navigation

4. Horizontal menu, top to bottom

5. Flexible navigation example

6. CSS Menu – Horizontal/Vertical

7. CSS graphic menu with rollovers

8. Navigation matrix reloaded

9. A CSS only validating flyout menu

10. A flyout menu with breadcrumb trail


kaynak: sorbize.com – 10 Adet Mükemmel CSS Menü Dersi

Harikulade CSS3 Tekniklerinden Bir Demet!

Okunma Sayısı : 613

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

jQuery ve CSS kullanarak otomatik tamamlama yapımı

Okunma Sayısı : 625

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)

Çevirimiçi kod düzenleyicileri

Okunma Sayısı : 91

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.

Devamı >

Javascript kullanmadan içerik değiştir

Okunma Sayısı : 46

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)

CSS3 ile buton yapımı

Okunma Sayısı : 137

Pretty CSS3 Buttons

A Sexy Button Using CSS

Radioactive Buttons with CSS Animations and RGBa

Devamı >

CSS kılavuzları

Okunma Sayısı : 115

CSS Cheat Sheet (V2)

Devamı >

52Framework

Okunma Sayısı : 57

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

Devamı >