Hakan ERSU

CSS ile etkileyici border’lar

xuma — Mon, 05 Jul 2010 11:30:13 +0000

Önceleri sadece imajlar kullanarak yaptığım oldukça görsel olan ayiricilar için artık css yöntemleri yeterli olmakta.Bu konuda takip ettiğim 2 yöntem bulunmakta ,ama yöntemlere geçmeden örneklerimizi inceleyelim.

DEMO

DOWNLOAD

DEMO

DOWNLOAD

1.Yöntem : 2 katman alt ve üst borderlarını belirlemek.

.katman {
	width:400px;
	height:50px;
	display:block;
	margin:0 auto;
}
.bir {
	border-bottom:1px solid #333;
}
.iki {
	border-top:1px solid #111;
}

2.Yöntem : 1px’lik katman

.katman {
	background-color:#333;
	border-bottom:1px solid #111;
	height:1px;
}

Bunun yanında liste elemanları içinde bu yöntem oldukça uygundur.


	Liste elemanı 1
	Liste elemanı 2
	Liste elemanı 3
	Liste elemanı 4
	Liste elemanı 5

ul{
	margin:10px 0 0 10px;
}
ul li {
	color:#fff;
	width:200px;
	padding:5px 0 5px 0;
	border-bottom:1px solid #111;
	border-top:1px solid #333;
}

ancak ilk ve son eleman için bazı border degerlerini sıfırlamamız gerekmekte.

ul li:first-child{
	border-top:none;
}
ul li:last-child{
	border-bottom:none;
}

Özellikle 2. yöntemi bir süredir kullanmaktayım ancak bu yazıyı yazmak ancak soh tanaka‘nın bu yazısı sonrası aklıma geldi.

Tam sayfa iframe’ler

xuma — Mon, 05 Jul 2010 10:37:54 +0000

Birkaç gün önce tam sayfa iframe ihtiyacı duydum , internette ufak bir araştırma yaptım ama sonuçlar beni hep javascript çözümlere götürdü.Bu yüzden css ile birkaç deneme yaptım ve sonuçta başarılı bir sonuca ulaştım.Büyük ihtimalle bilenen ve benim araştırmalarım sonucu bulamadığım ve aslında çoğu kişinin aklına gelecek ilk yöntem.

body ,html{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
html {
	overflow:hidden;
}
#frame {
	height:100%;
	width:100%;
}

Vimeo Videolarınızı Otomatik Başlatın

xuma — Fri, 02 Jul 2010 06:01:09 +0000

Vimeo embed videolarınızı otomatik başlatmak için src adresi sonuna &autoplay=1 eklemeniz yeterli.

Örnek;

http://vimeo.com/moogaloop.swf?clip_id=324123423&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=00ADEF&fullscreen=1&autoplay=1

Jquery Sağ Tıklama

xuma — Thu, 13 May 2010 13:06:51 +0000

Aslında böyle bir konuyu yazacağım hiç aklıma gelmezdi ama yaptığınız işlerde bazen müşteri isteklerine boyun eğmek zorundasınız.Jquery ile sağ tıklamayı engellemek.

$(this).bind("contextmenu", function(e) {
    e.preventDefault();
 });

Php: Gerçek Zaman

xuma — Wed, 28 Apr 2010 06:57:40 +0000

Buraya yazdığım kod parçalarının benim yazmış olduğum kod parçacıkları olduğunu düşünmeyin.Örneğin bu kod parçacığı tutorialzine‘ın şu makalesinden alınmıştır.

function gercekZaman($dt,$precision=2){
		if(is_string($dt)){
			$dt = strtotime($dt);
		}
		$times=array(	365*24*60*60	=> "yıl",
						30*24*60*60		=> "ay",
						7*24*60*60		=> "hafta",
						24*60*60		=> "gün",
						60*60			=> "saat",
						60				=> "dakika",
						1				=> "saniy"
		);
		$passed=time()-$dt;
		if($passed<5){
			$output='5 saniyeden kısa süre önce.';
		}else{
			$output=array();
			$exit=0;
			foreach($times as $period=>$name){
				if($exit>=$precision || ($exit>0 && $period<60)) break;
				$result = floor($passed/$period);
				if($result>0){
					$output[]=$result.' '.$name;
					$passed-=$result*$period;
					$exit++;
				}
				else if($exit>0) $exit++;
			}
		$output=implode(' ve ',$output).' önce';
	}
	return $output;
}
echo gercekZaman("2010-04-27 22:37:30");

Örnek Çıktı :11 saat ve 19 dakika önce

Php: Diziden Değer Silmek

xuma — Tue, 27 Apr 2010 11:06:29 +0000

Aslında çok kullandığım basit ama oldukça güzel bir fonksiyon.Basitce dizideki degerimizi bulup siliyoruz.

function degerSil($arr, $val){
					foreach ($arr as $key => $value){
						if ($arr[$key] == $val){
							unset($arr[$key]);
						}
					}
					return $arr = array_values($arr);
			}

Php : Email Doğrulama

xuma — Tue, 27 Apr 2010 11:01:17 +0000

function dogrumuBuMail($email){
	return eregi('^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$', $email);
}

Devinantart Menu

xuma — Mon, 26 Apr 2010 15:58:23 +0000

Bir süredir Deviantart menu sistemi gibi bir sistemi nasıl yapabileceğimi düşünürken yine işin kolayına kaçıp hali hazırda birşeyler varmı diye biraz araştırma yaptım ve işte sonuçlar;

Deviant Menu

Mootools js framework’unu kullanan Deviant Menu gerçekten de oldukça başarılı hernekadar breadcrumbs özelliği bulunmasada bu haliyle de oldukça başarılı ve ücretsiz bir çalışma.

Deviant Menu(CodeCanyon)

Belki aynı kişi belkide yukarda ki projeden esinlenen bir arkadaş tarafından hazırlanmış yine mootools framework’unu kullanan bir çalışma ve ücretli.

jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready

Başlığı aynen aldım Oldukça geniş çaplı bir menu(ler) sistemi ve özelikle iPod Drilldown menu nerdeyse benim bahsettiğim deviantart menu tarzı bir menü.

Projelerimde genelde Jquery kullandığım için yine tercihim jquery’iden yana olacak ama daha basit bir yapı kullanmak isterseniz mootools destekli menüler daha ideal.

Jquery ile Dikey Açılır Menüler

xuma — Fri, 12 Mar 2010 09:36:34 +0000

Jquery pluginleri sayesinde artık oldukça gelişmiş menu yapılarına sahip olabilmekteyiz.Ancak bazı ufak görsel efektleri hazırlamak ve bunlar için ufak hesaplar yapmak gerçekten düşünüldüğü kadar zor mu ?

[ Demo ]

Çoğu görsel jquery efektinin altında güzel bir xhtml/css yapı yatar.Bunun için basit bir Xhtml/Css yapı oluşturarak menümüzü hazırlamaya başlayalım.İlk olarak menümüzün bulunacağı bir taşıyıcı katman oluşturalım.

Katmanımıza ait css kodlarımız.

#tasiyici {
                width:900px;
                height:300px;
                display:block;
                background:#e3e3e3;
                /* Dikey ve Yatay ortalama islemi */
                position:absolute;
                top:50%;
                left:50%;
                margin-top:-150px;
                margin-left:-450px;
}

[ Örnek 1 ]

Dikey ve yatay ortalama için position:absolute olarak tanımlanmış katmanımıza yukardan ve soldan 50% değerini verdikten sonra katmanınızın margin-top değerinini katmanınızın yüksekliğinin negatif yarısı olarak vermeniz , margin-left değerinide yine benzer şekilde katman genişliğinin negatif yarısı olarak vermeniz yeterlidir.

Menülerimizi taşıyıcı katmanımız içerisine konumlandıralım.

CSS kodlarımız

menu {
                width:200px;
                height:40px;
                display:block;
                background:red;
                float:left;
                margin-left:5px;
                margin-top:120px;
 }

[ Örnek 2 ]

Menü yapımızı biraz daha geliştirip nihayi yapısına ulaştıralım.


            
                ANASAYFA
            
            
                ÖRNEKLER
                
                    XHTML
                    CSS
                    JQUERY
                
            
            
                SERVER SIDE
                
                    PHP
                    ASP
                    RUBY ON RAILS
                    CGI/PERL
                
            
            
                İLETİŞİM


.menu {
                width:200px;
                height:40px;
                display:block;
                background:red;
                float:left;
                margin-left:5px;
                margin-top:120px;
                overflow:hidden;
                text-align:center;

            }
            .menu h1{
                display:block;
                width:200px;
                height:40px;
                font-size:14px;
                line-height:40px;
                cursor:pointer;
            }
            .genis {
                height:150px;
                margin-top:65px;
            }
            .menu ul {

            }
            .menu ul li {
                text-align:left;
                height:20px;
                line-height:20px;
                padding:0 0 0 20px;
                width:180px;
                background:#fff;
                margin-top:1px;
            }
            .menu ul li a {
                color:#111;
                text-decoration:none;
            }

[ Örnek 3 ]

Bu aşamada menümüzün açılma konumuna ait .genis class’ının tanımladık.Görüldüğü gibi birkaç hesapla yükseklik ve margin-top değerini değiştiriyoruz.Bu class şimdilik sadece deneme amacıyla oluşturuldu ve bir katmanımıza daha sonra kaldırılmak şartıyla uygulandı.

Örneğimizi incelediysek artık genis class’ımıza ihtiyacımız yok.Bu class’ı kaldırdıktan sonra jquery kodlarımızı yazmaya başlayabiliriz.

Efektimiz menülerimizin üstüne gelinme durumuna göre başlayacak bu yüzden hover() fonksiyonu bizim için yeterli olacaktır.

Şimdi katmanımızı hareketlendirme zamanı , katmanımızı hareketli kılmak içinse jquery animate() fonksiyonunu kullanacağız.Bu fonksiyon sayesinde menümüzü şimdiki halinden yukarda tanımlamış olduğumuz genis class’ına ait değere ulaştıracağız.

[ Örnek 4 ]

Artık menümüz dilediğimiz gibi açılıyor şimdi menümüzü eski değerlerine getirerek kapanma işlemini gerçekleştirelim.

[ Örnek 5 ]

Dikkat etmeniz gereken husus menümüzün üstünden birkaç sefer geçtiğimizde animasyonumuzun sürekli devam etmesi buda oldukça çirkin bir görünüm oluşturmakta.Bunu engellemek için Jquery’nin stop() ifadesini kullanacağız.
Animate fonksiyonlarımızı aşağıdaki gibi değiştirelim.

$(this).stop().animate({"height":"150px","margin-top":"65px"});
$(this).stop().animate({"height":"40px","margin-top":"120px"});

Böylelikle menülerimiz üstünden ayrıldığımızda animasyonu durdurmaktayız.

Son olarak anamanü ve iletişim kısımlarının açılmasını istemiyoruz bunun için anamenü ve iletişim katmanlarımıza birer id verelim.Anamenü için “anamenu” İletişim bölümü içinse “iletisim” id’sini kullandım.Sonrasında seçili katmanımızın id değerini alalım.

var id=$(this).attr("id");

Animasyonu sadece İletişim ve Anasayfa dışında çalıştırmak için id’leri bu katmanların id’lerine eşit olmayan katmanlara animasyonu uygulamamız gerek.Bunu sağlamak için basit bir if fonksiyonu kullanmamız yeterli.

if(id!='anamenu' && id!='iletisim') {
	$(this).stop().animate({"height":"150px","margin-top":"65px"});
}

[ Örnek 6 ]

Böylellikle ana hatlarıyla menümüz oluşturmuş olduk biraz css değişikliğiyle daha görsel menüler elde edebilirsiniz.

[ Örnek 7

Xampp .htaccess aktifleştirmek

xuma — Tue, 23 Feb 2010 06:56:20 +0000

Xampp kurulumlarımdan sonra aktifleştirmenizde yarar var.Özellikle htaccess ile denemelerinizi illa gerçek bir serverda yapmanız gerekmiyor.

Xampp\apache\conf dizininde bulunan httpd.conf dosyasını bulun ve basit bir text editöründe açın.

#LoadModule rewrite_module modules/mod_rewrite.so

bu kod satırını bulun ve baştaki # karakterini kaldırın ve kaydedin.

LoadModule rewrite_module modules/mod_rewrite.so

Sonrasında apache serverınızı yeniden başlatın.