retro scroll

Tags: scroll, retro

Description:

just another scroll to use I hope you use

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Madoque (https://layouts.spacehey.com/layout?id=27112) -->

<center> <style>
.scroll {
width: 200px;
height: 100px;
overflow: scroll;
overflow-x: hidden;
overflow-y: scroll;
}
.scroll::-webkit-scrollbar {
width: 16px;
height: 16px;
}

.scroll::-webkit-scrollbar-track {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
image-rendering: pixelated;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

.scroll::-webkit-scrollbar-track:active {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

.scroll::-webkit-scrollbar-thumb {
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid black;
border-bottom: 1px solid black;
box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
width: 16px;
height: 16px;
background-color: #cccccc;
z-index: 1;
}

.scroll::-webkit-scrollbar-corner {
background-color: #cccccc;
}

.scroll::-webkit-resizer {
width: 16px;
height: 16px;
background-color: #cccccc;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
background-position: bottom right;
background-repeat: no-repeat;
image-rendering: pixelated;
}

.scroll::-webkit-scrollbar-button, .scroll::-webkit-scrollbar-button {
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid black;
border-bottom: 1px solid black;
box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
display: block;
width: 16px;
height: 16px;
background-color: #cccccc;
image-rendering: pixelated;
background-repeat: no-repeat;
background-position: center center;
}

.scroll::-webkit-scrollbar-button:active, .scroll::-webkit-scrollbar-button:active {
background-position: 2px 2px;
}

.scroll::-webkit-scrollbar-button:horizontal:decrement, .scroll::-webkit-scrollbar-button:horizontal:decrement {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
}

.scroll::-webkit-scrollbar-button:horizontal:increment, .scroll::-webkit-scrollbar-button:horizontal:increment {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
}

.scroll::-webkit-scrollbar-button:vertical:decrement, .scroll::-webkit-scrollbar-button:vertical:decrement {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
}

.scroll::-webkit-scrollbar-button:vertical:increment, .scroll::-webkit-scrollbar-button:vertical:increment {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
}

.scroll::-webkit-scrollbar-button:horizontal:increment:start, .scroll::-webkit-scrollbar-button:horizontal:increment:start {
display: none;
}

.scroll::-webkit-scrollbar-button:horizontal:decrement:end, .scroll::-webkit-scrollbar-button:horizontal:decrement:end {
display: none;
}

.scroll::-webkit-scrollbar-button:vertical:increment:start, .scroll::-webkit-scrollbar-button:vertical:increment:start {
display: none;
}

.scroll::-webkit-scrollbar-button:vertical:decrement:end, .scroll::-webkit-scrollbar-button:vertical:decrement:end {
display: none;
}

::-webkit-scrollbar-button:active, ::-webkit-scrollbar-button:active {
border-top: 1px solid #868a8e;
border-left: 1px solid #868a8e;
border-bottom: 1px solid #868a8e;
border-right: 1px solid #868a8e;
box-shadow: none;
}
</style>


<div class="scroll">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div></center>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 543 comments ( View all | Add Comment )

vamppup	1792832177 using Report Comment
☆Dens☆⁠⁠	1792735969 Using :) Report Comment
miki	1791699366 using! Report Comment
Deeple	1791666390 using Report Comment
♡ˊ͈ ꒳ ˋ͈) luu	1791343621 usingg :} Report Comment
veryrottenkiwi	1790840139 using! Report Comment
mid4mid	1790623727 usin Report Comment
️EM0_kw33nx_x★	1790462990 Usin. >_o Report Comment
Andr0nitis	1790361111 Using! Report Comment
sleepyhead	1789920967 using!! Report Comment
B4ZZZBØi	1789862963 Using Report Comment
Xx_mElAnIe_xX	1789569531 usinggg Report Comment
h4nnibalia	1788575917 Using! Report Comment
alatan	1788466176 usin' Report Comment
⦻nevalith.	1788014927 using! Report Comment
xXxMs.lOnELyxXx	1787877754 using Report Comment
AlphaKitty	1787840076 USANDOO Report Comment
Audro_strawbro	1787633274 used using used up up used is Report Comment
l0ser	1787345677 usiing Report Comment
Roa	1787208725 used Report Comment