I want to give a glow effect fro my scroll bar.
Is there any web kit scrollbar border colour option?
any body knows?
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
border:1px solid #eee;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 0px;
background: #aaaaaa;
}
::-webkit-scrollbar-thumb:window-inactive {
background: #eee;
}
::-webkit-scrollbar-thumb:hover{
background: #cccccc;
}
It depends on which element you want to glow, but to get a 'glow' on any item you would use box-shadow with x y radius spread color you can ignore the spread if you want to and the color if you want the box-shadow to be black.
so:
box-shadow: 0 0 1em 0 #000
is equal to:
box-shadow: 0 0 1em;
So, if you want the complete scrollbar to glow:
::-webkit-scrollbar {
width: 12px;
box-shadow: 0 0 1em #f00;
}
Or only the Thumb:
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 0;
background: #aaaaaa;
box-shadow: 0 0 1em #f00;
}
Related
Look at the edges. I been trying to fix this for two days now, throw at it everything everywhere. The problem is when the scrollbar appears this happens. Note it's the same when scrollbar is unstyled. What do you think?
Styled component code:
padding: 6px;
resize: none;
font-family: inherit;
font-size: inherit;
background-color: #e4e4e4;
color: black;
outline: none;
border: none;
&:focus {
outline: none;
border: none;
box-shadow: 0 0 0 2px #2d8cff;
background-color: ${Colors.primary};
}
& {
::-webkit-scrollbar {
width: 16px;
cursor: initial;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
box-shadow: inset 0 0 10px 10px #c1c1c1;
border: solid 4px transparent;
cursor: initial;
}
::-webkit-scrollbar-thumb:hover {
box-shadow: inset 0 0 10px 10px #7d7d7d;
}
}
I fixed this using box-sizing: border-box and using border instead of boxshadow. In border then has to be specified in not focus state too, to the same color as background.
I have a div that I want to be gradient filled. I also want to add a double border to the div but I do NOT want it to have the color gradient of the div.
I have my code here to show the problem:
http://jsfiddle.net/753rxozh/1/
.colors {
width: 100px;
border: 10px double black;
/* box-shadow:inset 0 0 0 10px black; */
padding: 10px;
height: 50px;
background: linear-gradient(#fff, orange);
}
<div class="colors"></div>
I tried messing around with box-shadow, but couldn't figure out how to make that a double border.
With the code above this is what I get:
I would like to get the border to not have that "reversed color" or any color at all. Between the 2 borders should just be white.
You can manipulate box-shadow property... you can have more than one!
.colors {
width: 100px;
padding: 10px;
height: 50px;
background: linear-gradient(white, orange);
box-shadow:
inset 0 0 0 2px black,
inset 0 0 0 8px white,
inset 0 0 0 10px black;
}
<div class="colors"></div>
You can use an outline with a black border and box shadow
.colors {
outline: 3px solid white;
width: 100px;
border: 2px solid black;
box-shadow: 0 0 0 6px black;
padding: 10px;
height: 50px;
margin: 0 auto;
background: linear-gradient( #fff, orange);
}
<div class="colors"></div>
You can simply adjust the background-clip of the gradient and you can keep the transparency:
.colors {
width: 100px;
border: 10px double black;
padding: 10px;
height: 50px;
background: linear-gradient(#fff, orange) padding-box;
}
body {
background: pink;
}
<div class="colors"></div>
Another idea is to consider outline-offset and you can still keep the transparency:
.colors {
width: 100px;
border: 2px solid black;
outline:2px solid black;
outline-offset:4px;
padding: 10px;
height: 50px;
margin:10px;
background: linear-gradient(#fff, orange) padding-box;
}
body {
background: pink;
}
<div class="colors"></div>
I have an on click dropdown menu thats animated on height, however, it has a 2px border and the border always appears when the menu is closed. Basically, it shows a little 2px strip where the menu would come out. I'm working in local, so its a bit hard to send all the code, but it's something like this:
(user__nav is a ul)
.user__nav {
margin-top: 10px;
background-color: #fff;
position: absolute;
border: 2px solid #2D3E65;
border-radius: 0 0 12px 12px;
max-height: 0;
overflow: hidden;
transition: max-height 0.7s;
ul>li {
padding: 5px 0 5px 20px;
a {
color: #2D3E65;
font-weight: 500;
}
&:hover {
background-color: #2D3E65;
a {
color: #fff;
}
}
&:last-child {
border-radius: 0 0 9px 9px;
}
}
}
}
when the element is clicked, I apply the following class to it:
.profile-transition {
max-height: 170px !important;
}
I also tried taking out the border from .user__nav {} and putting it in profile-transition but it doesn't seem to work at all:
.profile-transition:before {
border: 2px solid #2D3E65;
}
.profile-transition:after {
border: 2px solid #2D3E65;
}
Anything would help! Thank you!
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,70);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(239,149,36,100);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,30);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,30);
}
I found this css online which modified the style of the scroll bar. However it also changed the scroll bar of the page itself and I need it to change only the one of the menu list. The menu list id is "cssmenu" . Is it possible and how please?
Just use any selector before your scroll rules
.myscroll {
height: 1000px;
overflow: scroll;
}
.myscroll p {
height: 2000px;
}
.myscroll::-webkit-scrollbar {
width: 12px;
}
/* Track */
.myscroll::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,70);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
.myscroll::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(239,149,36,100);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,30);
}
.myscroll::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,30);
}
<div class="myscroll">
<p>Content<p>
</div>
I'm trying to make an inset pill using pure CSS:
Where the two color blocks are clickable separately.
But I can't figure out how to apply the box shadow to the containing element. The closest I got was using an :after element and positioning it over the links; but that covers up the links, making them un-clickable:
(jsFiddle)
<div class="pill">
✚
⦿
</div><!--/.pill-->
.pill {
position: relative;
float: left;
&:after {
content: "";
display: block;
border-radius: 8px;
box-shadow: inset 1px 2px 0 rgba(0,0,0,.35);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
a {
display: block;
padding: 4px 6px;
text-decoration: none;
color: #fff;
float: left;
&.plus {
background: #3c55b1;
border-radius: 8px 0 0 8px;
border-right: 1px solid darken(#3c55b1, 30%);
}
&.circle {
background: #40be84;
border-radius: 0 8px 8px 0;
border-left: 1px solid lighten(#40be84, 15%);
}
}
}
I'm aware of the pointer-events property, but browser support is pretty shabby.
So what do we think? Possible?
You are not using the spread property on the box shadow, so you want to create a border, instead using box shadow add a border to each element.
Remove the:after property and will get the normal behavior
jsFiddle
Make it simple,
draw your box-shadow from a, so it doesn't matter wich size they take.
http://codepen.io/gcyrillus/pen/xwcKg
.pill {
position: relative;
float: left;
background:#eee;
padding:0.5em;
}
a {
display: inline-block;
padding: 4px 6px;
width:1em;
text-align:center;
text-decoration: none;
color: #fff;
font-weight:bold;
box-shadow:inset 1px 2px 0 rgba(0,0,0,.35);
}
.plus {
background: #3c55b1;
border-radius: 8px 0 0 8px;
border-right: 1px solid #0c2571;
position:relative;
}
.circle {
background: #40be84;
border-radius: 0 8px 8px 0;
box-shadow:
inset 0px 2px 0 rgba(0,0,0,.35),
inset 1px 0 0 #70de94
;
}