Stacks4Stacks

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:

With rounded corners applied:

With the horizontal and vertical shadow length set to 5px (this pushes the shadow in by 5px from the top and left sides):

With the shadow type set to inset, to emulate a Bootstrap well:

Shady with a different shadow colour and longer blur length applied:

 

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.