Given an image, is there a way to soften the edges using css? Or through some js library (although css would be preferred)? The idea is that the edges of the image should blur into transparency, so they fit in better with the background.
Example, original image:
Image with softened edges:
There are many similar questions asked on stackoverflow, however none (that I can find) offer an answer to do exactly this. Mostly they're concerned with blurring the whole image, or setting a semi-transparent border on the image, neither being what I'm looking for.
You can try something like this:
JSFiddle Example
HTML :
<div id="image-container"><div>
CSS:
#image-container {
background: url(http://pic2.ooopic.com/11/26/30/31b1OOOPIC48.jpg) left top no-repeat;
box-shadow: 25px 25px 50px 0 white inset, -25px -25px 50px 0 white inset;
width: 300px;
height: 300px;
}
You can try that: fiddle
<div class="shadow">
<img src="http://via.placeholder.com/350x150/" />
</div>
And CSS.
shadow
{
display:block;
position:relative;
}
img {
width: 100%;
height: 100%;
}
.shadow:before
{
display:block;
content:'';
position:absolute;
width:100%;
height:100%;
-moz-box-shadow:inset 0px 0px 6px 6px rgba(255,255,255,1);
-webkit-box-shadow:inset 0px 0px 6px 6px rgba(255,255,255,1);
box-shadow:inset 0px 0px 6px 6px rgba(255,255,255,1);
}
Related
I have an img tag and I want to add another gradient div layer on top of it ( that gradient div will have text).
Something like this :
I already know that I can do this with linear-gradient but I don't want that becuase not all mobile versions supports this feature.
Also - I've already seen that it can be achieved via box-shadow with inset
But it's not the same. I only want top and bottom gradient - without any differences on the edges. ( just like in my first picture here ^)
This is what i've tried : JSBIN
But again , I don't want the edges to be darker. I want only the strip in the red rectangle to be from left to right.And also - symmetric - in the bottom ( same gradient should be at the bottom).
Question
How can I fix my code to achieve straight-equal gradients in top and bottom without using linear-gradient ?
NB
I need to add text on that gradient div ( text is from DB) . So It can not be a pseudo ::before/::after element div.
By using multiple shadows you can target the sides you want.
Here done setting the spread radius (4:th parameter) of the blur to a negative value, keeping it from spreading along the sides, and use the horizontal and vertical offset of the shadow to, in this case, target only the top and bottom.
.innerDiv
{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background :transparent;
opacity:1;
border:solid 1px red;
padding:5px;
z-index:92299;
box-shadow:
inset 0 50px 50px -40px rgba(0,0,0,1),
inset 0 -50px 50px -40px rgba(0,0,0,1);
}
<div style='position:relative;border:solid 1px lightgray;height:400px'>
<div class='innerDiv'>
Some text
</div>
<img src='http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg' height="400px" />
</div>
Based on earlier comments, here is a pseudo element version producing the exact same result, and by using the CSS attr() avoiding the issue of compile time data in the CSS.
I also added a script to show the text can be added dynamically as well.
window.addEventListener('load', function() {
var div = document.querySelector('div');
var text = div.getAttribute('data-text');
div.setAttribute('data-text', text + ', and this were added dynamically using script');
})
div
{
position:relative;
}
div::after
{
content: attr(data-text);
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background :transparent;
opacity:1;
border:solid 1px red;
padding:5px;
z-index:92299;
box-shadow:
inset 0 50px 50px -40px rgba(0,0,0,1),
inset 0 -50px 50px -40px rgba(0,0,0,1);
}
<div style='position:relative;border:solid 1px lightgray;height:400px' data-text="Some text set using an attribute in the markup">
<img src='http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg' height="400px" />
</div>
As I also suggested in comment that if you can achieve this using pseudo elements as ::after and ::before of your img container DOM element.
You can define the pseudo elements and then play with the box-shadow to replicating that gradient effect.
Here I have made some changes in your DOM structure as:
Code Snippet:
.img-container {
position: relative;
}
.img-container img {
max-width: 100%;
}
.img-container::after,
.img-container::before {
content: "";
display: inline-block;
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 50px;
}
.img-container::before {
top: 0;
-webkit-box-shadow: 0px 25px 16px -10px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0px 25px 16px -10px rgba(0, 0, 0, 0.5) inset;
}
.img-container::after {
bottom: 0;
-webkit-box-shadow: 0px -25px 16px -10px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0px -25px 16px -10px rgba(0, 0, 0, 0.5) inset;
}
<div class="img-container">
<img src='http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg' height="400px" />
</div>
(using the answer of #vivekkupadhyay as example) you could just make an overlay div and give this the inset shadow. Then you can add whatever content you want.
.img-container,
.img-overlay {
position: absolute;
top: 0;
left 0;
}
.img-container {
overflow: hidden;
}
.img-container img {
max-width: 100%;
}
.img-overlay {
width: 120%;
height: 100%;
-webkit-box-shadow: inset 0px 0px 25px 5px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 25px 5px rgba(0,0,0,0.75);
margin-left: -25px;
padding: 0px 30px;
color: white;
}
<div class="img-container">
<img src='http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg' height="400px" />
<div class="img-overlay">
some text
</div>
</div>
EDIT: you could also make two seperate overlay div's for top and bottom if you want the to both have content, but this is just a quick example.
I have a background image HERE for a sidebar.
Want to make this background using only CSS, is this possible?
Height of the sidebar, is changing depending on the content <div>
That's why I can't use background image.
one possibility is, you can combine css gradient and box shadow.
the css gradient will give LHS RHS shade and box shadow will give TOP shade.
hence the bottom edge can be kept identical to OP image.
here is DEMO
.shadow_grad
{
height: 200px;
width: 100px;
//shadow
box-shadow: 0 5px 20px 0 rgb(0, 0, 0) inset;
//gradient part included in fiddle, cant paste here as its long
}
You can use box-shadow to get that effect.
background-color:#880600;
-webkit-box-shadow:inset 0px 5px 20px 5px black;
-moz-box-shadow:inset 0px 5px 20px 5px black;
box-shadow:inset 0px 5px 20px 5px black;
http://jsbin.com/bapawoho/1/
Hope this helps :)
I have a div with a vignette effect.
<div id="box" class="glow"></div>
#box
{
padding:10px;
border:solid 1px #ddd;
width:100px;
height:400px;
position:relative;
}
.glow:after
{
-webkit-box-shadow:inset 0px 0px 70px #CE1A1A;
-moz-box-shadow:inset 0px 0px 70px #CE1A1A;
box-shadow:inset 0px 0px 70px #CE1A1A;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: "";
}
Here's the jsfiddle: http://jsfiddle.net/bEFha/
But what I am really after is a glow from the inside out. So red in the center and white in the sides. The effect I'm trying to achieve is as if there is a red light source shining from underneath the div.
I've tried various things but just not able to the vignette effect to spread out from the center.
Any help is appreciated.
UPDATE: If possible I would like to not modify the background property of #box as I need that to be white.
You could use a radial-gradient background.
See: https://developer.mozilla.org/de/docs/Web/CSS/radial-gradient
Here's a very basic example, you could tweak: http://jsfiddle.net/bEFha/5/
background-image: radial-gradient(farthest-corner at center center, #CE1A1A 0%, #ffffff 100%);
I also find this visual editor very helpful http://www.visualcsstools.com/
I'm not quite sure what your after, but by playing around I got this:
box-shadow:inset 0px 3px 20px 10px #FFF;
background-color: #CE1A1A;
Fiddle Here
Try this vintage effect Demo
Just give background color to the box and you will get cool vintage effect.
#box{ background:#FFE4E4; }
UPDATED ANSWER:
Demo
CSS Changes
#box:after{
content:"";
background: #CE1A1A;
opacity:0.5;
}
.glow:after {
-webkit-box-shadow:inset 0px 0px 120px #fff;
-moz-box-shadow:inset 0px 0px 120px #fff;
box-shadow:inset 0px 0px 120px #fff;
}
Your #box is still white but I added #box:after to make it red.
Demo with Image
As the title suggests I'm having an issue with an inset box shadow going underneath my H2 elements background, I need it to be above the element.
http://jsfiddle.net/9QYT4/
I've set the background image up to allow easy editing of the colors depending on pages of the site visited, any help on how to make the shadow appear above the h2 is appreciated, thanks!
Also, would it be possible to do something like this with a png gradient as well? That would be a better solution as I'm trying to only get the shadow on the right (but it's showing on the top and bottom as well)
SASS
#region-postscript-second {
width:300px;
background:#fff;
margin: 20px;
box-shadow: inset -6px 0 10px rgba(0, 0, 0, 0.15);
h2 {
background: url('http://vt.lexcorp.ca/sites/all/themes/vermont/img/middle-heading-bg.png') center center no-repeat #8CCC1B;
font-size:20px;
text-transform:uppercase;
font-weight:normal;
color:#646567;
text-align:center;
}}
View the HTML on the JSfiddle, thanks!
I created pseudo after element that contains your shadow: http://jsfiddle.net/jPUX3/
#region-postscript-second:after{
content: " ";
display: block;
position: absolute;
right: 0;
top: 0;
height: 100%; width: 14px;
box-shadow: inset -14px 0 8px -8px rgba(0, 0, 0, .25);
}
and to #region-postscript-second I added:
position: relative;
Here at the end is something about one side box-shadows - http://css-tricks.com/snippets/css/css-box-shadow/
I'm new to shadow in css can we set shadows for
round image(i mean to a circle image).
if it is possible, please give me a code for this in css.
thanks in advance
This is impossible since CSS does not know the shape of the image contents (e.g. interpret transparency).
You could make a circle with CSS3 and give a shadow, see this jsFiddle.
div {
background: red;
height: 100px;
width: 100px;
border-radius: 50px;
margin: 20px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
}
Yes, just add a border-radius: 50% to your image along with the box shadow property :) works in my img tag.
shadows are independent of shapes in css, you can use the shadow property for circle after creating circle.
You can use the following code for that, it should work fine
.circle{
width:150px;height:150px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 10px -10px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px rgba(0,0,0,0.6);
border-radius:100px;
}
CSS3 box shadows apply shadows to the element, not the content of the element. In other words if you have an image (which is rectangular) but the image itself is of a circle, the shadow will be applied to the rectangular image element, not the actual subject of the image.
UPDATE:
Of course, you can always use the canvas element to play with shadows. Here's a jsFiddle example of both drawing a circle and loading a circle, then applying a shadow effect to both.
There is great tutorial for box-shadowing with examples here
Also, simple css3 for rounding corners in cross browser
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
just adjust the pix to the corner roundness you want, or use ems instead
This thing worked for me. I wanted a rounded shadow around the image 32x32.
<a class="media-links" href="">
<img class="media-imgs" src="">
</a>
CSS is like this.
img.media-imgs
{
-webkit-border-radius: 20px;
}
img.media-imgs:hover
{
-webkit-animation-name: greenPulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-box-shadow: 0 0 18px #91bd09;
}
box-shadow: 0 0 98px 6px rgba(0, 0, 0, 0.2); // this is must but values are just an example, set accordingly.
border-radius: 50%; //this is must.
Apply this CSS to your tag or its class, and you are done.
Easy peasy! Set border-radius: 50%; on your image element.
It rounds your image tag and it's drop-shadow.
CSS does not allow you to add shadows to shapes INSIDE images. CSS has no clue what the image looks like.
There is a property in css3 doing exactly what you whant. But, of course, this is not yet implemented by all browsers (IE...)
Have a look there : http://css-tricks.com/snippets/css/css-box-shadow/
The best and easy way i can get is to put the image in a div and then provide the border radius same as image to that div and apply box-shadow to that div
.topDiv{
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.img{
border-radius:50%;
}
this will do the work.