I am trying to place shadows in one of the div and it's not showing up. Here is one div where I am trying to implement the shadow:
#intro {
padding: 0px;
margin: 0px auto;
width: 100%;
float:inherit;
overflow: hidden;
height: 800px;
position:inherit;
background-color: #00b3e1;;
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
Here is the URL: http://rachelchaikof.com/awareness/
The reason you can't see the shadow is because the next div (#one) is directly below it, and the shadow is rendering beneath #one. Remove the background image from #one and the shadow becomes visible.
Add this to #intro's CSS to make the shadow visible:
position: relative;
z-index: 10;
If you want shadows visible on the other text areas, you'll need to adjust their z-index values as well, with the top element (#intro) having the highest value.
Another scenario which I had today. Box-shadow was not showing up in spite of setting position relative to the div. Apparently there was no content next to this div which had box shadow.
Once the content was added, box-shadow showed up.
Related
I am enclosing the main content of my page into a div which has a top margin of 80px like in the screenshot:
This works, the problem is that there is a leaderboard banner just above it and the div prevents the banner to be clickable just for the area illustrated in green.
The code is nothing special:
#content {
position: relative;
padding: 80px 10px 15px;
min-height: 400px;
}
The problem also occurs if I use margin instead of padding.
How could I maintain the margin/padding and in the same time keep the leaderboard clickable?
try adding this to your css :
#content{
z-index: 1;
}
#yourBanner{
position: relative;
z-index: 2;
}
I have an <img> for which I want to highlight a certain area as shown below:
I'm trying to figure out a way to create the following effect using just CSS and no JS. I was originally thinking of using an inset border-box, but I need to be able to use percentages for both the location (e.g. top left of the highlighted area is 50% in from left and 80% down from right) and size of box and it appears that border-box can only take px values. I could use JS to keep resizing everything if the image size changes, but I don't want to do that.
Any ideas?
You can create one div element with img inside. And then use pseudo-element on div that will have large box-shadow, and you can position pseudo-element using position-absolute
div {
position: relative;
overflow: hidden;
display: inline-block;
}
div:after {
content: '';
position: absolute;
bottom: 5%;
left: 20%;
width: 40%;
height: 50%;
box-shadow: 0px 0px 0px 2000px rgba(0, 0, 0, 0.6);
}
<div><img src="https://s-media-cache-ak0.pinimg.com/736x/ff/00/5e/ff005e0fa600c51c5e36f6059bbe6053.jpg"></div>
Maybe try creating 4 boxes positioned all sides of the image overlapping as much as you need. Set the boxes color to black with a transparency, and adjust the sizes of them how you like. These boxes would sit ontop of the original image.
box-shadow: 0 0 0 10px; puts 5 pixels of all each side.
I have a centered div that spans the height of the view port styled with a box-shadow like this box-shadow: 0 0 10px 0; for the layered illusion, but because the div stops at the top and bottom of the browser, the corners of the shadow show. This is ill desired. I think if I could somehow grow the height (but not the width) of the shadow, I could achieve the exact appearance I have currently, minus the curved corners.
https://jsfiddle.net/nu4j0htf/
Using a pseudo-element, like :before you can create a box shadow of different dimensions that your primary element. However, my implementation causes vertical scrolling that needs to be remedied.
https://jsfiddle.net/nu4j0htf/1/
body {
overflow: hidden; /* added */
}
/* removed box-shadow from .backDrop and added this */
.backDrop:before {
content:'';
box-shadow: 0 0 20px 0 black;
position: absolute;
height: 120vh;
width: 75vw;
}
If you need vertical scrolling on your page, you will need to think of a different solution.
I am working on some kind of drawing app.
There are elements inside a container div, and there is another div on top that should clip all the elements inside if it.
Here is the example: http://jsfiddle.net/n6m4n750/
The red rectangle "#clip must clip all the elements inside #container div, so any elements or part of an element that is outside of the #clip div, will be hidden.
How is it possible to do that?
Any help will be appreciated.
Add the following css to #clip:
box-shadow: 0px 0px 0px 25px white;
Here, the white shadow of the #clip overlaps the contents that need to be clipped which gives a clipping effect.
Here's a DEMO.
Not really posible to really clip it, as far as I know.
If your background is white, you can simulate the idea givind a huge white shadow around it
#clip {
position: absolute;
width: 300px;
height: 300px;
border: solid 2px red;
top: 50px;
left: 50px;
box-shadow: 0px 0px 0px 1000px white;
}
demo
Since you can't modify the html, i dont see a pure css solution. Maybe you could track the clipping with js.
const computeClip=function(target,mask){
let maskRect = mask.getBoundingClientRect();
let targetRect=target.getBoundingClientRect();;
let clip='rect('
+(maskRect.top-targetRect.top)+'px,'
+(maskRect.left+maskRect.width-targetRect.left)+'px,'
+(maskRect.top+maskRect.height-targetRect.top)+'px,'
+(maskRect.left-targetRect.left)+'px)';
target.style.clip=clip;
};
demo
I've been trying to place an image over a div, my div is
.my_box{
position: relative;
left: 200px;
width: 200px;
height: 200px;
background-color: white;
opacity: 0.7;
}
and then my image is
.asvp{
position:relative;
left: 300px;
top: 100px;
}
When I do this is puts the image under the div, what do i do in order to place it over the div? I know to put the image into the div but that will but the opacity onto the image which I dont want.
Try adding z-index:1 to .my_box and z-index: 10 to .asvp. Hard to peg without the HTML code though. If this doesn't work, please create a jsFiddle and I'll sort you out. :)
You should also use margins instead of left and top. For example, on .asvp remove left and top and put margin: 100px 0 0 300px;. As a general rule of thumb, I only use left, right, top, bottom on absolute elements.
why dont you give your image position:absolute; instead... that would automatically put it ontop of it
Instead of repositioning, you can keep the image inside the div without its opacity effecting its contents. If it's a solid semi-transparent background like in your example, you could use rgba value on the div like this:
background-color: rgba(255,255,255,0.7);
This and other options here:
https://stackoverflow.com/a/6780462/2909501