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%;
}
Related
Basically I created a website using htl and css, and am now porting it to react. However when I came to the scrollbar, I cannot work out how to make the background of it transparent. Here's my code,
::-webkit-scrollbar {
width: 10px;
background: transparent;
overflow: hidden;
}
::-webkit-scrollbar-track {
border-radius: 5px;
background: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background: transparent;
background-color:#94f211;
}
Following will help:
::-webkit-scrollbar-thumb {
background: #0000;
}
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.
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!
I have been created simple search form, using by google.
Here is my jsfiddle link: http://jsfiddle.net/njs6d489/
In that, search icon right side right?
But i need icon looking left side and placeholder also need to place left side.
I explained in this image http://s22.postimg.org/ype712rcx/Untitled_1.png
May i know, how can i do this. Is there possible to do this?
Thanks in advance.
body {
background: #fff;
color: #666;
font: 90%/180% Arial, Helvetica, sans-serif;
width: 800px;
max-width: 96%;
margin: 0 auto;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F60;
}
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
/* Demo 2 */
#demo-2 input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-2 input[type=search]:hover {
background-color: #fff;
}
#demo-2 input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-2 input:-moz-placeholder {
color: transparent;
}
#demo-2 input::-webkit-input-placeholder {
color: transparent;
}
Are you expecting like this: Demo
Updated Demo
I changed the search icon's background position at Normal state as 50% and on focus as 90%.
Here I included only the css which I changed.
CSS:
input[type=search] {
background: #ededed url(http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 50% center;
float:right;
}
input[type=search]:focus {
background: #ededed url(http://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 90% center;
}
I need some help, I have a div with border-radius and I need it to be transparent outside the circle div. I tried with :after and outline. With ":after" the border stayed within the div and with outline I couldn't get it rounded.
Does anyone know the answer ?
CSS :
div.circle {
background: black;
width: 5em;
height: 5em;
-moz-border-radius: 2.5em;
-webkit-border-radius: 2.5em;
border-radius: 2.5em;
}
div.circle p {
padding: 2em 2em 0 2em;
color: white;
}
div.circle:after {
content:'';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 2.5em;
border: 4px solid rgba(255, 255, 255, 0.51);
}
CSS with outline property:
div.circle {
outline: 4px solid rgba(255,255,255,0.3);
background: black;
width: 5em; height: 5em;
-moz-border-radius: 2.5em;
-webkit-border-radius: 2.5em;
border-radius: 2.5em;
}
What I want:
http://giovannigras.be/home/img.png
Use box-shadow instead of border:
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.51);
Cause a transparent border will transpare the background beneath,
while if you use the spread value in the box-shadow property you're good to go:
Example demo
Also as suggested by #vals you can go with background-clip to retain the background size into the content-box size model cause otherwise goes into the default border-box.
Docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
If you want your border to be transparent (or semitransparent), and you are setting a black background, you need to set the background limited to the inner part, so that the border can be seen.
The property for this is background-clip: content-box;
CSS
div.circle {
background: black;
background-clip: content-box;
width: 5em;
height: 5em;
border-radius: 50%;
border: solid 5px rgba(0,0,0,0.3);
}
fiddle
You can use a container to provide a border offset if you need it.
DEMO
HTML
<div class="border">
<div class="inner"></div>
</div>
CSS
.border {
width: 80px; height: 80px;
border-radius: 50%;
background: transparent;
border: 10px solid rgba(255,255,255,.4);
}
.inner {
width: calc(100% - 40px);
height: calc(100% - 40px);
border-radius: 50%;
background: rgba(255,255,255,.6);
border: 10px solid transparent;
margin: 10px;
}