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!
Related
This is a simple demo => demo
The odd thing is that scrollbar-track seems to be able to add any attribute except box-shadow,
Unless I add the 'inset' property, but I don't want the 'inset' effect.
This is the style code
.scroll-box {
height: 300px;
overflow: scroll;
overflow-x: hidden;
}
.scroll-box::-webkit-scrollbar {
width: 10px;
}
.scroll-box::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #7d7d7d;
border: 2px solid transparent;
background-clip: content-box;
}
.scroll-box::-webkit-scrollbar-track {
border: 1px solid red;
box-shadow: -4px 0 20px #000;
}
This is html code
<div class="scroll-box">
.............omit
</div>
Expect normal shading
What should I do?
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 applied overflov-y scroll using following style:
.custom #front_videos .large-2 {
height: 545px;
overflow-y: scroll;
position: relative;
}
that display scroll like this -> http://nimb.ws/XZ3RVS
I want to display that scroll bar like this -> http://nimb.ws/IGMnXl
So any one have idea how to display scroll bar like this using CSS style then replay me.
Thanks.
I've whipped up some styles for you that looks pretty similar making use of ::-webkit-scrollbar and it's sibling selectors. Note this is only for Chromium browsers, as Scrollbars aren't a part of the W3C spec and thus don't have valid selectors, outside of Chrome's relatively robust pseudo-selectors.
.large-2 {
margin-left: 30px;
float: left;
height: 300px;
overflow-y: scroll;
margin-bottom: 25px;
width: 100px;
background: #ccc;
}
.force-overflow {
min-height: 450px;
}
.large-2::-webkit-scrollbar-track {
border: 1px solid #000;
padding: 2px 0;
background-color: #404040;
}
.large-2::-webkit-scrollbar {
width: 10px;
}
.large-2::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #737272;
border: 1px solid #000;
}
<div class="custom">
<div id="front_videos">
<div class="large-2">
<div class="force-overflow"></div>
</div>
</div>
</div>
There is a relatively graceful JavaScript solution called NanoScroller - though I don't personally have much experience with if, if you're looking for something with more cross-browser ability.
try this:
::-webkit-scrollbar {
width: 12px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255,0,0,0.8);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
Try this snippet.
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background:black;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background:rgb(54, 56, 58);
}
You can style scrollbar using ::-webkit-scrollbar prefix but it only work in webkit.
I think you better use "jquery.mCustomScrollbar.concat.min" this jquery plugin. It support most of the browser.
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;
}
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
;
}