Apple Leopard has a very attractive interface. Look closely and you'd find a slight shadow behind the texts on title-bar. This tutorial is aimed at mocking up that effect with CSS.
You may also like:

What the Font

Apple uses Lucida Grande font (among other fonts) for texts in Leopard interface. This font is used in various weights. In case, you don't have it installed on your system, download and install it.

Create the Layout

First, we create a simple html document and put the following code in it.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>apple text effect</title>
<style type='text/css'>
body {
font-size: 14px;
line-height:1.3em;
text-align:center;
}

a, a:visited {
outline:none;
}

.clear {
clear:both;
}

#wrapper {
width:960px;
margin:0 auto;
text-align:left;
}
</style>
</head>
<body>
<div id='wrapper'>

</div>
</body>
</html>
This is pretty simple. In case, you are wondering why I put text-align:center for body and then text-align:left for #wrapper, you can find out why.

Now, within the <div id='wrapper'> we put the following code:
<h1 class="drop-shadow">
 <div class="text">Apple Leopard Text Effect</div>
 <div class="shadow">Apple Leopard Text Effect</div>
</h1>
Here, we created two divs inside <h1> and the two divs contain the same text. The class-names of the divs explains it all — the first div contains the text and the second div will work as the shadow.

The CSS

Now that we have created the skeleton, let's start adding style. Within the <style> tag we add the following lines of CSS.
h1 {
 font-family: "Lucida Grande";
 font-size:1.5em;
 color: #444444;
}

div.text {
 color: #444444;
 display:block;
 height:1px;
 max-height:1px;
 position:relative;
 z-index:5;
 text-transform: uppercase;
}

div.shadow {
 color: #f4f4f4;
 display:block;
 position:relative;
 text-transform: uppercase;
 z-index:1;
}
First, we have styled the <h1> tag with simple properties — a simple color, font-family set to Lucida Grande and increased font-size. Next, we styled two divs. The positions for both the divs are set to relative. This is important. Also notice that the z-index for the first div is higher than the second one. This is because we want the first div to appear over the second one.

Compromising for Internet Explorer

Unfortunately, it looks ugly on Internet Explorer. (I could not find any fix for it. If you have one, please share in the comments.) So, we use some javascript to show this effect only in Firefox.

First, we change the html a little bit. Instead of having two divs inside the <h1> tag, we let go of both of them. That is we should have,
<h1 class='drop-shadow'>Apple Leopard Text Effect</h1>
Now, we add jQuery to our html file.
<script type='text/javascript' src='jquery.js'></script>
Next, we add this javascript snippet within <head> tag.
<script type='text/javascript'>
$(function() {
 if($.browser.mozilla) {
  $("h1.drop-shadow").each(function(){
  var text = $(this).html();
  $(this).html("<div class='text'>"+text+"</div><div class='shadow'>"+text+"</div>");
  });
 }
});
</script>
The snippet first checks whether the browser is firefox or not. (Note that $.browser has been deprecated since jQuery 1.3. Here I am using an earlier version.) If the browser is Firefox, the snippet then parses each <h1> tag with class-name drop-shadow and replaces the text with two divs.


That's all!

Labels: , , ,

blog comments powered by Disqus