RainbowText Stack

RainbowText Stack

colorize your text headers with multiple colors or a background image

Use this stack to spice up a header text by using multiple colors (e.g. like a rainbow), a background image, or even a SVG background on the text only. The effect can be applied on the text inside the stack, but when you’re a little familiar with HTML and CSS, you can even use custom selectors to colorize an element outside the stack.

Demos
The stack title above is colorized using the default values of the RainbowText Stack. Here are some more examples of the basic variations:
2 colors, angle 90°
7 colors, angle 135°
background image (tile)
background image (fill)
SVG background pattern

Usage
Choose what text you want to colorize:
all text inside the stack
Optionally you can apply a heading (h1…h6).
custom selector outside the stack
You can use only one custom selector in the stack! When you want to set more than one custom selector, add another copy of this stack and set the next selector. Repeat if necessary.
The settings of this stack are not properly inherited, so include the selector immediately surrounding your target.

See the remark below in the gray box about advanced settings.
Set the text background: a background image (tiled or fill), an SVG background pattern or 2–8 colors.
When using an SVG background pattern, only paste the part between the "double quotes" (starting with data:) in the designated field.
When using colors, the angle can be set.
For the advanced target settings (custom selector outside the stack), you will need to find the right selector. Finding the right selector is not supported.
NB
This stack is meant for styling short pieces of text (like headings).
When the text is spread over more than one line at any screen width, vertical gradients look best when the text is justified.
Depending on the font and/or line height, to upper and lower color may not be visible (completely) when using a horizontal gradient (top to bottom). Using a gradient with two more colors, and setting the first two and the last two to the same color often improves the result. Adjusting the line height may also help; as well as tinkering with the margins and color stops in the advanced fiddling section.
My suggestion is to avoid a horizontal gradient completely.
Only use the options of the stack to style the text within it. Trying to style the text with the general options of the stack, inline elements, or nesting this stack in another stack to style it may or may not work properly — and is not supported.
Avoid using html inside this stack. If you do, use only inline elements, no block-level elements!
The inline elements <del>, <ins>, <s> and <u> do not show in Chrome, Safari and Opera; <mark> will make the text invisible in all browsers.
Underlining, strikethrough and other CSS text-decoration will not show in this stack.
Links inside this stack lose their styling, and are thus difficult to distinguish from the rest of the text. If necessary, use the option exclude links to let links keep their default styling as defined by the theme.

Limitations
When the visitor has JavaScript disabled in his browser, the effect will not show with the option custom selector(s) outside stack selected.
The styling of this stack does not work in any version of Internet Explorer, but you can set a fallback color for in those browsers. If you don’t, the default color will be used.
Not every styling option will work (properly) with some themes.

Support
Please use this form to report all issues, questions and comments.

This stack requires the Stacks plugin by YourHead (version 3).
Do you like this stack? Please consider leaving a review in the RapidWeaver Community’s Addons section [link].
RainbowText HUD (click to enlarge)
© 2012-2017 Marathia Web Design | Contact