Using CSS, how can I add a border of 100px to all sides of an image that is made up of the perimeter pixels stretched out and blurred? e.g. the border to the left of the image is just columns 1-3 stretched horizontally and blurred together?
I see other posts explaining how to keep the edges sharp but blur the center.
If you want to blur an image to the edges and if you have one single background-color then you could use the box-shadow with inset to archive your desired behavior:
box-shadow: inset 0px 0px 40px 40px #DBA632;
where #DBA632 is your background-color.
See this snippet:
body {
background: #DBA632;
}
div {
background: url('https://placekitten.com/500/300');
width: 500px;
height: 300px;
margin: 50px;
box-shadow: inset 0px 0px 40px 40px #DBA632; /* change to alter the effect*/
}
<div></div>
Old answer:
Are you looking for something like this?
box-shadow: 0px 0px 40px 40px #000000;
The first two values set the offset of the shadow, the third value is the amount of blur and the last value is the spread of the shadow.
You can play with those values to see how they change the effect: DEMO
box-shadow is what you want. I put some links below that will teach you everything you need to know about it:
http://www.css3.info/preview/box-shadow/
http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
Related
I'm trying to find a way to extend the grey background of the form on this page past the top and bottom of the background image below, so it looks like it sitting above it.
https://www-databeat-net.sandbox.hs-sites.com/-temporary-slug-63cfc60c-4815-4281-a89c-33528a74a424?h...
I have tried changing the overflow visibility of the container to visible, but then the background image doesn't fill the height of the container.
I'm looking for the grey background to extend slightly beyond the top and bottom of the background image behind.
Any ideas on how to do this are appreciated!
Thanks!
You just need to remove the border-top from your .glfoot-footerbackground class. like this:
.glfoot-footerbackground {
background: #282828;
width: 100%;
bottom: 0;
height: auto;
min-width: 20rem;
float: left;
box-shadow: 0px -2px 15px #ababab;
}
There is a way to solve a css border when you use different sizes for left and bottom for example? like that:
I know that's angled but but there is a way to use some kind of clipping or mask or even z index on that ?
my css:
.activity-container{
border-bottom: 1px solid #color-border-light;
border-left: 5px solid #color-green;
position: relative;
}
Thanks
The z-index property does not apply to border values, and all border sides extend into the element that they are applied to. I'd suggest outline if you wanted a border that extends outside the element, but outline can't be applied to individual sides, so it has to be consistent around the element.
All that said, you could use box-shadow to act as a psuedo-border on the left side of your element since it can be applied in a way that either extends outside or inside the element (outside by default):
.bordered {
box-sizing: border-box;
height: 100px;
width: 100px;
border: 1px solid red;
border-left: none;
box-shadow: -5px 0px 0px 0px green;
}
<div class="bordered"></div>
What I'm doing is hiding the left side of the border and replacing it with a box-shadow that extends outside the left of the element. Since the border extends to the inside and box-shadow is extending outward, they meet rather than overlap.
I want an empty container to glow so I use this code:
box-shadow: 0 1px 20px 1px lightcyan;
The problem with this is that only the borders glow and there is a big hole in the center which is not the effect I want. I know I can move the position of the shadow so is not overlapped by the container itself but I don't want that because it would be out of place.
Is there any other alternative to achieve this effect with pure CSS?
Something like this, but without the background:
box-shadow can do it, just crank up the blur and the spread (the 3rd and 4th parameters).
For a circle, add border-radius: 50%; and give a small width and height.
div {
margin: 100px;
width: 1px;
height: 1px;
background-color: lime; /* for the 1px in the center */
border-radius: 50%;
box-shadow: 0 0 50px 70px lime;
}
<div></div>
I want to Create Box shadow as given below.
As per my study of Box shadow. It takes below parameters:
DIV {
box-shadow: <horizontal> <vertical> <blur> <color> [inset]
}
Please, Find the jsfiddle for this.
To create above examples, I need to use box shadow.
For example 1, I used below style:
box-shadow:0px 10px 22px 0px gray;
Here, I am getting lighter shadow on top, left and right side also (which I don't want)
In example 2, I used below style:
box-shadow:10px 10px 22px 0px gray inset;
I don't want inner shading to right and bottom part.
Is it possible to remove unnecessary shading in box-shadow ?
You can have a box shadow just on one side, on two sides, three sides, but in that case you should set the blur value to zero - see demo http://dabblet.com/gist/1579740
However, you can emulate the first kind of shadow by wrapping your div into another outer div of the same width, but slightly bigger height on which you set overflow: hidden;
If you don't need the background of your div to be semitransparent, then you could also emulate the second one using an absolutely positioned pseudo-element in order to obscure the bottom and right shadows.
DEMO http://dabblet.com/gist/3149980
HTML for first shadow:
<div class="outer">
<div class="shadow1"></div>
</div>
CSS for first shadow
div {
width: 100px;
height: 100px;
}
.outer {
padding-bottom: 35px;
overflow: hidden;
}
.shadow1 {
box-shadow: 0px 10px 22px 0px gray;
background: #f0f0f0;
}
HTML for second shadow
<div class="shadow2"></div>
CSS for second shadow
.shadow2 {
box-shadow:10px 10px 22px 0px gray inset;
position: relative;
background: #f0f0f0;
}
.shadow2:before {
top: 22px;
bottom:0;
left:22px;
right:0;
position: absolute;
background: #f0f0f0;
content:'';
}
You can do it with some extra markup (an extra div wrapping the element so that it hides the other shadows you don't want)
Or you could use the shadow spread property (the 4th number in the box-shadow declaration) to shrink the shadow down to hide the side parts of your shadow.
This creates a smaller shadow on the bottom, but it requires no extra HTML.
http://jsfiddle.net/hBMQm/2/
#b {
position:absolute;
width:100px;
height:100px;
top:200px;
left:200px;
background-color:#F0F0F0;
text-align:center;
box-shadow:20px 20px 22px 0px gray inset;
}
Now you have the inner shadow, but not on you right, or bottom as you asked for. Did i misunderstand you?
box-shadow takes one more parameter the spread
using following code i was able to achieve the desired effect
box-shadow: 0px 20px 22px -20px gray inset;
see here http://jsfiddle.net/hBMQm/3/
Is it possible using CSS background-position: to position an image to the far right of an element, but then minus a few pixels so it's not right up against the edge? Without having to add a bit of padding to the actual image itself?
Thanks
Lets say your div is 1000px wide and you want it 5px from the right the code would be
background: url('image.jpg') no-repeat 995px 50%;
Edit:
As pointed out the code above does not accommodate for the size of the image.
Lets say your div is 1000px wide and your image is 100px wide and you want it 5px from the right the code would be
background: url('image.jpg') no-repeat 895px 50%;
Your positioning is Div Size - Image Size - desired spacing from right edge.
There is some hacky way. Just use background position to the far right:
background-position: right center;
and combine it with:
box-sizing: border-box; border-right: 5px solid transparent;
for 5px indentation from the right.