Bagnall Software Consultants Ltd

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 are 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)
   <span class="G1" aria-hidden="true">Sample Gradient Text (h1)</span>
   <span class="G2" aria-hidden="true">Sample Gradient Text (h1)</span>
   <span class="G3" aria-hidden="true">Sample Gradient Text (h1)</span>
   <span class="G4" aria-hidden="true">Sample Gradient Text (h1)</span>
   <span class="G5" aria-hidden="true">Sample Gradient Text (h1)</span>
</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 %>
    <span class="G<%=i%>" aria-hidden="true">"><%=text%></span>
    <%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('<span class="G'.$i.'">'.$text.'</span>');
  }
  print($strClose);
}
//---------------------------------------------------------------------------------------------------
?>

RuneScape Example

Screenshot of RuneScape gradient text

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

Cons