I have a mui table with a sticky row, this is the css for the column
position: sticky;
left: 0;
background-color: white;
z-index: 20;
border-right: 1px solid #d9d9d9;
With this the first row can be on top of the other rows when scrolling. But i want to add a hover with this conditions
background-color: rgba(0, 0, 0, 0.01)
But when i do this when i hover on the row the other content can be seen
What can i do?
Related
I've created a table with react-table and made sticky headers with CSS:
th {
position: sticky;
top: 0; /* required for the stickiness */
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
font-size: 14px;
}
yet, it's not perfect, when I scroll I can see some of the scrolled text above the table header.
Did anyone face this issue?
The solution is to move the top a little farther:
th { position: sticky; top: -5px; }
I created a bigger heading cell so it won't be noticed using padding-top:5px
Is there a way in css to create and overlay with opacity 0.5
And create a class that when applied will somehow affect the overlay so the final result will look something like this?
What I am looking for a way that the class would affect the overlay.
I don't know how the rest of your page looks like, but you can use a pseudo-element (to get an offset) with box-shadow to punch a hole around an element, simply by adding a class to the element you want to highlight. Needs some fine adjustment, if you got other shapes than rectangles.
div {
box-shadow: 0px 0px 10px 1px lightgrey;
border-radius: 1rem;
padding: 1rem;
}
button {
background-color: blue;
color: white;
padding: 0.5rem 1rem;
border-radius: 1rem;
cursor: pointer;
}
.highlight {
position: relative;
}
.highlight::before {
--white-area: -25px;
content: '';
position: absolute;
left: var(--white-area);
right: var(--white-area);
top: var(--white-area);
bottom: var(--white-area);
box-shadow:
inset 0px 0px 10px 0px rgba(0, 0, 0, 0.5),
0px 0px 0px 9999px rgba(0, 0, 0, 0.3);
pointer-events: none;
border-radius: 2rem;
}
<div>
<h3>Don't Have an Account?</h3>
<button class="highlight">Create Your Account</button>
</div>
You can easily create an overlay with css. But AFAIK there is no way to "punch a hole" into that overlay. But you might put your button above the overlay and give it a (in this case white) shadow. So you would have to apply a class to the button rather than to the overlay.
EDIT:
As Simon shows, there IS a way to make a hole - but there would be a severe issue: How do you find the position above your button in a responsive design?
I still would recommend putting the button ABOVE the overlay.
A way is to create an overlay, and put the button on top of it, using z-index.
button{
background-color: #3499eb;
padding: 10px;
position: relative;
z-index: 999;
color: #fff;
}
.overlay{
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left:0;
background-color: black;
opacity: 0.5;
}
<div class="overlay"></div>
<button>Click here </button>
I need to create an element with shadow like in the mockup:
http://take.ms/UdLFk
But I created only
http://take.ms/lns0J .
I have next styles:
.shadow {
width: 45px;
left: 37px;
position: relative;
box-shadow: 0 0px 2px 2px rgba(0,0,0,0.5);
}
My markup:
<div class=" shadow"></div>
So, how i can get a shadow like in mockup? I searched many articles but they did not help me.
Adding a border-radius (with a small height and a background-color that fits the shadow) to the element will give the shadow a nice rounded effect. Maybe decrease the opacity a little and you'll get pretty close. Also try using z-index: -1 to put the shadow behind the image.
.shadow {
width: 45px;
left: 37px;
position: relative;
box-shadow: 0 0px 4px 2px rgba(0, 0, 0, 0.1);
border-radius: 50%;
height: 3px;
background: rgba(0, 0, 0, 0.1);
}
<div class="shadow"></div>
Im trying to use a cirlce for one of the radio button, but while using css3 im getting a blurriness around the border.
Here is the code
div {
height: 18px;
width: 18px;
overflow: hidden;
border-radius: 50%;
position: relative;
border-radius: 100px;
box-shadow: 10px 10px 10px -26px inset rgba(0, 0, 0, 1);
border:1px solid red;
}
Any idea how to avoid?
The radio input has a margin by default, and the border of the parent div only wraps around the whole div, so the margin makes it look weird.
I set the margin of the radio button to 3px to fit it in the center. Any blur seems to be fixed in my view.
<div class="rad">
<input type="radio" /> Radio Button
</div>
.rad {
height: 18px;
width: 18px;
overflow: hidden;
border-radius: 50%;
position: relative;
box-shadow: 10px 10px 10px -26px inset rgba(0, 0, 0, 1);
border:1px solid red;
overflow:hidden;
}
input {
margin: 3px !important;
}
https://jsfiddle.net/bp6fLo7c/1/
You could design your own radio button.
1) Disable default appearance :
-webkit-appearance: none;
appearance: none;
2) Style it as you want.
3) Style the "checked" state :
input[type="radio"]:checked {
background-color: red;
}
Demo : https://jsfiddle.net/Paf_Sebastien/fjoyajxn/
I am trying to remove the left border where the active menu item meets right content div.
See http://d.pr/i/hfRZ+
So it appears the active element is the same as the level as the main content div, like this http://dribbble.com/shots/663779-Left-navigation
If it matters I am using twitter bootstrap.
Any pointers greatly appreciated!
Edit: here is link to HTML/CSS
View:
http://codepen.io/anon/full/Asrnm
Edit
http://codepen.io/anon/pen/Asrnm
You can't partially remove borders, you can only cover them up. You need to make the selected item overlap the border (or have a script that places another element over the border).
You could have the selected item only have a top and bottom border
.selected-item
{
border-top: 1px solid rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
or
.selected-item
{
border: 1px solid rgba(0, 0, 0, 0.5);
border-left: 0px;
border-right: 0px;
}
and to avoid the box shadow escaping the parent container, you could instead replace it with
.selected-item:after
{
display: block;
position: absolute;
height: 10px;
background: url("gradient.gif") top left repeat-x;
}
that way, you get a consistent horizontal shadow below the element, that goes all the way up to, but not beyond, the parent element and its borders.
.selected-item {
border-left: 0px;
border-top: 0px;
border-right: 0px;
border-bottom: 0px
}