Big Bad Bob the Fish

A week or so ago I decided it would be a good idea to recreate the Big Bad Bob the Fish logo/text that you can see in the header, using nothing but pure CSS. No secret/hidden PNG images, just the latest advancements in CSS3 technologies. However, it’s not just as simple as applying a ‘text-gradient’ (which doesn’t actually exist), well actually it is in a way. By using a little CSS trickery I was able to recreate the logo; at least in webkit browsers anyway…

View Final Result

The HTML Markup

<h1><a href=”#”>Big Bad Bob the Fish</a></h1>

That’s it for the HTML – really!

The Styles

In total, there were four HTML items that needed to be addressed with CSS:

1. h1 element
2. h1 text-shadow
3. h1 a
4. CSS-generated content that lives in the h1 element.

First thing’s first, style the h1 element:

h1 {
position: relative;
font-family: ChunkFive, arial, sans-serif;
font-size: 72px;
line-height: 66px;
text-transform: uppercase;
font-weight: normal;
}

h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active{
color: rgb(114,115,113);
}

After applying the necessary font styles and text-shadows, I styled the h1 a element with the color I wanted to be at the top of the text gradient.

Now for the cool stuff – applying a mask using the CSS Mask / CSS Gradient properties in webkit browsers…

h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active{
color: rgb(114,115,113);
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

-webkit-mask actually accepts a whole bunch of different things, including images. So we can use a -webkit-gradient value as a mask because it’s technically an image in it’s own right. By using the RGBA property, I was able to fade the top text layer out to transparency.

You’re not actually able to use CSS gradients on your text straight off, so unfortunately the only work around is to use the mask and RGBA properties. So, to fade to the second colour, a second copy of the text is needed to be sitting exactly behind the text that’s fading into transparency. To achieve this, I targeted the :after pseudo-selector.

h1:after{
content: “Big Bad Bob The Fish”;
color: rgb(63,63,63);
}

By all means I could put have placed another copy of the text in the markup and wrapped it in a span, but what’s the point of unnecessarily dirtying up my markup?

Because I’ve already applied the position / top / z-index attributes in the CSS markup, both texts should appear ‘stacked’ and the text gradient will be in full working order.

Now to complete the look, I added the text-shadows to the h1 element

h1 {
position: relative;
font-family: ChunkFive, arial, sans-serif;
font-size: 72px;
line-height: 66px;
text-transform: uppercase;
font-weight: normal;
text-shadow: 0 2px 2px rgb(255,255,255), 0 4px 8px rgba(0,0,0,.4);
}

There we have it, voila! Click the button below to see the final result. As you can tell, this isn’t necessarily a tutorial, but more of a guide.

View Final Result