Please take a look at this simple code:
http://jsfiddle.net/kerp3/
The box has an inner box shadow o all 4 sides. I need the box shadow to only appear on the left and bottom sides.
How to change this code:
box-shadow: inset 0 0 9px 0 #000;
Does this help, this should work cross browser.
.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
Here is the original author :
http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/
.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}
See this page:
http://css-tricks.com/snippets/css/css-box-shadow/
With a small change to the color and the offsets it becomes fairly simple:
div { width: 300px; height: 300px;
box-shadow: inset 5px 5px 5px -3px #666;
}
The jsFiddle of it.
I was going to suggest using negative values like so:
div { width: 300px; height: 300px;
/* Try this. */
box-shadow: inset 4px -4px 7px -4px #000;
}
The first 4px pushes the shadow box to the left by 4px, hiding what you would normally see on the right, if you left it at 0.
The second -4px value pushes the shadow vertically down, again hiding the top shadow.
The higher 7px blur value gives me a more than a I need, but if I add a spread of -4px, that extra blur will be clipped. Leaving only a soft grey shadow edge, instead of the hard black one you'll usually see.
See my example here:
http://jsfiddle.net/khalifah/vVUB5/
You can't apply a shadow only to certain sides of a <div>, but you can adjust the X and Y offsets so that the shadow gets clipped on the sides where you don't want it.
This gave me the effect you're looking for in Safari:
box-shadow: 7px -7px 9px #000 inset;
Related
This question already has answers here:
How to apply box-shadow on all four sides?
(15 answers)
Closed 8 years ago.
I need to know how to put shadow in all four sides of a div. I need a little explanation of:
filter:
progid:DXImageTransform.Microsoft.Shadow
This will give you shadow on all 4 sides:
div.shadow {
-moz-box-shadow: 0px 0px 10px #000;
-webkit-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
JSFiddle
The first two 0px's mean that the shadow won't explicitly protrude either left/right or up/down. The 10px gives it enough blur to protrude out all edges. The #000 is the color of the shadow. You can play around with it to get the look you like.
Use box-shadow
.class-name{
box-shadow: 2px 2px 2px #000;
/* horizontal, vertical, blurr-radius, colour */
}
Box-Shadow
CSS3 box-shadow property has following attributes: (W3Schools)
box-shadow: h-shadow v-shadow blur spread color inset;
The main prefix for shadow to support latest browsers is box-shadow.
There are 2 other prefix available that I recommend to use for older Mozilla and Webkit:
-moz-box-shadow
-webkit-box-shadow
Try it:
img{
-webkit-box-shadow: 0 0 5px 2px #000000;
-moz-box-shadow: 0 0 5px 2px #000000;
box-shadow: 0 0 5px 2px #000000;
}
Working Demo
Reference
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 :)
This question already has an answer here:
Box-Shadow Only on Left and Right
(1 answer)
Closed 8 years ago.
This is css code
.one-edge-shadow {
width:200px;
height:200px;
border-style: solid;
border-width: 1px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
Using this style , as I show in this fiddle example , the shadow is at the bottom of the box .
I want to drop shadow to the left and right side of the box .
Actually , I'm little weak in CSS :)
Thanks !
You have to understand the parameters of box-shadow as well as how the drop shadow works (how the light works).
To do what you wish, you need two different shadows, as one light source cannot possible cast shadows on both sides (it could if it was in front of the box, but than you'd have shadow spreading around the up and down edge as well).
Here's the quick answer:
box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
Updated fiddle
What happens here is that you cast a shadow which is offset 10px both to the right and to the left (first parameter offset-x). This alone would achieve what you wish, however, you'd have a blocky shadow (example).
Since you want things to get a bit blurry, you'd have to add the third parameter (blur-radius). Once you do that, you will see the blur creeping from behind your box above and below: that's because behind your box there effectively is another same-sized box, which is however blurred.
To avoid this, you use the fourth parameter (spread-radius) with a negative value to effectively clip the size of the projected box behind your box, so that the top and bottom shadow will be hidden.
Hi Zey this is the code paste in your css and you will get what you want.
This is CSS
.one-edge-shadow {
width:200px;
height:200px;
border-style: solid;
border-width: 1px;
-webkit-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
-moz-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
}
This is HTML
<div class="one-edge-shadow"></div>
and check it out in fiddle http://jsfiddle.net/MfV2Y/
Try this:
.one-edge-shadow {
width:200px;
height:200px;
border-style: solid;
border-width: 1px;
-webkit-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
-moz-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
}
This is the top of the sketch of my website, I've done this in a HTML editor.
The circle we can see in the image is my logo, it's an image with alpha color background.
Shadows, borders, etc are working perfectly even in IE.
Now I'm trying to do something similar with HTML5 and CSS3 but I'm having lots of problems with image shadows and borders.
box-shadow doesn't work because it's a square image (remember it's a image with alpha color background)
The last thing I've found for image shadow is filter: drop-shadow. In theory it should work on all browsers but it's only working with chrome.
On the other hand, i can't get a border like the one on the picture. As you know, my logo is a image with alpha color background and it always makes a square border.
Can anybody give me some help. I would appreciate it. Thanxs
After using the solution Lloan Alas gave me it's working perfectly but not on mobile phone
I use dolphin browser and this is what i get:
This is my code: css:
#logo {
margin-top: -100px;
height: 188px;
width: 300px;
background-image: url("../imagenes/logo.png");
border: 5px solid white;
border-radius: 50% ;
box-shadow: 0 10px 15px #000;
-moz-box-shadow: 0 10px 15px #000;
-webkit-box-shadow: 0 10px 15px #000;
-ms-box-shadow: 0 10px 15px #000;
-o-box-shadow: 0 10px 15px #000;
-khtml-box-shadow: 0 10px 15px #000;
}html:
<div id="logo"></div>
Here is a live demo - Let me know if it helps! LIVE DEMO JSBIN
Compatible with IE 9-10, Firefox, Safari and Opera. (Supposedly)
I don't get very well what are you looking for, but if you want to add a shadow to that ellipse what you need is box-shadow, as you know
The use is:
box-shadow: horizontal-shadow-position v-shadow-pos blur spread color inset;
where you can ommit a property but you cannot change its order.
So for instance your shadow will be something like
box-shadow: 3px 3px 8px 2px #666;
because it's not inset.
In addition, to be able to use it in more browsers, you will need the browser prefix, such as
box-shadow: 3px 3px 8px 2px #666; /*Firefox (and new versions of Opera)*/
-o-box-shadow: 3px 3px 8px 2px #666; /*Opera*/
-ms-box-shadow: 3px 3px 8px 2px #666; /*Internet Explorer*/
-webkit-box-shadow: 3px 3px 8px 2px #666; /*Webkit: Safari, Chrome, Chromium...*/
Also, remember that the alpha-filter you mentioned is just the equivalent to opacity property for Firefox, Chrome, Opera, ...
I need to create shaded divs like those shown in the image below, using only CSS. Any idea about how to create them using less coding?
Thank you!
Here's a method using CSS's box-shadow, which is compatible in Firefox 3.5+, Safari 3+, Chrome, Opera 10.5+ and IE9+.
http://jsbin.com/usabe4
Multiple box-shadows are being used to get closer to the desired effect than a single box-shadow is capable of:
#box1 {
background: yellow;
-moz-box-shadow: 1px 1px 0 orange, 2px 2px 0 orange, 3px 3px 0 orange;
-webkit-box-shadow: 1px 1px 0 orange, 2px 2px 0 orange, 3px 3px 0 orange;
box-shadow: 1px 1px 0 orange, 2px 2px 0 orange, 3px 3px 0 orange;
}
Did you try using box shadow in css 3:
box-shadow:5px 5px 0 #CCCCCC
For more details check:
http://css-class.com/test/css/shadows/box-shadow-blur-offset-light.htm
Put two div's on top of each other (use z-index) and move the lower one two pixels down/right.
Is a CSS3 box-shadow close enough?
http://jsfiddle.net/4kS4F/
.box {
width: 120px;
height: 60px;
border: 1px solid #000;
background: yellow;
-webkit-box-shadow: 3px 3px 0px #777;
-moz-box-shadow: 3px 3px 0px #777;
box-shadow: 3px 3px 0px #777;
}
It's supported in many browsers: http://caniuse.com/#search=box-shadow
The notable exceptions are IE 7 and 8. If you need it to work there, you could use CSS3 PIE to provide the box-shadow.
If you need only a white background (or any fixed background color) you can make the box an image with the colored part being transparent and the edges being your background color. Then you set that as the background image, while the background color can control the face color of the box.