shadows - FORUM - Ning Creators Social Network2024-03-28T13:15:37Zhttps://creators.ning.com/forum/topics/feed/tag/shadowsTIP: Getting to Know Box Shadow CSShttps://creators.ning.com/forum/topics/tip-getting-to-know-box-shadow-css2013-08-14T18:14:51.000Z2013-08-14T18:14:51.000Z⚡JFarrow⌁https://creators.ning.com/members/JFarrow<div><p>Over the past couple of weeks, I've had several other NCs ask me about CSS3 Box shadows, so i figured I'd give you all a few pointers I've learned over the past couple of years.</p>
<p><span class="font-size-3"><strong>Understanding Values</strong></span></p>
<p>Take a look at this example:</p>
<pre class="prettyprint" style="border: 0px; font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 13px; font-style: normal; font-weight: normal; margin: 0px 0px 1.625em; outline: 0px; padding: 0.75em 1.625em; vertical-align: baseline; background-color: #222222; color: #f1f2f3; font-variant: normal; line-height: 1.5; overflow: auto; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; -webkit-box-shadow: rgba(0, 0, 0, 0.901961) 0px 1px 3px inset, #ffffff 0px 2px 0px; box-shadow: rgba(0, 0, 0, 0.901961) 0px 1px 3px inset, #ffffff 0px 2px 0px; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-xg-p: initial initial; background-repeat: initial initial;">
box-shadow: 3px 3px 10px 5px #000;
</pre>
<p> <a target="_self" href="http://storage.ning.com/topology/rest/1.0/file/get/555950?profile=original"><img class="align-full" src="http://storage.ning.com/topology/rest/1.0/file/get/555950?profile=original" width="600"></a></p>
<ul>
<li>A positive value for the horizontal offset draws a shadow that is offset to the right of the box, a negative length to the left.</li>
<li>The second length is the vertical offset. A positive value for the vertical offset basically offsets the shadow down, a negative one up.</li>
<li>You’re not allowed to use negative values for blur radius. The larger<br> the value, the more the shadow’s edge is blurred, as it can be seen above.</li>
<li>Spread distance positive values cause the shadow shape to expand in all directions by the specified radius.</li>
<li>Negative ones cause the shadow shape to contract.</li>
<li>The color is the color of the shadow.</li>
<li>The inset keyword (missing above), if present,changes the drop shadow from an outer shadow to an inner shadow</li>
</ul>
<p>There are tons of <a rel="nofollow" href="https://www.google.com/search?q=box+shadow+generator&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a" target="_blank">Box Shadow Generators</a> out there to help you with getting your box shadow just right, but i thought it might be helpful to understand the values being used.</p></div>