Embedded Files
TITLE : How To Create Easily Awesome Looking Custom Scrollbar | Pure CSS | Easy Coding
Source Code :
HTML
<html>
<head>
<title>
Custom Scroll Bar
</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<img src="images/img.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam ex, placerat non orci et, congue lacinia sapien. Vestibulum suscipit interdum felis ac pretium. Suspendisse nec cursus urna, vitae bibendum metus. Maecenas est lacus, suscipit in nisl non, auctor placerat est. Etiam eu purus volutpat, dignissim felis ac, rutrum nulla. Sed at lorem vel lorem vestibulum malesuada. Mauris ut urna dignissim orci porttitor tempus. Sed scelerisque dui ac ex varius luctus. Duis finibus, risus vitae dictum convallis, arcu magna bibendum augue, in mollis ipsum libero eu felis. Cras leo neque, sollicitudin sed urna vel, tempor commodo purus. Cras mollis fermentum magna nec auctor. Duis vulputate finibus velit ac rhoncus. Pellentesque vel finibus metus, in blandit eros. Sed cursus lacus vitae mollis aliquam.
Vivamus ipsum tellus, cursus non dui a, pellentesque pulvinar metus. Integer id dignissim risus, eu fermentum risus. Aliquam tempor scelerisque nisi, nec rutrum magna vestibulum at. Nam at ipsum ac tellus cursus varius. Aenean neque neque, molestie vitae mollis et, blandit ac libero. Etiam euismod egestas posuere. Fusce a posuere ipsum. Duis bibendum ultricies felis at dignissim. Praesent cursus leo felis, et dictum ipsum tristique eu. Ut enim nibh, aliquet et sapien in, vulputate fringilla urna. Cras arcu quam, sollicitudin sit amet ligula ut, pretium rutrum eros. Integer interdum non lacus sed bibendum. Quisque gravida efficitur urna, gravida imperdiet tellus sollicitudin ac. Nulla fringilla hendrerit libero, tempor luctus elit tempor accumsan. Mauris posuere sapien vitae tortor aliquam fringilla molestie et tellus.
Aenean eu elementum ipsum. Suspendisse a vestibulum diam, ut imperdiet odio. Nam iaculis nisl urna, in euismod massa hendrerit in. Fusce eget lorem ut erat aliquet euismod nec sed tellus. Aliquam eu mattis nisi. Ut luctus erat ut neque tempor gravida. Nullam feugiat, lorem ut aliquam ullamcorper, dui diam eleifend augue, at aliquet urna lorem et justo.
Sed quis accumsan neque, non venenatis est. Sed lobortis, enim ac dapibus congue, ex purus gravida elit, quis cursus sapien velit nec massa. Maecenas dui orci, rutrum et gravida quis, porttitor quis mi. Sed auctor arcu quis euismod ultrices. Praesent sem augue, lacinia quis luctus id, hendrerit sed elit. Phasellus eget ipsum at nunc pellentesque laoreet. Duis semper ligula in nisl fermentum convallis quis vitae sapien. Pellentesque aliquet sem ut mi scelerisque, vitae dapibus augue porttitor. Donec suscipit at enim et vestibulum. Donec ultrices tristique nulla, ut euismod ipsum blandit eu.
Integer varius mauris bibendum justo auctor aliquet. Pellentesque egestas turpis in ex mattis, eget dapibus libero semper. Aliquam vehicula urna nibh, ut porta diam interdum luctus. Maecenas non ligula sapien. Cras eget orci arcu. Quisque id augue sapien. Donec id ligula ligula. Nunc ac odio egestas, ultricies sem blandit, viverra nibh. Quisque hendrerit, ex nec bibendum tempor, enim tortor mollis ante, nec volutpat quam lacus ut felis. Nunc id porta felis. Vivamus finibus ligula a elit porttitor facilisis. Pellentesque ultrices sapien enim, eu elementum ex vehicula eu. Nunc at pretium diam.
</p>
</div>
</body>
</html>
CSS :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Futura Bk BT;
}
body {
background-color: #f1f5f7;
}
.header {
width:100%;
}
.header img{
width:100%;
height: 100vh;
}
.header p{
width:80%;
padding: 100px 0;
margin: 0 auto;
font-size: 1.5em;
color:#212121;
}
::-webkit-scrollbar{
width:15px;
}
::-webkit-scrollbar-track{
background-color: #286286;
}
::-webkit-scrollbar-thumb {
background-color: #ff4860;
}
Page updated
Google Sites
Report abuse