It's been a while since anything's been posted here, but luckily it's due to being super busy.
Bonsai celebrated its one year anniversary in June. We held a birthday extravaganza with dinner at Maximilien down in Pike Place, then to South Lake Grill for the party. It was a blast and pictures are up on our Facebook page, so check it out here! While you're at it, become a fan if you're not already. One last bit of info, Bonsai made it's first full-time hire so big things are happening here. Stay tuned!
Onto the good stuff. I was doing some research on a little something called "text dropshadow" which, as its name implies, creates a shadow behind the text, giving it a 3D, popping-off-the-page kind of look. Previously, web pages had to implement this by using images. The problem is that images increase load time and we know that site visitors will only wait a few seconds while browing sites, so any way to decrease load time could increase visits. Plus images aren't as SEO-friendly, as say, text. This is where some simple CSS can work wonders to help create the effect we want, but without the problems outlined above -- by using the CSS property "text-shadow." Before we continue, a word of caution. Even though this property was introduced ten years ago, not all browsers support it, and even if they do, it can be rendered differently. Currently, the "text-shadow" property is not supported in any version of IE (surprise surprise...) but is supported in current versions of the other major browsers -- Firefox, Chrome, Safari, and Opera, and maybe even a few others.
This is the basics. Mentioned previously, the syntax for the dropshadow is "text-shadow: [color] [x-offset] [y-offset] [blur]." The "color" value is obviously the color of the shadow and it takes color names as well as hex code as usual in CSS. The next value "x-offset" defines where the shadow is relative to the text -- a positive value will move the shadow to the right, negative to the left -- and takes pixel values. The next value is for the vertical position of the shadow where positive values are below the text, negative are above it, taking pixels as well. The last value is optional and renders a blur radius, which basically shows a blurry shadow. This final value can be in pixels or "em"s.
Here's what a text shadow looks like:
Pretty neat huh? This was done with p.shadow { text-shadow: Blue 3px 1px; }. Simple too. Another cool thing is that you can create a double shadow by adding a comma at the end of the first shadow's set of values and adding another set such as p.shadow {text-shadow: blue 3px 2px, red 2px 4px;}. The output is:
*waits for oohs and ahs* Impressed? No, not really? Tough crowd...
So the property and value above works for every current major browser except for IE. Luckily, there is something we can do to create the effect in Internet Explorer by using filters. Here's how. The declaration is
p.shadow span {
display: block;
width: 100%;
filter: glow(color=#0000ff,strength=3);
}
You'll notice I had to enclose the shadowy text in a span to get the desired effect. Without it, the shadow doesn't render. The pertinent part though is the "filter: glow" where you declare a color and a strength of the shadow. Another option is to used "filter: dropshadow(color='', offX='', offY='')" where color is the color of the shadow offX is the horizontal offset, blah blah blah. You get the idea. Here's it is in IE:
Can you spot the difference? It's pretty subtle, but in Internet Explorer, the "shadow" is actually all around the text, hence the "glow" filter. Until the all browsers support the text-shadow property, this is the best we can do.
One other word of caution, With great power comes great responsibility, i.e. please be selective in how and where you use it. There is a fine line between enhancing user's experience and hindering it. Now go and play around with it.
Check back frequently for updates from the Bonsai team!
Subscribe