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.
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
I am using slick grid. Which applies slick-cell class on each cell in the grid. On one of cell I have added a another div and a class by name red-bg. See the below image for more information.
See the below image for more info on slick-cell class
Problem: slick-cell class is adding padding to the cell. How can I though red-bg class, force to over-write style in slick-cell class. I want to over-write padding class.
padding-top : 3px !important
padding : 0px in red class will overwrites
important overwrite other css
Put simply, you can't. CSS cascades from Parent to Child. You cannot target the parent from the child only the opposite way around or sibling to sibling.
A hack would be to negate the parent's padding on red-bg by putting a minus margin on red-bg. If slick-cell has padding-top: 10px you could theoretically do:
.red-bg {
margin-top: -10px;
}
This becomes slightly more complicated if slick-cell has padding all around
I have an element above a div that is styled to become oval-shaped.
I want to create a shadow on this div as well as the oval shaped element
but I want the shadow on the oval-shaped element to be below the div.
I'm using a box-shadow in the div as well as the oval.
I dunno if there is a code to crop a certain part on the shadow so that I can satisfy the request xD
The layer sequence would be div-shadow, oval-shadow, div, oval.
for reference, you can check the link below.
http://jsfiddle.net/P4NKg/
You could simply use :
position:relative;/* this is what it was meant for on the first place move at screen element */
top:15px;/*to tune with radius value */
EXAMPLE
alternative with visual bug is :
box-shadow : 0px 15px white,/*to tune with radius value */
0px 25px RGB(5, 80, 150);/*add tuning to width expected */
I have a bug in the rendering of border-radius under all major browsers (tested: IE 9, Chrome, Firefox).
What happen is that I have a menu bar with border-radius, and in there some links width a background color. In order to keep the button inside the shape of the menu, I set a overflow hidden on the menu container. Until there all goes well, but then, there's a little white line appearing on the corner edge.
I made a reduced test case here: http://dabblet.com/gist/3828561
Anyone have a solution to overcome this one? Thanks!
A dimensions-dependent solution...but maybe that's OK since it's a menu bar not a content holder? Anyway, you can set border-radius on your inner elements, give the parent a height, and also use that height value for the line-height of the inner elements.
Once you apply the height/line-height, you don't have to use overflow: hidden.
Since your menu bar has a border radius of 3px, apply the same rounding to the appropriate corners of the first menu item like so:
.outer .inner:first-of-type { border-radius: 3px 0 0 3px; }
And make the corresponding corners of the bar even more rounded, to hide them beneath the first menu item:
.outer { border-radius: 10px 3px 3px 10px; }
http://dabblet.com/gist/3828755
My content is wrapped in a div which has an inset box-shadow, to try and give the effect that the content is recessed into the page. The problem I have is that any items of content that come close enough to the edge to overlap the shadow hide the shadow rather than having the shadow overlaid on top of them. http://jsfiddle.net/wheresrhys/Y8tXW/
Is there a way, other than defining shadows on every element, to achieve the desired effect?
You could use something like: http://jsfiddle.net/Y8tXW/5/
That is add an inner box with the style:
.overlay{
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
box-shadow: inset 2px 2px 4px 5px rgba(0,0,0,0.3);
pointer-events: none; /* Makes sure the inner contents can still have mouse interaction*/
}
Assuming you want the other elements being covered by the shadow. For browsers too old to support box-shadow set display:none on the overlay. Alternatively, use the :before pseudo class to only add the overlay when it's needed.
Instead of using a few empty elements to do this (which would prevent interaction with any elements at the edges), I would suggest using CSS3 border-images. If I'm not mistaken, borders will be drawn over the top of content (at least partially), without interfering with interactivity.
Instead of adding position:absolute and disabling the content inside the div and also overlaying the shadow effect over the content, you can simply add padding to your .shadow div so that the content inside doesn't overlay the shadow effect.
Check this out http://jsfiddle.net/Y8tXW/12/
Disclaimer: I have already seen the following questions and their solutions did not apply to me even though they are very similar situations:
Creating a CSS3 box-shadow on all sides but one
How to add drop shadow to the current element in a tab menu?
CSS shadows on 3 sides
Simply put, I am trying to add a -moz-box-shadow of 0 0 10px to the .current_page_item class that is applied to the currently active tab in the tab navigation at the top of my website. The website does not yet include the actual box-shadow or any of these changes, I have only been playing with these modifications in firebug for now before I actually publish them. Naturally this causes the shadow to appear on all sides, and so the bottom edge's shadow overlaps into the .content div which stores all of the blog's actual content, i.e. posts.
Based on what I have seen so far, it seems like I should set the z-index of something, not sure what (I have tried ul.menu) to something lower and the z-index of the .content div to something higher, but this seems to have no effect.
I am just wondering if this is normal behavior and if not, if someone could help me out with this situation.
Thanks, I really appreciate it.
EDIT: I put box-shadow in the post earlier, but I meant the respective specific directives, such as -moz-box-shadow. That was not the problem I was having.
You will need to add overflow:hidden on the ul.menu as honeybuzzer mentions, but since that would also cut-off the top shadow you should add some padding-top to the ul.menu as well..
overflow:hidden on ul.menu seems to get rid of the bottom shadow.
clip-path is now (2020) an excellent solution for hiding specific box-shadow edges if you're wanting the box-shadow to be cut off "clean" like this:
.shadow-element {
width: 100px;
height: 100px;
border: 1px solid #333;
box-shadow: 0 0 15px rgba(0,0,0,0.75);
clip-path: inset(0px -15px 0px 0px);
}
<div class="shadow-element"></div>
Simply apply the following CSS to the element in question:
box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);
Where:
Apx sets the shadow visibility for the top edge
Bpx right
Cpx bottom
Dpx left
Enter a value of 0 for any edges where the shadow should be hidden and a negative value (the same as the box-shadow blur radius - Xpx) to any edges where the shadow should be displayed.
This solution removes the need to apply styling to a parent element, which gives more flexibility.