I cannot get box-shadow to create a shadow around the entire perimeter of a div. The following works in FireFox, however not in IE 11.
I have tried the following: Internet Explorer - CSS Shadow All Around
Here is a JSFiddle for the problem.
CSS:
.addAccountPanel
{
width:250px;
height:200px;
margin:auto;
background-color: rgba(0,0,0, .2);
position:relative;
box-shadow: 0px 0px 4px #004C7E;
}
HTML:
<div class="addAccountPanel"> </div>
There is a fourth parameter in the box-shadow that lets you increase the size of the shadow, and makes it more visible
.addAccountPanel
{
width:250px;
height:200px;
margin:auto;
background-color: rgba(0,0,0, .2);
position:relative;
box-shadow: 0px 0px 4px 2px #004C7E;
}
fiddle
Related
How do I apply this soft shadow effect underneath the horizontal purple. rows, I want to use this effect on my website. I used the box-shadow but it didn't work.
I could imitate the effect in your sample image.
Here is what I did.
HTML
<div id="outer">
<div id="inner"></div>
</div>
CSS
#outer{
width:300px;
height:300px;
background:#383142;
}
#inner{
width:300px;
height:100px;
background:#514762;
box-shadow:0 15px 30px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.12);
}
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.
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);
}
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
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.