Can CSS3 box-shadow:inset do only one or two sides? like border-top?
This is what worked for me:
box-shadow: inset 1px 4px 9px -6px;
Example: http://jsfiddle.net/23Egu/
How to get box-shadow on left & right sides only
NOTE: I suggest checking out @Hamish's answer below; it doesn't involve the imperfect "masking" in the solution described here.
You can get close with multiple box-shadows; one for each side
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
http://jsfiddle.net/YJDdp/
Edit
Add 2 more box-shadows for the top and bottom up front to mask out the that bleeds through.
box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);
http://jsfiddle.net/LE6Lz/
How can I add a box-shadow on one side of an element?
Yes, you can use the shadow spread property of the box-shadow rule:
.myDiv{ border: 1px solid #333; width: 100px; height: 100px; box-shadow: 10px 0 5px -2px #888;}
<div class="myDiv"></div>
CSS Box Shadow - Top and Bottom Only
As Kristian has pointed out, good control over z-values will often solve your problems.
If that does not work you can take a look at CSS Box Shadow Bottom Only on using overflow hidden to hide excess shadow.
I would also have in mind that the box-shadow property can accept a comma-separated list of shadows like this:
box-shadow: 0px 10px 5px #888, 0px -10px 5px #888;
This will give you some control over the "amount" of shadow in each direction.
Have a look at http://www.css3.info/preview/box-shadow/ for more information about box-shadow.
Hope this was what you were looking for!
apply drop shadow to border-top only?
Something like this?
div { border: 1px solid #202020; margin-top: 25px; margin-left: 25px; width: 158px; height: 158px; padding-top: 25px; -webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75); box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);}
<div></div>
CSS3 Box Shadow on Top, Left, and Right Only
It's better if you just cover the bottom part with another div and you will get consistent drop shadow across the board.
#servicesContainer {
/*your css*/
position: relative;
}
and it's fixed! like magic!
How to apply box-shadow on all four sides?
It's because of x and y offset. Try this:
-webkit-box-shadow: 0 0 10px #fff;
box-shadow: 0 0 10px #fff;
edit (year later..): Made the answer more cross-browser, as requested in comments :)
btw: there are many css3 generator nowadays..
css3.me, css3maker, css3generator etc...
Creating a CSS3 box-shadow on all sides but one
In your sample create a div inside #content with this style
#content_over_shadow {
padding: 1em;
position: relative; /* look at this */
background:#fff; /* a solid background (non transparent) */
}
and change #content style (remove paddings) and add shadow
#content {
font-size: 1.8em;
box-shadow: 0 0 8px 2px #888; /* line shadow */
}
add shadows to tabs:
#nav li a {
margin-left: 20px;
padding: .7em .5em .5em .5em;
font-size: 1.3em;
color: #FFF;
display: inline-block;
text-transform: uppercase;
position: relative;
box-shadow: 0 0 8px 2px #888; /* the shadow */
}
Related Topics
Fixed Width Buttons with Bootstrap
Full Width Layout with Twitter Bootstrap
Using CSS How to Change Only The 2Nd Column of a Table
CSS: Creating Textured Backgrounds
Overlap Notification Badge on Glyph in Bootstrap 3
CSS: Lighten an Element on Hover
Statically Rotate Font-Awesome Icons
Can CSS3 Box-Shadow:Inset Do Only One or Two Sides? Like Border-Top
Position Fixed Not Working for Header
CSS: Position Loading Indicator in The Center of The Screen
How to Properly Set an Element's Scope Using Bem
Free Tools to Speed Up Web Development
Change Icon from Jquery UI to Fontawesome in Primefaces