13 Mart 2021, 09:34
|
#1
|
|
CSS Kaydırma Çubuğu
Css özellikli kaydırma çubuğu. bu kodlar ile kullanıcılarına güzel görüntü verin ! internet exploler 'den örnek alınarak üretilen özel css sitilidir.
Altaki kodu style.css ye ekleyiniz.
PHP- Kodu
.scrollbar{
margin-left: 20px;
float: left;
height: 300px;
width: 45px;
background: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=F5F5F5]#F5F5F5[/URL]
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow{min-height: 450px; }
#wrapper {text-align: center; width: 100%; margin: auto; }
#style-1::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 5px;
background-color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=F5F5F5]#F5F5F5[/URL]
}
#style-1::-webkit-scrollbar{
width: 12px;
background-color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=F5F5F5]#F5F5F5[/URL]
}
#style-1::-webkit-scrollbar-thumb{
border-radius: 5px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=555]#555[/URL]
}
#style-2::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=F5F5F5]#F5F5F5[/URL]
}
#style-2::-webkit-scrollbar{
width: 12px;
background-color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=F5F5F5]#F5F5F5[/URL]
}
#style-2::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=D62929]#D62929[/URL]
}
#style-3::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=F5F5F5]#F5F5F5[/URL]
}
#style-3::-webkit-scrollbar{
width:6px; background-color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=F5F5F5]#F5F5F5[/URL]
}
#style-3::-webkit-scrollbar-thumb{
background-color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=000000]#000000[/URL]
}
#style-4::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=F5F5F5]#F5F5F5[/URL]
}
#style-4::-webkit-scrollbar{
width: 10px; background-color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=F5F5F5]#F5F5F5[/URL]
}
#style-4::-webkit-scrollbar-thumb{
background-color: [URL=https://www.ircrehberi.net/usertag.php?do=list&action=hash&hash=0ae]#0ae[/URL]
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
}
Kodu ekledikten sonra sitenizin sağ çubuğundaki görüntü şu şekilde olacaktır. Örnek site için [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]
|
|
|