Cross Browser and Search Engine Compatible Gradient Text

While looking to implement a design which was handed to me, I noticed that one of the pieces of text had a gradient and thought it would have to be created as a graphical image and four times over at that in each of the different languages supported by the client.

There were other ways of course to create effects in text such as SIFR and Cufón, but they have their own disadvantages.

Then I struck on an idea for creating the gradient text which is described below. This technique is used throughout the RuneScape website and has led to labour savings with localisation and meets the requirement of the original design. See further down the page for a screenshot.

First, let's see how it looks:

Sample Gradient Text (h1)

This is quite effective in itself, but when combined with text-shadow styles, the possibilities are increased.

How it Works

To create this effect, the tagged text is overlaid with other pieces of text which have been cropped and coloured so that the effect is one of striping. Each layer is shorter than the one underneath and is cropped by setting a height succesively lower than the intended font size and setting overflow hidden. If the number of layers is high enough, even going as far as single pixel resolution, the banding is subtle.

This diagram show how the layers are built up:

Sample Gradient Text Layers

The HTML

<h1 class="Gradient">Sample Gradient Text (h1)
 Sample Gradient Text (h1)
 Sample Gradient Text (h1)
 Sample Gradient Text (h1)
 Sample Gradient Text (h1)
 Sample Gradient Text (h1)
</h1>

Note the aria-hidden="true" which prevents repetition from the spans in screen readers.

The CSS

.Gradient{
    position: relative;
    overflow: hidden;
    height: 28px;
}
.Gradient,
.Gradient .G1,
.Gradient .G2,
.Gradient .G3,
.Gradient .G4,
.Gradient .G5{
    height: 28px;
    position: absolute;
    margin: 0;
    top: 0px;
    left: 0px;
    color: #4a778b;
    font-family: century gothic,helvetica,arial;
    font-size: 23px;
    font-weight: normal;
    overflow: hidden;
}
.Gradient{
    position: relative;
}
.Gradient .G5{
    height: 10px;
    color: #81a4b4;
    z-index: 6;
}
.Gradient .G4{
    height: 13px;
    color: #789eae;
    z-index: 5;
}
.Gradient .G3{
    height: 16px;
    color: #6f96a6;
    z-index: 4;
}
.Gradient .G2{
    height: 19px;
    color: #618a9c;
    z-index: 3;
}
.Gradient .G1{
    height: 22px;
    color: #547f92;
    z-index: 2;
}

ASP & PHP

To simplify the repetition of elements, a procedure can be written in a server side scripting language such as ASP or PHP. This cuts down typographical errors and maintains one piece of code for modification or bug fixing.

In Asp:

<%
'===================================================================================================
sub gradient( strTag, text, id, outerStyles, extraclass)
'===================================================================================================

 ' Set up optional ID
 strID = ""
 If id <> "" then
 strID = " id='" & id & "'"
 end if

 'Set up optional outer styles
 strStyles=""
 if outerStyles <> "" then
 strStyles=" style='" & outerStyles & "'"
 end if

 ' Set up optional outer class
 strClass = ""
 if extraclass <> "" then
 strClass = " " & extraclass
 end if

 ' Set up open and close tags
 strOpen="<"&strTag&" class='Gradient"&strClass&"' "&strStyles&">"
 strClose="</"&strTag&">"
%>
 <%=strOpen><%=text%>
 <% for i = 1 to 5 %>
 " aria-hidden="true">"><%=text%>
 <%next%>
 <%=strClose%>
<%
end sub
'---------------------------------------------------------------------------------------------------
%>

In PHP

<?php //===================================================================================================
function gradient( $strTag, $text, $id, $outerStyles, $extraclass){
//===================================================================================================

 // Set up optional ID
 $strID = '';
 If ($id != ""){
 $strID = " id='" . id . "'";
 }

 // Set up optional outer styles
 $strStyles="";
 if (outerStyles != "")$strStyles=" style='" . outerStyles . "'";

 // Set up optional outer class
 $strClass = "";
 if (extraclass != "")$strClass = " " . extraclass;

 // Set up open and close tags
 $strOpen="<".$strTag." class='Gradient'".strClass."' ".strStyles.">";
 $strClose="</".$strTag.">";

 print($strOpen.$text);
 for ($i=1;$i<=5;$i++){
 print(''.$text.'');
 }
 print($strClose);
}
//---------------------------------------------------------------------------------------------------
?>

RuneScape Example

In this example, you can see that "Clans" the sub-menu items "About Clans", "Top Clans" and "Rankings" and the title "The Clans of RuneScape", all employ this technique.

Pros

Does not require Flash
Does not severely affect page loading time when compared to SIFR
Not affected by ad blockers
Can be localised

Cons

I have some doubts regarding whether or not Google might choose to blacklist sites using such a technique, but I remain hopeful that this may become a common enough technique that it is acceptable to Google algorithms. Perhaps a Google representative might be kind enough to respond to this? So far there has been no adverse effect on the RuneScape website rankings.
When selecting text, one of the uppermost truncated layers is often selected so the highlighted box looks a little strange, but copying to clipboard is still functional.