CSS ile Yapılmış Scrollbar Tasarımı Yapımı

CSS ile Yapılmış Scrollbar Tasarımı Yapımı

Sanırım uzun uzun yazı ya gerek yok tasarımlarınız da kullanacağınız scrollbarları daha göze hoş hale getireceğiz.

Detaylar

CSS, jQuery kullanılmıştır.

+ Başlangıç

Bir bölüme kaydırma çubuğu eklemek için nesneye width, height ve overflow:auto; komutları verilmesi yeterlidir. Örneğin şöyle birşey yaparsak;

 <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rhoncus tortor eget orci fringilla non semper magna aliquet. Aliquam convallis elit sem. Proin fringilla fermentum pretium. Phasellus id nisl eu eros convallis eleifend. In hac habitasse platea dictumst. In at felis massa. Maecenas vitae quam non elit porta pellentesque ac in erat. Nullam a ante felis, ullamcorper suscipit felis. Maecenas sit amet nisl mattis ipsum ullamcorper aliquam vitae sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    <p>Sed sed tellus dolor, non lobortis felis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget nisl viverra risus feugiat vulputate tempus et leo. Nam metus nibh, tristique non sodales non, interdum et neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet aliquet vestibulum. Curabitur viverra tortor augue, a aliquet tellus. Vivamus eu felis vel lorem tincidunt imperdiet. Fusce iaculis luctus convallis. Proin adipiscing malesuada enim, et feugiat tortor sagittis eu. Cras convallis felis eu leo tempus et fermentum urna accumsan. In quis metus at metus ultricies fringilla. Maecenas sed lacus aliquam nibh semper dignissim et quis est.</p>
    <p>Praesent sodales, sapien sit amet congue egestas, sem ligula ornare massa, vitae suscipit felis ligula quis velit. Phasellus lectus massa, sodales ac vulputate ac, pharetra quis lacus. Morbi tempus pretium nisi sed pretium. Pellentesque dictum volutpat vulputate. Fusce dapibus sagittis felis, ut consequat nisi posuere id. Cras elit orci, vehicula in sagittis a, faucibus vitae dui. Nunc non lorem in metus adipiscing adipiscing non a sapien. Sed dictum ultrices nibh in tristique. Nulla dapibus laoreet tincidunt. Sed accumsan erat quis mi luctus porta.</p>
    <p>Sed mollis justo enim, ut pharetra nunc. Fusce vehicula viverra magna, et fringilla lectus porta quis. Donec eu fermentum mi. Donec congue pellentesque iaculis. Phasellus est leo, cursus eget consectetur in, tristique sit amet tortor. Cras eleifend felis sit amet eros vehicula aliquet. Pellentesque fringilla metus in libero luctus eu condimentum nulla pretium. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consequat sodales lorem, nec dignissim turpis pharetra et. Nullam commodo hendrerit elementum. Donec porta faucibus ligula non blandit. In ultrices vehicula pretium.</p>
    <p>Sed ac sagittis sapien. Curabitur varius pellentesque nunc eget molestie. Vivamus in massa arcu, ut auctor tellus. Aliquam convallis lobortis magna, ut posuere odio euismod ac. Vestibulum in enim vitae metus vulputate interdum. Mauris a risus auctor nunc fermentum dapibus. Proin iaculis, nunc ut viverra varius, augue augue porta libero, id viverra nisl elit in mauris. Aenean quis risus ante. Donec bibendum erat a sem vestibulum eu aliquet lectus tincidunt. Vivamus imperdiet congue leo, non ultricies urna sodales sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla vitae rhoncus dui. Nunc in nisi in ante imperdiet tincidunt sagittis eu ipsum. Aenean orci justo, faucibus placerat tincidunt vitae, vehicula at libero.</p>
</div> 
.container {
      width: 400px;
      height: 300px;
      background-color: #DCDCDC;
      overflow: scroll; /* showing scrollbars */
}

Yukarıdakileri uyguladığımız şu görünümü alması gerekiyor.. Buraya kadar herşey kolaydı ama bundan sonrasında işin içerisine jQuery giriyor işte bu kısım çok önemli.

firefox CSS ile Yapılmış Scrollbar Tasarımı Yapımı

+ jQuery

Şimdi kısaca bir jQuery kodu yazarak scrollbar’ımızı özelleştirmeye geçelim. Aşağıda ki kodları <head> tagı arasına ekleyin.

    <link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" /> <!-- Bu kod ile indirdiğiniz dosyada ki css dosyamızı çağırıyoruz -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- Bu kod ile jQuery kütüphanesini çağırıyoruz. -->
    <script type="text/javascript" src="jquery.jscrollpane.min.js"></script> <!-- Bu kod ile indirdiğiniz dosyada ki js dosyamızı çağırıyoruz -->
    <script type="text/javascript">
      $(document).ready(function () {
          if (!$.browser.webkit) {
              $('.container').jScrollPane();
          }
      });
    </script>

Sayfayı yenilediğimiz de çalışmamız bu hali almış olacaktır.

firefox jscrollpane CSS ile Yapılmış Scrollbar Tasarımı Yapımı

Ancak o da ne? Bu olay sadece Mozilla’da olmuş Chrome ve İE’de olmamış.
O hal de aşağıda ki webkit kodları ile de tarayıcılara uyumsuzluk problemini ortadan kaldıralım.

	::-webkit-scrollbar {
		  width: 15px;
	} /* this targets the default scrollbar (compulsory) */

	::-webkit-scrollbar-track {
		  background-color: #b46868;
	} /* the new scrollbar will have a flat appearance with the set background color */

	::-webkit-scrollbar-thumb {
		  background-color: rgba(0, 0, 0, 0.2);
	} /* this will style the thumb, ignoring the track */

	::-webkit-scrollbar-button {
		  background-color: #7c2929;
	} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

	::-webkit-scrollbar-corner {
		  background-color: black;
	} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
	

+ İşlem Tamamlanmıştır

Birçok ünlü şirket bu mantığı kullanmaktadır, işte google.

rezder CSS ile Yapılmış Scrollbar Tasarımı Yapımı

mature porno
porno hikayeleri
YAPILAN YORUMLAR
  • BİR YORUM YAPIN