StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
5460239
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
19
CommunityOwnedDate
CreationDate
2011-03-28T14:12:03.133
FavoriteCount
0
LastActivityDate
2017-06-08T21:26:00.363
LastEditDate
2017-06-08T21:26:00.363
LastEditorUserId
1047823
OwnerUserId
196921
ParentId
5460129
PostTypeId
2
Score
213
ViewCount
0
LastEditorDisplayName
text
Body
<h2>UPDATE 4</h2> <p>Same like update 3 but with modern css (=less rules) so that no special positioning on the pseudo element is required.</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#box { background-color: #3D6AA2; width: 160px; height: 90px; position: absolute; top: calc(10% - 10px); left: calc(50% - 80px); } .box-shadow:after { content:""; position:absolute; width:100%; bottom:1px; z-index:-1; transform:scale(.9); box-shadow: 0px 0px 8px 2px #000000; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div id="box" class="box-shadow"></div></code></pre> </div> </div> </p> <h2>UPDATE 3</h2> <p>All my previous answers have been using extra markup to get create this effect, which is not necessarily needed. I think this a <strong>much</strong> cleaner solution... the only trick is playing around with the values to get the right positioning of the shadow as well as the right strength/opacity of the shadow. Here's a new fiddle, using <a href="https://developer.mozilla.org/en-US/docs/CSS/Pseudo-elements" rel="noreferrer">pseudo-elements</a>:</p> <p><a href="http://jsfiddle.net/UnsungHero97/ARRRZ/2/" rel="noreferrer">http://jsfiddle.net/UnsungHero97/ARRRZ/2/</a></p> <p><strong>HTML</strong></p> <pre><code><div id="box" class="box-shadow"></div> </code></pre> <p><strong>CSS</strong></p> <pre><code>#box { background-color: #3D6AA2; width: 160px; height: 90px; margin-top: -45px; margin-left: -80px; position: absolute; top: 50%; left: 50%; } .box-shadow:after { content: ""; width: 150px; height: 1px; margin-top: 88px; margin-left: -75px; display: block; position: absolute; left: 50%; z-index: -1; -webkit-box-shadow: 0px 0px 8px 2px #000000; -moz-box-shadow: 0px 0px 8px 2px #000000; box-shadow: 0px 0px 8px 2px #000000; } </code></pre> <h2>UPDATE 2</h2> <p>Apparently, you can do this with just an extra parameter to the box-shadow CSS as everyone else just pointed out. Here's the demo:</p> <p><a href="http://jsfiddle.net/K88H9/821/" rel="noreferrer">http://jsfiddle.net/K88H9/821/</a></p> <p><strong>CSS</strong></p> <pre><code>-webkit-box-shadow: 0 4px 4px -2px #000000; -moz-box-shadow: 0 4px 4px -2px #000000; box-shadow: 0 4px 4px -2px #000000; </code></pre> <p>This would be a better solution. The extra parameter that is added is described as:</p> <blockquote> <p>The fourth length is a spread distance. Positive values cause the shadow shape to expand in all directions by the specified radius. Negative values cause the shadow shape to contract.</p> </blockquote> <h2>UPDATE</h2> <p>Check out the demo at jsFiddle: <a href="http://jsfiddle.net/K88H9/4/" rel="noreferrer">http://jsfiddle.net/K88H9/4/</a></p> <p>What I did was create a "shadow element" that would hide behind the actual element that you would want to have a shadow. I made the width of the "shadow element" to be exactly less wide than the actual element by 2 times the shadow you specify; then I aligned it properly.</p> <p><strong>HTML</strong></p> <pre><code><div id="wrapper"> <div id="element"></div> <div id="shadow"></div> </div> </code></pre> <p><strong>CSS</strong></p> <pre><code>#wrapper { width: 84px; position: relative; } #element { background-color: #3D668F; height: 54px; width: 100%; position: relative; z-index: 10; } #shadow { background-color: #3D668F; height: 8px; width: 80px; margin-left: -40px; position: absolute; bottom: 0px; left: 50%; z-index: 5; -webkit-box-shadow: 0px 2px 4px #000000; -moz-box-shadow: 0px 2px 4px #000000; box-shadow: 0px 2px 4px #000000; } </code></pre> <h2>Original Answer</h2> <p>Yes, you can do this with the same syntax you have provided. The first value controls the horizontal positioning and the second value controls the vertical positioning. So just set the first value to <code>0px</code> and the second to whatever offset you'd like as follows:</p> <pre><code>-webkit-box-shadow: 0px 5px #000000; -moz-box-shadow: 0px 5px #000000; box-shadow: 0px 5px #000000; </code></pre> <p>For more info on box shadows, check out these: </p> <ul> <li><a href="http://www.css3.info/preview/box-shadow/" rel="noreferrer">http://www.css3.info/preview/box-shadow/</a></li> <li><a href="https://developer.mozilla.org/en/css/-moz-box-shadow#Browser_compatibility" rel="noreferrer">https://developer.mozilla.org/en/css/-moz-box-shadow#Browser_compatibility</a></li> <li><a href="http://www.w3.org/TR/css3-background/#the-box-shadow" rel="noreferrer">http://www.w3.org/TR/css3-background/#the-box-shadow</a></li> </ul> <p>I hope this helps.</p>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POdrop shadow only bottom css3
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USChristoph
UserOwnerUserId
1. USHristo
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. POdrop shadow only bottom css3
  singulars
  PostTypePostTypeId
  PTQuestion
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
2. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
3. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.