Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Çabuk İpucu: Tarayıcı kaydırma çubuklarını UI Tasarımlarınızla Uyumlu Hale Getirin

by
Length:LongLanguages:

Turkish (Türkçe) translation by Nevres Emre Alsancak (you can also view the original English article)

Bu ipucu, UI tasarımınızla uyumlu olacak şekilde kaydırma çubuklarının görünümünü ve görünümünü iyileştirmenizi sağlıyacaktır. WebKit tarayıcılarının CSS konusunda ne sunduklarına bir göz atacağız, ayrıca diğer tarayıcılarada hitap etmek için yedek olarak jQuery kullanacağız.

Kısayol mu arıyorsunuz?

Web sitenizin belirli bir bileşenine stil uygulamakla ilgili yardıma ihtiyacınız varsa, profesyonellerden yardım almak daha hızlı olabilir. Envato, her çeşit web bileşenini yeniden stillendirmek veya özelleştirmek konusunda  uzmanlara sahiptir.

Web component services on Envato Studio

Tarayıcılar Hakkında Hızlı Not

Webkit tabanlı tarayıcılar dediğimizde aslında Apple Safari ve Google Chrome'dan bahsediyoruz. Şu anda, genel masaüstü tarayıcı pazarının% 40'ından fazlasını elinde tutuyorlar. Tabletler için, Apple'ın iPad'i hangi şirketin tarayıcısı kullanıldığına bakılmaksızın Webkit'i kullanacaktır. Google'da  Android işletim sistemine Chrome'u ekledi ve Chromebook'larda tabii ki Google Chrome'u temel alıyor.

Bu rakamlara baktığımızda, kaydırma çubuğu stilleme için çok parlak bir gelecek gözüküyor!


1. Adım: Kaydırma çubuklu Basit Bir Sayfa

CSS ile kaydırma çubuklarını stillendirmeye başlamadan önce önce çalışan bir demoya ihtiyacımız var; Kaydırma çubuklu bir sayfa. Kaydırma çubukları şu durumlarda görülebilir:

  • İçeriğin görünür pencere alanından büyük olması (sağda bir kaydırma çubuğu görünecektir).
  • textarea'nın kaydırma çubuklarının görünmesi için yeterli miktarda metin içeriyor olması.
  • Farklı bir sayfa görüntülemek için kullanılan bir iframe.
  • overflow özelliği belirlenmiş bir div veya başka bir blok öğesi

Bu demo için son seçeneği kullanacağiz. İşte benim başlangıç markup'ım:

Sadece çok miktarda anlamsız içeriğe sahip bir div ve bazı sabit boyutları ayarlayan ve yatay ve dikey kaydırma çubuklarını tetikleyen başlangıç CSS'i:

Buna benzer bir şey görüyor olmanız lazım:


2. Adım: Webkit Tarayıcıları ile Başlangıç

Yıllar önce(birkaç yıl) Webkit tarayıcılarına, sayfalarınızı temanıza göre şekillendirebilmek için kaydırma çubuklarını hedefleyen CSS Pseudo Öğeler'i eklendi.

-webkit- önekini ve webkit'in özel kaydırma çubuğu özelliklerini kullanarak bir şeyler stilleyelim. Unutmayın ki, anlama kolaylığı için temel CSS özelliklerine bağlı kaldım ve kod yorumlarında gerekli anlatımı yaptım. 

Bu pseudo element varsa, WebKit standart içsel kaydırma çubuğu görüntülemeyi kapatır ve CSS'de sağlanan bilgileri kullanır. - Surfin Safari

Ve şimdi bazı diğer pseudo-elementler için:

Bu CSS'yi ekledikten sonra aşağıdaki efekti görebilirsiniz (yine sadece Webkit tarayıcılarında).

Bilin bakalım ne? Internet Explorer'ın kendi kaydırma çubuğu stillendirmesi var.

Evet bu doğru - aslında IE, CSS aracılığıyla kaydırma çubuklarının stillendirilebilmesini destekleyen ilk tarayıcıdır. IE 5.5 zamanlarından beri vardı, ancak yalnızca renk değiştirilebiliyordu.

Bu özellikler hala günümüzde kullanılabilir; Gösterim amacıyla IE 9'da bu tek özelliğe bir göz atın:

Nasıl göründüğüne bakın:


3. Adım: Webkit Olmayan Tarayıcılar için B Planı

Bu kadar WebKit eğlencesi yeterli. Bu eğlenceye Firefox, IE ve Opera da katılabilir. Onlar için son çare olarak jScrollPane kullanmak yeterlidir. Bu jQuery eklentisi Kelvin Luck tarafından geliştirildi ve günün kurtarıcısı olacaktır.

Kelvin'in web sitesinde pek çok iyi örnek bulunmaktadır ancak temel kullanım için yapmamız gereken tek şey jQuery ve jScrollPane dosyalarını indirmek ve bunları aşağıdaki şekilde uygulamaktır:

Sadece temamızla uyumlu hale getirmek için jquery.jscrollpane.css dosyasını açalım ve aşağıdaki satırları renk değerlerimizle düzenleyelim (performans iyileştirmeleri için tüm stilleri kendi dosyalarınıza koymak isteyebilirsiniz):

Firefox'da ne göreceğinizin bir ekran görüntüsü:


Sonuç

Gmail ve Google+ gibi Web Uygulamaları (ve diğer birçok örnekle) zaten bu fikri benimsedi ve bu ivme devam ederse belki de Firefox ve IE de kendi çözümlerini sağlayacaktır.

Umarım bu Çabuk İpucu hoşunuza gitmiştir ve tasarım çalışmalarınızda kaydırma çubuklarıyla ne yaptığınızı görmek için sabırsızlanıyorum!


Diğer Kaynaklar

Envato Market'teki özelleştirilebilir kaydırma çubukları

Hazır bir çözüm arıyorsanız Envato Market, web sitenize kolayca ekleyip yeni efektler yaratabilmeniz için bir dizi kaydırma çubuğu seçeneği sunar. İşte bunlardan bazıları:

1. Lazybars - Themeable responsive scrollbar jQuery plugin

Lazybars kullanımı kolay temalı  jQuery kaydırma çubuğu eklentisidir. Bu kaydırma çubuklarını, web sitenizdeki kaydırılabilir herhangi bir öğeye bir sınıf adı ekleyerek uygulayabilirsiniz.

Lazybars ile gelen mevcut temaları kullanabilir veya basit bir CSS ile kendi temalarınızı oluşturabilirsiniz.

Lazybars - Themeable responsive scrollbar jQuery plugin
Lazybars - Themeable responsive scrollbar jQuery plugin

2. Fancy Scrollbar - WordPress

"Fancy Scrollbar - WordPress", WordPress sitelerinde özel kaydırma çubuğu oluşturabilen bir eklentidir. Bir sürü özelleştirme seçeneği vardır. Renk, efektler, kaydırma gecikmesi, ray şeridi ve daha pek çok parametreyi özelleştirebilirsiniz.

Fancy Scrollbar - WordPress
Fancy Scrollbar - WordPress

3. Awesome Custom Scrollbar

Awesome Custom Scrollbar WordPress web siteniz için son derece özelleştirilebilir bir özel jQuery kaydırma çubuğu eklentisidir. Bu eklenti ile web sayfanızın kaydırma çubuğunu özelleştirebilir ve tema dosyalarında bile istediğiniz yere dilediğiniz yerde kısayol kullanarak Özel Kaydırma Çubuğu yerleştirebilirsiniz.

Awesome Custom Scrollbar
Awesome Custom Scrollbar

4. DZS Scroller

DZS Scroller, siteniz için, içerdiği üç tema yetersiz olması durumunda, CSS yoluyla çok kolay bir şekilde özelleştirebileceğiniz bir kaydırma çubuğu sağlar. Ayrıca, fareyle üzerine gelindiğinde(hover) kaydırma veya fare ayrılma(mouse leave) işlemi sonunda solmaya(fade) benzer gelişmiş işlevlerle birlikte gelir ve iPhone/iPad'lerdede çalışır.

DZS Scroller
DZS Scroller

5. CSS3 Kaydırma Çubuğu Stilleri

Web siteniz için güzel ve renkli CSS3 Kaydırma çubuğunu kullanmak kolaydır. Yeni CSS3 Kaydırma Çubuğunun keyfini çıkarmanız için mevcut CSS dosyasına eklemeniz yeterlidir.

CSS3 Scrollbar Styles
CSS3 Kaydırma Çubuğu Stilleri
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.