Shadow effects in web design are everywhere and the CSS3 box-shadow property is now widely supported with all major web browsers and devices. However the CSS markup for applying shadow effects remains quite cryptic and complicated for web designers not well-versed with CSS markup. The Shady stack is an excellent stack for getting the job done! Shady is fast, simple and adds very little code weight to your completed pages (this stack is pure HTML and CSS, no Javascript or PHP). If you are using one of our excellent theme designs from ThemeFlood, then this is very much a stack you can benefit from using.

CSS box shadows (the type we use in Shady) enjoy excellent browser support. All web browsers equal to or greater than Internet Explorer 9, Chrome 4, Firefox 4, Safari 3.1, Opera 10.5, Android 2.1 and iOS 3.2 are capable of rendering CSS3 box shadows. That covers just about every single web browser and device that might be landing upon your website. CSS box shadows are very flexible and avoid the need to add shadow graphics to your webpages (which would otherwise slow-down page loading).

Note Shady requires a minimum of RapidWeaver 6 and Stacks 3. This stack will not install or work in older setups.

Examples

Here are some examples of the Shady stack in use, starting with a Shady stack with the default settings applied:
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
With rounded corners applied:
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
With the horizontal and vertical shadow length set to 5px (this pushes the shadow in by 5px from the top and left sides):
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
With the shadow type set to inset, to emulate a Bootstrap well:
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Shady with a different shadow colour and longer blur length applied:
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
 

Setup

Follow these instructions for getting Shady setup in a project:
  1. Once installed into RapidWeaver, open your Stacks Library and drag and drop a copy of Shady into your webpage
  2. Drag and drop additional content into the Shady stack, where denoted 'drop stacks here'
  3. In the Shady settings, adjust parameters of your shadow effect; like the shadow type, length, style and colour
  4. Preview your webpage to see the result. Publish your webpage when done.

The border radius setting can be used to apply rounded corners to the shadow. The spacing setting is used to push your Shady content away from the extreme edge of the shadow effect and should be adjusted accordingly (based on your shadow dimensions) to suit. Use the padding and margin settings (on the stacks you drag and drop into Shady) to further adjust spacing around your content. Additional custom CSS code can be applied via the .shadyStack class.

You can drag and drop different content types into Shady, including styled text, HTML code, markdown, images and most other stack types. An unlimited number of Shady stacks can be safely used on the same webpage. When the webpage is printed or saved as a PDF, the shadow effects are automatically removed to conserve paper and ink.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.