CSS İle Özel Kaydırma Çubuğu Yapmak

Daha önce yazacaktım ama desteği çok düşüktü. Webkit’in %82(mobil + web) desteğinden sonra uygulanabilirliği arttı. Ben Firefox’tan destek bekledim ama ondan ses çıkmadı.

Tasarımcıların form elemanlarını tasarlama sevdası hiç bitmedi, bitmeyecek de 😀 Tüm ihtiyaçları CSS ile halledebilsek sorun yok da işin içine javascript girince durum değişiyor. Çünkü CSS işin işlevsel kısmını yine doğal haline bırakıp görselliğine yönelirken; javascript ile yapılan çözümler işin işlevselliğine de müdahale ediyor. İşin doğallığı bozulunca da tonla sorun çıkıyor.

Neyse biz gelelim kendimize özel kaydırma çubuğu(scroll) yapmaya;

Bu kadar basit bir kod ile özel kaydırma çubuğu elde ettik. Biz yukarıda 3 adet sahte(pseudo) kaydırma çubuğu elementi kullandık. Ancak toplamda yedi tane element vardır.

Özel Scroll Sahte(Pseudo) Elemanları

enter image description here

  1. ::-webkit-scrollbar Kaydırma çubuğu alanını tanımlar. Genelde diğer elemanları kapsar
  2. ::-webkit-scrollbar-button Yön tuşlarını seçmeye yarar.
  3. ::-webkit-scrollbar-track Kaydırma çubuğunun altta kalan boş kısmını seçmeye yarar.
  4. ::-webkit-scrollbar-track-piece Kaydırma çubuğunun tutamacı dışında kalan boşluğu seçmemize yarar.
  5. ::-webkit-scrollbar-thumb Kaydırma çubuğunun tutamacını seçmemize yarar.
  6. ::-webkit-scrollbar-corner Yatay ve dikey kaydırma çubuğunun köşesini seçmemizi sağlar.
  7. ::-webkit-resizer Yatay ve dikey kaydırma çubuğunun köşesinde boyutlandırma çıkması durmunu seçmemizi sağlar.

Öze Kaydırma Çubuğu Sahte(Pseudo) Sınıfları

Farklı durumları yakalayabilmemiz için kaydırma çubuğunun sahte(pseudo) sınıfları vardır. Bu sınıflar kaydırma çubuğu elementinin parçalarına özel seçimin yapmamızı sağlar.

:horizontal, :vertical, :decrement, :increment, :start, :end, :double-button, :single-button, :no-button, :corner-present, :window-inactive

Bu sözde sınıfları tanımlamak yerine örnekleri inceleyerek daha iyi anlayacağımızı düşünüyorum.

Tarayıcı Desteği

Chrome explorer Firefox
+(-webkit)

Mobil Tarayıcılar

Android Mobil Safari Chrome
+ (-webkit) +(-webkit) +(-webkit)

Çift çizgili ayraç kullanımı

Genelde menülerde kullanılan bir durumdur bu. Menü öğelerini ayırmak için araya çizilen çizgilerin iki farklı renkte olması durumunda nasıl bir çözüm üretmek gerektiğine dair bir ipucu. Bazen resim olarak kullanıyorum, ama bazende soldaki öğenin sağ kenar çizgisine bir renk, sağdaki öğenin sol kenar çizgisine farklı bir renk atayarak çözüm üretmeyi deniyorum.

.clearfix:after{
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

.clearfix{
	display: inline-block;
}

* html .clearfix{
	height: 1%;
}

.clearfix{
	display: block;
}

ul{
	background-color: #008bc6;
	margin: 0 auto;
	padding: 10px;
	width: 450px;
}

ul li{
	border-left: 1px solid #05a3e6;
	border-right: 1px solid #046e9b;
	float: left;
	list-style: none;
}

ul li a{
	color: #fff;
	display: block;
	font: bold 12px Arial, Helvetica, sans-serif;
	margin-right: 10px;
	padding: 0 10px;
	text-decoration: none;
}

HTML

<ul class="clearfix">
   <li><a href="">Bak postacı</a></li>
    <li><a href="">geliyor</a></li>
    <li><a href="">selam veriyor</a></li>
    <li><a href="">her kes ona bakıyor</a></li>
</ul>

Örneği görmek için tıklayınız.

İlk öğenin solundaki kenar çizgisi ile son öğenin sağ kenar çizgisini kaldırmak için bu öğelere sınıf atamalıyız ve bu kenar çizgilerini sıfırlamalıyız.

ul li.ilkOge{
	border-left:0;
}

ul li.sonOge{
	border-right:0;
}

Örneği görmek için tıklayınız.

Bu uygulamayı dikey menü olarakta yapabiliriz.

ul{
	background-color: #008bc6;
	margin: 0 auto;
	padding: 10px;
	width: 200px;
}

ul li{
	border-bottom: 1px solid #05a3e6;
	border-top: 1px solid #046e9b;
	list-style: none;
}

ul li.ilkOge{
	border-top: 0;
}

ul li.sonOge{
	border-bottom: 0;
}

ul li a{
	color: #fff;
	display: block;
	font: bold 12px Arial, Helvetica, sans-serif;
	margin-right: 10px;
	padding: 10px 0;
	text-decoration: none;
}

Örneği görmek için tıklayınız.

Bu yazıyı yazmaya karar verdiğimde “css ile buton yapmak” adlı yazının hazırlıkları da devam ediyordu, oradada butonları araştırırken Firefox’un sitesinde uyguladığı bir metot bu konuyu ilgilendiren bir metot olduğunu gördüm. Onuda buraya yazayım. Ancak bu metot İnternet Explorer’da çalışmayacaktır.

HTML kodu

<a href="">
	+ <span>Çizgili buton</span>
</a>

CSS kodu

a{
	background-color:#ed145b;
	padding:5px 10px;
	color:#fff;
	text-decoration:none;
	font-weight:bold;
	font-size:16px;
}

a span{
	border-left:2px groove rgba(144, 71, 95, 0.55);
	display:inline-block;
	padding-left:6px
}

Koda biraz açıklama getirelim. border’a verilen groove özelliği bizim istediğimiz etkiyi yapan bir özelliktir. Bu özellik ile eklenen çizgiler gri renklidir. Biz bu çizgiye biraz saydamlık kazandırıp zemin rengine uyum sağlamasına yarar.

Örneği görmek için tıklayınız.

Categories CSS