This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 7 years ago.
I'm using:
box-shadow: 0px -1px 0px #333333;
on my footer but it's hiding behind or disappearing where the div before it is... hard to explain but here's what it looks like: http://cl.ly/7HLy
Is there a way do have the box-shadow be on top of the other div before the footer? I've tried adding a z-index but it doesn't work.
I'll repeat my comment here since it solved the problem.
When using z-index you should use position: relative;
Related
This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 11 months ago.
I am trying to style a <ul>'s items. What I am basically trying to do is when i hover the mouse over one <li> a subtle border should appear. But the problem is that the border is taking the entire list's width.
Code is:
li:hover {
border-style: dotted;
border-width: 0.1rem;
}
I have tried to apply display: inline-block or other things that came to me, but didn't manage to make it work.
Current behaviour in this image:
currentBehaviour
What is the solution and what is the cause of the current behaviour? Thank you!
It's because your li is taking the full width of ul tag.
You can use
width: fit-content;
Which will make the li take the length of only the text inside rather than complete ul
This question already has answers here:
Invert rounded corner in CSS?
(10 answers)
Closed 3 years ago.
I am trying to make the following design layout in css/html, but I can't get the inverted border-radius style encircled in blue (BOTTOM-LEFT).
So far, i am using the following css properties in my div:
border-radius: 0 0 0 3rem;
The result is the following:
I have tried to make a margin-top:-3rem of the next div which works but destroys the div height structure for full screen ui and make me change all the weight percentages which is not elegant. Also, I found these tricks from stackoverflow but I don't know how can I get the result based on their code and also it's not simple at all.
Looking for suggestions and easy tricks to achieve this.
Pardon the inline styling but you just need to work with position, z-index and negative margin-bottom
<div style="border-bottom-left-radius: 50px; margin-bottom: -50px; position:relative; z-index: 1; height:150px; background-color: blue;"></div>
<div style="border-bottom-left-radius: 50px; position:relative; z-index: 0; height:150px; background-color: red;"></div>
if you want to make design like the example, just add padding to your div. And it will solve your problem.
This question already has answers here:
Is it possible to generate a box-shadow that follows the shape of a clip-path polygon?
(3 answers)
Closed 3 years ago.
I'm trying to add box-shadow to a <div> element but it just doesn't show up.
I've already tried adding height and width in px to the class and tried using z-index on class and parents, nothing worked for me.
Here's the code. https://codepen.io/mateus-ramos/pen/BaBbyMG
I want to add shadow to ".imagem-container" class.
Clip path is cutting off your shadow. A workaround for this is to create a parent div for the element, then put the box-shadow on that. Then use filter to follow the path of your imagem-container (otherwise it will be a square box shadow). This article might help: https://css-tricks.com/using-box-shadows-and-clip-path-together/
You have to add a drop-shadow filter in the parent div, so the effect can be shown. In your code add this into the .job class
.job { /*parent div of .imagem-container*/
display: flex;
padding: 5%;
height: 500px;
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}
The problem in your case is that the shadow is applied to the text as well. You need to create a parent div only for your .imagem-container div, the text can be outside of that scope and the effect doesn't apply to all the content.
This question already has answers here:
Custom CSS Scrollbar for Firefox
(16 answers)
Closed 8 years ago.
I have used ::-webkit-scrollbar to hide scrollbars on an element in Safari/Chrome with the following CSS:
#element::-webkit-scrollbar { width:0 !important; height:0 !important }
Is there any way of accomplishing the same in Firefox?
If you just want to hide scrollbars, better use
overflow: hidden
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
drop shadow only bottom css3
I've been struggling with this for a while and wondered if there is a way to create a box-shadow that has a blur but only appears on one side of an element.
I have setup a JSFiddle, You can see that the blur still shows on the top and bottom of the element? Any ideas?
me again.
I have figured this out. I use the :before CSS selector like so
.element:before
{
content:'';
position:absolute;
left:-5px;
right:100%;
top:0;
bottom:0;
box-shadow: -10px 0 20px #aaa;
}
I have edited my JSFiddle if anyone needs to know how to do this.
I'm not sure it's a perfect solution but you can create a container for your div and hide 3 side by reducing the width of the inner div and playing with the float left or right depending on wich side you want the shaddow. I guest with fixed witdh it will be easier to manage.
Take a look at the example : http://jsfiddle.net/etienne_carre/rhKJF/4/