I've been trying to do an inset blur on an image, from what I was reading there are two ways that are common to do this. I've tried both ways.
What I have now, is I wrapped the image in a div, and was attempting to use z-index to place the div with the blur above the image, however, I am not seeing the div at all.
#mainpicdiv {
box-shadow: inset 0px 0px 30px rgba(255,0,0,0.9);
width: 100%;
margin-top: 3%;
position: relative;
z-index: 1;
}
#mainpic {
width: 100%;
margin-top: 3%;
margin: 0 auto;
padding: 0%;
position: relative;
z-index: -2;
}
You can do this with a full height and width psuedo-element added to the div that wraps the image. img tags do not support box shadows
#mainpicdiv {
position: relative;
}
#mainpicdiv:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: inset 0px 0px 30px rgba(255,0,0,0.9);
}
#mainpicdiv > img {
width: 100%;
display: block;
}
Working example: https://jsfiddle.net/hz70mc13/1/
Related
I was wondering how to create a border that doesnt add to the outside of a div but works it's way inside
#MenuBox {
position: absolute;
top: 10%;
left: 2.5%;
width: 95%;
height: 80%;
background-color: #5a5b54;
z-index: 1;
margin: -10px;
border: 10px solid black;
}
tried using a margin although it didn't work
As per my comment, there are two solutions to your problem:
Solution 1: Use border-box
box-sizing: border-box will force the element's width and height computation to take into account border widths.
body {
padding: 0;
margin: 0;
}
#MenuBox {
position: absolute;
top: 10%;
left: 2.5%;
width: 95%;
height: 80%;
background-color: #5a5b54;
z-index: 1;
border: solid 10px black;
/* Calculate border as part of width and height */
box-sizing: border-box;
}
<div id="MenuBox">
#MenuBox
</div>
Solution 2: Use box-shadow as a border replacement
Using an inset box-shadow with a spread of 10px will mimic the effect of having a border, but this time it being within the bounds of the element. This effect is useful if you want to have multiple borders, but otherwise stick to solution #1.
body {
padding: 0;
margin: 0;
}
#MenuBox {
position: absolute;
top: 10%;
left: 2.5%;
width: 95%;
height: 80%;
background-color: #5a5b54;
z-index: 1;
/* Use box-shadow */
box-shadow: inset 0 0 0 10px black;
/* Use padding to offset content */
padding: 10px;
box-sizing: border-box;
}
<div id="MenuBox">
#MenuBox
</div>
I have a div that I'm using as a topbar with the code below:
#topbar {
height: 40px;
width: 100%;
background-color: #336680;
box-shadow: 0.1em 0.1em 0.1em;
position: absolute;
top: 0;
padding: 0;
}
I'm trying to make it go across the whole screen but for some reason it's off center and doesnt cover the left portion of the screen. How do I fix this?
Just add left:0. So...
#topbar {
height: 40px;
width: 100%;
background-color: #336680;
box-shadow: 0.1em 0.1em 0.1em;
position: absolute;
top: 0;
padding: 0;
left:0;
}
I need to get a speech bubble that looks something like this via CSS:
I do not need to set default height for a box. It must have dynamic height. And if the height is increased, the left arrow must be in the center.
I looked through some examples, but I don't know how to change the height! Here is the code I have:
<style>
.bubble
{
position: relative;
width: 250px;
height: 120px;
padding: 0px;
background: gray;
margin-left:50px;
}
.bubble:after
{
content: "";
position: absolute;
top: 45px;
left: -15px;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent gray;
display: block;
width: 0;
z-index: 1;
}
</style>
<div class="bubble"></div>
Here is JSBin
Make
top: 40%;
bottom: 50%;
in your .bubble:after in CSS script
You have to check it by changing the .bubble height
OK so I have positioned images with borders, working fine in ie9 yet in ie8 for some reason the images are slightly padded right+bottom by a few pixels. I've searched for answers for a while now with no results. (If I take away positioning there's no padding)
Here is the img code and a img with class .image
img {
border: solid 8px white;
display: block;
}
.image {
position: absolute;
top: 580px;
left: 450px;
}
Any suggestions?
Are you using a CSS reset? have you tried zeroing out margins & padding to solve this problem:
img {
border: solid 8px white;
display: block;
margin: 0;
padding: 0;
}
.image {
position: absolute;
top: 580px;
left: 450px;
margin: 0;
padding: 0;
}
Here's my fiddle.
Basically I have a parent div that needs to have a box shadow around it and for various reasons this box shadow has to be a pseudoelement. This box shadow prevents the capture of hover events on the children of this parent div. How can I fix this?
.box {
float: left;
width: 200px;
height: 200px;
color: #fff;
background-color: lightblue;
position: relative;
}
.big-box {
float: left;
position: relative;
}
.big-box:after {
content: "";
box-shadow: inset 0px 0px 10px 0px #000;
position: absolute;
left: 0px;
top: 0px;
z-index: 5;
width: 100%;
height: 100%;
}
.box:hover {
background-color: green;
}
.big-box:after{
pointer-events: none;
}
https://jsfiddle.net/tm9pzudy/1/