Masaüstü ve Cep telefonlarında sitenizi şık göstermek istiyorsanız yapmanız gerekenler çok basit !
Mobil stile sahip olan kaydırma çubuğu sohbet site sahipleri mutlaka kullanmalıdır.
Dünyanın en büyük siteleri bile şık kaydırma çubuklarını kullanıyor.
Kaydırma çubuğunu özelleştirme
Bir web sitenin diğer siteden farklı olduğunu arama motorları tarafından çok sevildiğini biliyoruz.
Sizin web sitenizi diğerlerinden ayırabilecek özelliklerden birtanesi css scroll bardır.
arkadaşlar kodlar aşagıdadır demolarınada bakarak şık görüntüleri kendinize göre css kodları ile düzenleyebilirsiniz.
[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] [Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] PHP Kod: Kodu kopyalamak için üzerine çift tıklayın!
<!DOCTYPE html>
<html>
<head>
<title>My Example</title>
<!-- CSS -->
<style>
/* Force scrollbars onto browser window */
body {
margin-bottom: 200%;
}
/* Box styles */
.myBox {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 200px;
height: 200px;
overflow: scroll;
}
/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 10px olivedrab;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: yellowgreen;
box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:hover {
background: #7bac10;
}
</style>
</head>
<body>
<!-- HTML -->
<div class="myBox">
Efficient honorificabilitudinitatibus cross-media information without floccinaucinihilipilification cross-media value. Quickly maximize timely deliverables for real-time schemas plenipotentiary.
</div>
</body>
</html>
PHP Kod: Kodu kopyalamak için üzerine çift tıklayın!
<!DOCTYPE html>
<html>
<head>
<title>My Example</title>
<!-- CSS -->
<style>
/* Force scrollbars onto browser window */
body {
margin-bottom: 200%;
}
/* Box styles */
.myBox {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 200px;
height: 200px;
overflow: scroll;
}
/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #ccc;
}
::-webkit-scrollbar-thumb:hover {
background: #999;
}
</style>
</head>
<body>
<!-- HTML -->
<div class="myBox">
Efficient honorificabilitudinitatibus cross-media information without floccinaucinihilipilification cross-media value. Quickly maximize timely deliverables for real-time schemas plenipotentiary.
</div>
</body>
</html>
PHP Kod: Kodu kopyalamak için üzerine çift tıklayın!
<!DOCTYPE html>
<html>
<head>
<title>My Example</title>
<!-- CSS -->
<style>
/* Force scrollbars onto browser window */
body {
margin-bottom: 200%;
}
/* Box styles */
.myBox {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 200px;
height: 200px;
overflow: scroll;
}
/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: gold;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: yellowgreen;
}
::-webkit-scrollbar-thumb:hover {
background: #88ba1c;
}
</style>
</head>
<body>
<!-- HTML -->
<div class="myBox">
Efficient honorificabilitudinitatibus cross-media information without floccinaucinihilipilification cross-media value. Quickly maximize timely deliverables for real-time schemas plenipotentiary.
</div>
</body>
</html>
PHP Kod: Kodu kopyalamak için üzerine çift tıklayın!
<!DOCTYPE html>
<html>
<head>
<title>My Example</title>
<!-- CSS -->
<style>
/* Force scrollbars onto browser window */
body {
margin-bottom: 200%;
}
/* Box styles */
.myBox {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 200px;
height: 200px;
overflow: scroll;
}
/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
width: 2px;
border: 1px dashed goldenrod;
}
::-webkit-scrollbar-thumb {
background: goldenrod;
}
::-webkit-scrollbar-thumb:hover {
background: darkgoldenrod;
}
</style>
</head>
<body>
<!-- HTML -->
<div class="myBox">
Efficient honorificabilitudinitatibus cross-media information without floccinaucinihilipilification cross-media value. Quickly maximize timely deliverables for real-time schemas plenipotentiary.
</div>
</body>
</html>
PHP Kod: Kodu kopyalamak için üzerine çift tıklayın!
<!DOCTYPE html>
<html>
<head>
<title>My Example</title>
<!-- CSS -->
<style>
/* Force scrollbars onto browser window */
body {
margin-bottom: 200%;
}
/* Box styles */
.myBox {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 200px;
height: 200px;
overflow: scroll;
}
/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
border: 1px solid yellowgreen;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: yellowgreen;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #88ba1c;
}
</style>
</head>
<body>
<!-- HTML -->
<div class="myBox">
Efficient honorificabilitudinitatibus cross-media information without floccinaucinihilipilification cross-media value. Quickly maximize timely deliverables for real-time schemas plenipotentiary.
</div>
</body>
</html>
GMAİL
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
FACEBOOK
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
OUTLOOK
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.
CODEPEN
Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir. 
08 Haziran 2019, 21:48
Benzer Konular 
Normal
