HTML5 ve CSS3 ile beraber neredeyse artık tasarım konusunda çok büyük boyutlara ulaşıldığı çok net bir şekilde yeni site arayüzlerinden görebiliyoruz. Bu makale sonucunda estetik kaydırma çubukları oluşturabilirsiniz.
HTML Elementleri’ne kaydırma çubuğunu kendiniz tasarlayın
Bu örneğimizde AngularJS ile oluşturacağımız bir listenin scrollbar’a sahip olmasını ve sahip olunan bu scrollbar’ın ise tasarımının nasıl yapıldığına değineceğiz.
Öncelikle örnek HTML kodumuzu görelim
HTML(index.html)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <link rel="stylesheet" href="style.css" /> <script src="https://code.angularjs.org/1.3.14/angular.js"></ script> <script src="app.js"></ script> </head> <body ng-app="Demo" ng-controller="DemoCtrl"> <div class="wrapper"> <div class="item" ng-repeat="item in items"> {{ item.name }} </div> </div> </body> </html> |
Şimdi AngularJS ile oluşturduğumuz Demo adlı module ve DemoCtrl adlı controller’i tanımlayalım ardından scope içerisine urunler adında bir dizi tanımlayarak bu diziye for döngüsü ile 25 adet id ve name property’si oluşturalım.
JS(app.js)
1 2 3 4 5 6 7 8 9 10 11 | angular.module("Demo", []) .controller("DemoCtrl", function($scope) { $scope.items = []; for (var i = 0; i < 10; i++) { $scope.items[i] = { id: i, name: 'Ürün ' + i }; } }) |
Şimdi css dosyamızı oluşturalım html elementlerine normal şartlarda içerik girdiğinizde girdiğiniz içerik kadar genişlik ve yükselkik oranını kendisi ayarlar fakat biz ortaya scrollbar çıkarmak için yükseklik ve genişlik değeri vereceğiz listemize sonrasında liste elemanlarına .item sınıfı içerisinde style atamaları yapıyoruz. şimdi geldik CSS3 pseudo elementi olan ::-webkit-scrollbar’a bu scrollbar’ın en genel çerçevesi oluyor ardından ::-webkit-scrollbar-track ise tutup sürükleyebildiğimiz scrollbar nesnesi dışında kalan boş kısımdır yani yeşil olan kısım ::-webkit-scrollbar-thumb bu pseduo elementi ile scrollbar içinde tutup sürükleyebildiğimiz çubuk oluyor yani kırmızı olan kısımdır son olarak scrollbar üzerine gelindiğinde oluşacak tasarım değişiminide ::-webkit-scrollbar-thumb pseduo css3 elementine pseudo css2 sınıfını ekleyerek yapabiliyoruz yani scrollbar üzerine geldiğinizde çıkan mavi tasarım oluyor.
CSS(style.css)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .wrapper { width: 250px; height: 300px; overflow: auto; } .item { background-color: #FFF; border: 1px solid #ccc; height: 50px; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background-color: green; border-left: 1px solid #ccc; } ::-webkit-scrollbar-thumb { background-color: red; } ::-webkit-scrollbar-thumb:hover { background-color: blue; } |