Using Text Shadowing with Code Generating Tools

The text shadow option is an effect for all the text inside of each Simple Text stack. I left this as an open field so that you can easily use any text shadowing effect. I also know that most of our users don’t want to learn text shadowing code and there are tons of text shadow generators available for free use on the internet, which I personally use and recommend for you to use as well (even if you do code).

When you generator your code make sure to only insert pixel sizes and colors, no classes or semicolons (;). The code should resemble something like this:

1
2px 2px 8px #CCCCCC

Using the Snippets

Double clicking the snippet files will install the snippets, which can then be found in the Snippets section in RapidWeaver’s Edit Mode:

RapidWeaver Snippets

The code in these snippets controls the CSS and can be dragged and dropped in the Page Info > Header > CSS section.You then need to create the HTML that will take the CSS styling. These are not in the Snippets and can be easily created by copying and pasting this code:

HTML

1
2
3
<a class="buttonDark" href="http://YourLinkSomewhere.com">Button for Dark Backgrounds</a>
<a class="buttonLight" href="http://YourLinkSomewhere.com">Button for Light Backgrounds</a>
<a class="buttonSimple" href="http://YourLinkSomewhere.com">Button that's just dang Simple</a>

The snippets are not necessary to have in your Snippets section in Edit Mode either (so if you want that section cleaned up you can use the following codes):

CSS

For Button on Dark backgrounds

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.buttonDark {
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     -ms-border-radius: 3px;
     -o-border-radius: 3px;
     border-radius: 3px;
     text-shadow: 0 1px 1px #000;
     width: 80px;
     text-align: center;
     cursor: pointer;
     margin: 20px auto;
     display: block;
     padding: 7px 15px !important;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     text-shadow: 0px 1px 2px rgba(0, 0, 0, .7);
     border: 1px solid rgba(0,0,0,0.5);
     box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -ms-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -o-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     background-image: -moz-linear-gradient(top, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%);
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.05)), color-  stop(100%,rgba(0,0,0,0.05)));
     background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: -o-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: -ms-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -webkit-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
}

For Button on Light backgrounds

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.buttonLight {
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     -ms-border-radius: 3px;
     -o-border-radius: 3px;
     border-radius: 3px;
     text-shadow: 0 1px 1px #FFF;
     width: 80px;
     text-align: center;
     cursor: pointer;
     margin: 20px auto;
     display: block;
     padding: 7px 15px !important;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     text-shadow: 0px 1px 2px rgba(0, 0, 0, .7);
     border: 1px solid rgba(0,0,0,0.5);
     box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -ms-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -o-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     background-image: -moz-linear-gradient(top, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%);
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.05)), color-stop(100%,rgba(0,0,0,0.05)));
     background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: -o-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: -ms-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -webkit-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
}

The Simple Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.buttonSimple {
	text-align: center;
	cursor: pointer;
	background: #349BCE;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border: 3px solid #4CAAD9;
	padding: 7px 15px !important;
	display: block;
	margin: 20px auto;	
	width: 90px;
}
.buttonSimple:hover {
	background: #4CAAD9;
}
.buttonSimple:active {
	background: #349BCE;
	border: 3px solid #349BCE;
}

Changelog

v1.7.8 (February 4, 2014)

  • Added line-height to font sizes to override theme line-heights for responsive fonts

v1.7.7 (January 30, 2014)

  • Fixed minor syntax error

v1.7.6 (October 8, 2013)

  • Grouping changed back to ’1LD Stacks’

v1.7.5 (September 11, 2013)

  • HTML 5 Wrap On/Off Option Added
  • Font Size Inherit On/Off Option Added
  • Responsive Font Size On/Off Option Added
  • Various Customization Section Improvements
  • Cleaned Up Various CSS & JS Code

v1.5.0 (July 1, 2013)

  • SPARKLE ready

v1.4.1 (May 28, 2013)

New Customization Options

  • Links Inherit All – all colors & customization will be inherited from the theme
  • Line Height On/Off
  • Line Height Size (px)
  • Letter Spacing On/Off
  • Letter Spacing Size (px)

The container is now position: relative so that absolutely positioned items can be placed inside (for advanced users).

In addition, the overflow: visible for parent containers was removed as it was breaking functionality when placed in some stacks. This was originally done for the Rotating text option, which will now have to be done manually by adding padding with the built-in Stacks option, which is the better way to do it anyway or rotated text could overlap with other objects and text.