Hakan ERSU » CSS

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%;
}

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

JQuery ile IE7 z-index problem çözümü

xuma — Wed, 06 Jan 2010 13:52:10 +0000

Internet explorer’ın bilinen sorunlarından biri olan ve kural tanımayan bir browser olduğunu gösteren z-index problemi çoğu tasarımcı için baş ağrıtıcı sorunlardan biridir.Basit birkaç google aramasıyla birçok farklı kaynaktan sorunu inceleyebilirsiniz.Bu kaynaklardan bazılarını sayfa sonuna ekleyeceğim.

Vance Lucas bu konuyla ilgili olarak güzel bir çözüm bulmuş.Çözüm aslında oldukça basit hazırladığı jquery fonksiyonuyla sayfa içerisindeki katmanlara 1000′den başlamak üzere 10′ar azalarak z-index atıyor.Bu işlem çoğu z-index probleminizi internet explorer 7 için çözecektir.Ancak size özel durumlar için aşağıda listelenmiş bağlantınları incelemenizde yarar var.

$(function() {
	var zIndexNumber = 1000;
	$('div').each(function() {
		$(this).css('zIndex', zIndexNumber);
		zIndexNumber -= 10;
	});
});

Hata’nın Anatomisi
http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html
http://brenelz.com/2009/02/03/squish-the-internet-explorer-z-index-bug/
http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/
Z-index nedir?
http://www.fatihhayrioglu.com/z-index/
http://www.muhammetsevim.com/yazi/css-pozisyonlama-ve-z-index/

Jquery load() ve Chrome/Safari

xuma — Fri, 25 Dec 2009 10:39:06 +0000

Jquery load() fonksiyonu sayesinde basit ajax sayfa yükleme işlemlerinize olanak sağlar.Ancak bu noktada birçok kişinin sorun yaşadığı çözümünden de pek bahsedilmeyen konulardan biri Webkit tabanlı browserların (en bilinenleri chrome ve safari ) neden olduğu yüklenen sayfa içerisindeki stil ve jquery kodlarının çalışmaması.

Aslında bu durumdan tam olarak sorun olarak bahsetmek pek mümkün değil.Çünkü bu iki browser da W3C standart kurallarına tam uydukları için böyle bir durum meydana gelmekte.Aksine Internet Explorer ve Firefox ise bu basit kuralı iyiki hiçe saydıkları için problemsiz çalışmakta.

W3C standartlarına göre style elementleri sadece head tagları arasında yer alabilir.Yani yüklenen dosyalarınız içerisindeki style elementleri webkit tarafından yok sayılacaktır.Benzer şekilde Javascript kodlarınızda yüklenen sayfa içerisinde yok sayılacaktır.

Bu durumu düzeltmek için stil kodlarınızı yüklediğiniz sayfa içerisine yerleştirmeniz yeterli.Javascript kodlarınız için ise ;

$(document).ready(function(){});

fonksiyonunuz eğer daha önce tanımlanmışsa bu fonksiyonu yüklenen sayfalardan kaldırmanız yeterli.

Tıklanabilir Katmanlar

xuma — Fri, 04 Sep 2009 18:32:23 +0000

Zaman zaman tasarımlarımızda tıklanabilir katmanlara veya daha bilinen haliyle tıklanabilir kutulara ihtiyaç duyarız.Bunu gerçeklemenin birkaç yolu olsada sanırım en basiti csstricks.com‘un bize sunduğu yöntem;

Gördüğünüz gibi oldukça basit yöntem.Bunun yanında nispeten daha uzun olan jquery yönteminide size tavsiye ederim.Ana hatları ile aşağıda görüldüğü gibi bir yapı kullanılıyor.

HTML

Jquery

$('#tiklananKatman').click(function(){
    document.location.href=$(this).attr('rel');
});

CSS

#tiklananKatman {
    cursor:pointer;
}

Bunun yanında askthecssguy size bu konuda yol gösterebilir.