Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
Hello people, i am trying to make the thumb's width thinner than the tack's width so that i can have a shadow effect on the thumb ( such as it will look like the thumb-bar is floating on top of the track-bar).
Does anyone have any idea or if it is possible in the first place?
Thanks in Advance,
George.
This should work!
body {
font-family: sans-serif;
height: 2000px;
}
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 5px 5px white, inset 0 0 0 4px black;
}
::-webkit-scrollbar-button {
display: none;
}
Should look like this:
You can tinker around with it, but it goes a bit yuck if you add rounded corners!
Now it isn't so bad:
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 days ago.
The community is reviewing whether to reopen this question as of 4 days ago.
Improve this question
I want to test the offsetTop of the element, but it's always 8 even if I add position and padding to the .parent or body.
console.log(document.getElementById('children').offsetTop);
.parent {
width: 200px;
border: 3px solid #000;
height: 300px;
overflow: scroll;
position: relative;
padding-top: 20px;
}
.children {
border: 3px solid red;
height: 200px;
}
<div class="parent" id="parent">
<div class="children" id="children"></div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
If you are unable to understand, then please open the image. I want to draw a black vertical line at left border of a div
I apologise for my useless paint ability.
enter image description here
What must I do to make this in css?.
Thanks.
Your HTML Code
<div class="badge">
<p class="text">New</p>
</div>
CSS for background
.badge {
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 65%, 0 100%);
background-color : red;
height: 100px;
width:50px
}
.text {
text-align: center;
padding-top: 35px;
}
You can use bennettfeely for diffrent css shapes that will generate a clip-path of the shape
Please check out this link https://stackoverflow.com/a/24207393/10293708, has a similar question. But all in all, I would also suggest you to do try out doing something using css first and maybe you could add a jsfiddle link to what you have achieved so far, so that others can help better.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Please help my task is: when you move the mouse cursor on the selected item, change the background and text colors
http://liveweave.com/rVjF5y
You can add below CSS code
.lw:hover { background-color: red; color: blue;}
You can do it in css using the :hover, example:
.element1 {
padding: 4px;
display: block;
background: #000;
color: #fff;
}
.element1:hover {
background: #d1d1d1;
color: #000;
}
<div class="element1">Mouse Over / Mouse Out</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I'm trying to create a circle using only css. I've done this using the below:
border-radius: 50%;
background: #f5f5f5;
transition: all 0s ease-in-out;
box-shadow: 0 0 3px gray;
I've created a fiddle: https://jsfiddle.net/rg991koa/11/
I'm basically trying to onClick add an image but my background-image isn't displaying within the circle and I think this is due to me using background colour on my element.
Change background-image to background
.myNewClass {
background: url(http://static4.wikia.nocookie.net/__cb20131121214007/destinypedia/images/7/71/Information_Icon.svg) no-repeat;
background-size:100%;
}
https://jsfiddle.net/rg991koa/21/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I need a little help with making my own css-compiler in JavaScript.
How can I make a compiler that compiles this nested rules example:
html{
background: #2E2E2E;
body{
height: 200px;
width: 100%;
background: #fff;
a{
color: rgb(0, 0, 255);
&:hover{
color: rgb(200, 0, 255);
}
}
}
}
Into this:
html{
background: #2E2E2E;
}
html body{
height: 200px;
width: 100%;
background: #fff;
}
html body a{
color: rgb(0, 0, 255);
}
html body a:hover{
color: rgb(200, 0, 255);
}
Thanks for any help!
If you vote down, please tell me why.
I would start by mentioning that building your own css-compiler is no joke. It is a serious thing. You should use something like Sass, Less, or Stylus. If they are missing a feature you need, you should build a plugin for them, rather than try to implement your own engine.
Having said that, an answer to your question may be reworkcss. It is a project that people will use to make their own CSS-compiler.