This repository has been archived by the owner on Mar 19, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
webkit_custom_scrollbar.html
46 lines (40 loc) · 3.52 KB
/
webkit_custom_scrollbar.html
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Scrollbar personalizzata con webkit :: Laboratorio CSS</title>
<link href='http://fonts.googleapis.com/css?family=Maven+Pro:400,700' rel='stylesheet' type='text/css' />
<link href="common/css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
*{margin:0;padding:0}
div.overflow{height: 150px;overflow: scroll;background: #efefef;padding: 20px;}
div.overflow p{margin-bottom:20px;font-size:15px;line-height:20px}
div.overflow p:last-child{margin:0}
/* SCROLLBAR */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{border-radius:10px; background:#eee; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.1);}
::-webkit-scrollbar-thumb{border-radius:10px; background:#bbb;}
/* HORIZONTAL BAR*/
::-webkit-scrollbar:horizontal{height:10px;}
::-webkit-scrollbar-track:horizontal{background:#ddd; box-shadow:none;}
</style>
</head>
<body>
<a id="logo" href="http://www.laboratoriocss.it" title="Laboratorio CSS" class="logo"><img src="common/img/structure/logoLabcss.png" alt="Logo laboratorio CSS" /></a>
<div id="container">
<div id="header">
<h1>Scrollbar personalizzata con webkit</h1>
<p id="description">Webkit affida nuovamente ai css la personalizzazione della scrollbar attraverso l'uso di alcuni pseudo-elementi. Vediamo di che si tratta.</p>
</div>
<div id="content">
<!-- ESEMPIO -->
<div class="overflow">
<p>Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.</p>
<p>Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.</p>
<p>Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum.</p>
</div>
<!-- //ESEMPIO -->
</div>
</div>
</body>
</html>