Good evening! I just wanna to change my scroll like this.
So it looks like that track is hidden. I got my style like this
::-webkit-scrollbar{
width: 15px;
height: 40px;
}
::-webkit-scrollbar-thumb{
background-color: #DBDBDB;
border: 4px solid transparent;
border-radius: 11px;
background-clip: content-box;
}
::-webkit-scrollbar * {
background: transparent;
}
::-webkit-scrollbar-thumb:vertical {
height: 90px;
}
And I got such result:
So there is a question. How can I do this with CSS or JS maybe.
Thanks
I think this might work:
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: transparent;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(,0,0,0.5);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
You might have to edit it according to your need.
here to save the day, you must first add overflow: overlay; to your body tag, works the same as overflow: auto; but it will be on top of the content instead of on its side.
then just add this:
*::-webkit-scrollbar {
background-color: transparent;
width: 12px;
}
*::-webkit-scrollbar-track {
background-color: transparent;
}
*::-webkit-scrollbar-thumb {
border-radius: 20px;
border: 3px solid transparent;
background-color: rgba(0,0,0,0.3);
background-clip: content-box;
}
and adjust the color and the width to your liking, your welcome!
Related
Is there a way to replicate YouTube's custom scrollbar?
Desired effect:
It seems like ::webkit-scrollbar-thumb has a left and right padding to achieve that effect.
I have tried the following:
* {
margin: 0;
padding: 0;
::-webkit-scrollbar {
background: #181818;
width: 12px;
}
::-webkit-scrollbar-thumb {
padding: 0 4px; // This was supposed to do the trick
background: #909090;
border-radius: 100px;
&:hover {
background: #606060;
}
}
}
But it doesn't work...
Result:
Any ideas how to achieve the desired effect? Thanks in advance.
You could try faking the padding with background-clip: padding-box and applying a transparent border-right and left.
::-webkit-scrollbar {
background: #181818;
width: 20px;
}
::-webkit-scrollbar-thumb {
padding: 0 4px;
border-right:4px solid transparent;
border-left:4px solid transparent;
background: #909090;
background-clip: padding-box;
border-radius: 100px;
&:hover {
background: #606060;
}
}
html,
body {
height: 300%;
}
I really doubt what I am asking is possible but it's still worth a try.
I am trying to create a button that normally has background-color: transparent; color: white; and when you hover over it, those properties should swap. The problem is that if you just swap them then all you see is a white button. If you know the background colour of the containing element then you can get the colour from there but If the button is over an image or a canvas then this won't work.
This is how I've been doing it so far
html,
body {
height: 100%;
}
#container {
background-color: #38404D;
height: 100%;
}
.ghost-button {
background-color: transparent;
border: 1px solid #ffffff;
outline: none !important;
transition: all 0.8s;
margin: 10px 10px;
padding: 6px 7px;
cursor: pointer;
color: #ffffff;
}
.ghost-button:hover {
background-color: #ffffff;
color: #38404D;
}
.ghost-button:active {
box-shadow: inset 0 0 8px 0px #888888;
}
<div id="container">
<button class="ghost-button">Hover Here</button>
</div>
UPDATE
It seems that quite a few people were confused by the question. I am asking if there is a way to do the exact same thing I've done above but on top of an image or a canvas (instead of a solid colour). See example below
html,
body {
height: 100%;
}
#container {
background-image: url("http://www.freegreatpicture.com/files/147/17878-hd-color-background-wallpaper.jpg");
height: 100%;
}
.ghost-button {
background-color: transparent;
border: 1px solid #ffffff;
outline: none !important;
transition: all 0.8s;
margin: 10px 10px;
padding: 6px 7px;
cursor: pointer;
color: #ffffff;
}
.ghost-button:hover {
background-color: #ffffff;
color: #38404D;
}
.ghost-button:active {
box-shadow: inset 0 0 8px 0px #888888;
}
<div id="container">
<button class="ghost-button">Hover Here</button>
</div>
Yes, it IS possible in CSS with mix-blend-mode.
Answer's update in April 2021: Currently it have a very solid support (95% globally) although Safari doesn't have hue, saturation, color, and luminosity blend modes. Of course, IE isn't a considerable thing if you expect to use it (like many of other cool CSS features of the last years).
.ghost-button {
/* Important part */
mix-blend-mode: screen;
background: #000;
color: #fff;
/* Button cosmetics */
border: .125em solid #fff;
font: 2em/1 Cursive;
letter-spacing: 1px;
outline: none !important;
transition: all .8s;
padding: .5em 1em;
cursor: pointer;
}
.ghost-button:hover {
/* Important part */
background: #fff;
color: #000;
}
#container {
background: url('http://www.freegreatpicture.com/files/147/17878-hd-color-background-wallpaper.jpg') center/cover;
/* Also works with background-color or gradients: */
/* background: linear-gradient(to right, red, yellow); */
/* Container positioning */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
html, body {
margin: 0;
}
<div id="container">
<button class="ghost-button">Hover Here</button>
</div>
As you can see, the secret here is using mix-blend-mode: screen along with the black color for the "erased" part, since black is mixed with the background when using this screen mode.
No, it isn't possible in CSS! You could try to set the color with JS to mimic this effect.
body {
height: 100%;
}
#container {
background-color: #38404D;
height: 100%;
}
.ghost-button {
background-color: transparent;
border: 1px solid #ffffff;
outline: none !important;
transition: all 0.8s;
margin: 10px 10px;
padding: 6px 7px;
cursor: pointer;
color: #ffffff;
}
.ghost-button:hover {
background-color: none;
color: red;
}
.ghost-button:active {
box-shadow: inset 0 0 8px 0px #888888;
}
<div id="container">
<button class="ghost-button">Hover Here</button>
</div>
hover color is set to red you can update it.
I customize scrollbar by CSS3. And I don't know, how to make scrollbar-thumb smaller (shorter). Width or height don't work. Can anybody help me?
#parent {
width: 300px;
height: 300px;
padding: 20px;
overflow: auto;
}
#child {
width: 250px;
height: 1000px;
margin: 0 auto;
border: 2px solid #8c1b21;
}
#parent::-webkit-scrollbar {
width: 15px;
background-color: #B79889;
border-radius: 5px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
#parent::-webkit-scrollbar-thumb {
background-color: #8c1b21;
border-radius: 5px;
}
<div id="parent">
<div id="child"></div>
</div>
Height of thumb depends on the height of the div where you are applying scroll
#parent {
width: 300px;
height: 300px;
padding: 20px;
overflow: auto;
}
#child {
width: 250px;
height: 4000px;
margin: 0 auto;
border: 2px solid #8c1b21;
}
#parent::-webkit-scrollbar {
width: 10px;
background-color: #B79889;
border-radius: 5px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
#parent::-webkit-scrollbar-thumb {
background-color: #8c1b21;
border-radius: 5px;
}
<div id="parent">
<div id="child"></div>
</div>
I've come across a lot of methods for this very problem; the usual answer is create a div, make a custom scroll bar (don't), or don't bother. This is a solution I found previously to solve this problem:
border-top: 15px solid transparent;
border-bottom: 35px solid transparent;
background-clip: padding-box;
Basically surround the track with transparent thicc borders, ie. shorten the track.
This works for me, "::-webkit-scrollbar /width" is the key
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 4px !important;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: $apple-gray;
}
Below is my code. I'm going for a text changing effect when I hover onto a search button. I'm keeping the button background the same and just trying to change the color of the text when hovering. I'm not sure what i'm missing. Is there an easier way to achieve this? The button just stays the pre-hover colors. I'm out of ideas.
.header_search #search-submit {
width: 80px;
height: 35px;
margin: 0 -83px 0 0;
background: #ff9105;
border: 2px solid black;
border-left: none;
font-size: 14px;
color: #008b95;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
{{ trans_fast }}
.header_search #search-submit:hover {
background: #ff9105;
color: white
}
.header_search #search-submit {
width: 80px;
height: 35px;
margin: 0 -83px 0 0;
background: #ff9105;
border: 2px solid black;
border-left: none;
font-size: 14px;
color: #008b95;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
/* dont know about this "{{ trans_fast }}" */
.header_search #search-submit:hover {
background: #ff9105;
color: white;
}
After editing here, it should look okay, the trans_fast is a very unknown concept to me. Some of your css properties were vertical and some were horizontal. Try one or the other but not both at the same time for syntax purposes. PLUS (you forgot the semicolon for color)
Add ; and the end of color: white
.header_search #search-submit:hover {
background: #ff9105;
color: white;
}
Fiddle
I am using ::-webkit-scrollbar to make a custom scrollbar in Chrome. I have a border-radius: 10px and in doing that, there are white corners at the top:
Sorry, it's kinda hard to see since it's a scrollbar.
I want the corners to be the same color as the header div (#dadae3). Is there any way to get rid of the white corners using CSS only without changing the styles of the scrollbar?
CSS (entire):
body {
padding: 0;
margin: 0
}
::-webkit-scrollbar {
width: 13px;
}
::-webkit-scrollbar-track {
background: #ffffff;
border-radius: 10px;
border: 1px solid #aeaeb5
}
::-webkit-scrollbar-thumb {
background: #dadae3;
border-radius: 10px;
border: 1px solid #aeaeb5
}
::-webkit-scrollbar-thumb:hover {
background: #c4c4cc
}
::-webkit-scrollbar-thumb:active {
background: #aeaeb5
}
HTML:
<div style='background: #dadae3; width: 100%; height: 30px;'></div>
<div style='width: 100%; height: 1000px'></div>
You have to set the ::-webkit-scrollbar-corner pseudo-element, e.g.
::-webkit-scrollbar-corner { background: rgba(0,0,0,0.5); }
You can set the background-color property for the pseudo-element -webkit-scrollbar, doing that you can set the "corner color".
I was fighting this scrollbar-corner today, which takes space and creates unneeded gap. If I use overflow: auto on container this scrollbar corner completely disappears while scrollbar itself remains visible.
I had to customize webkit-scrollbar-corner as colored triangle instead of square.
Here is the result how to do it. With border trick.
::-webkit-scrollbar-corner {
background: transparent;
width: 0;
height: 0;
border-left: 16px solid #8B7E79;
border-top: 16px solid #8B7E79;
border-bottom: 16px solid transparent;
border-right: 16px solid transparent;
}
Try with this
::-webkit-scrollbar-corner {
background: transparent;
width: 0;
height: 0;
border-left: 16px solid #8B7E79;
border-top: 16px solid #8B7E79;
border-bottom: 16px solid transparent;
border-right: 16px solid transparent;
}