DOM TEXT SHADOWS (EXPERIMENT) - - - - - - - - - - - - - - -
Everybody loves a neat visual effect. The harder bit is making
it easy to implement.
A few weeks ago I stumbled across this page [1] and it got me
thinking. While I was quietly impressed with the look of the
heading text, the markup is not exactly pretty and there is
really no viable way to roll this effect out across a whole
site.
The Current Markup ---
CASTof
CASTof
CASTof
SHADOWS
SHADOWS
SHADOWS
Certainly not breathtakingly elegant.
Of course, there are a plethora of shadow effects available via
CSS (or CSS-like entities). In fact, Neil Crosby has done a
great job documenting the current state of play [2] on his blog.
The problem is consistency. One of the things I liked about the
'Cast of Shadows' effect was that it rendered in the same way
across all modern browsers.
The following method is a DOM experiment at this stage. Note: It
does have accessibility issues that I haven't been able to squash
(yet, anyway). However, it might at least give you some ideas for
solving other problems in the future.
TEXT SHADOWS USING THE DOM & CSS
My goal here was to try to get the same visual effect without
the nasty markup. I'm going to cheat and show the final result
[3] so you know where we're heading.
http://www.sitepoint.com/examples/textshadows/thumbnail.gif
The core idea is to send a simple H1, and then let the browser
build up the shadow -- if it can. Simple non-JavaScript devices
will leave the header untouched.
Once the structure is in place, we can use CSS to target,
position and color each layer.
The HTML ---
First, let's hone down the HTML. We can't get any more succinct
than:
..The Shadow Knows!!!
The JavaScript ---
I've decided not to get into a blow-by-blow breakdown of the
JavaScript in this newsletter and instead talk in broad terms
about what the script does. If you're interested though, the
source code [4] is very well-commented.
The script will:
1. Create a new function called funkyshadow()
1. Find each instance of a H1 on the page and copy it to our
'working' array for later use.
1. Start a new loop to work through our array of H1s
1. Each time it finds one, it will created two new 'virtual' H1s
(called 'outerh1' and 'middleh1')
1. It will then replace the original H1 with 'outerh1'
1. Next it will nest 'middleh1' inside 'outerh1, and, in turn,
nest our original H1 inside that.
1. Finally the outer H1 needs to be made 'shadow colored' --
it's dark by default.
If everything has gone to plan, the browser should have taken
our plain, old H1, and reconstructed it to appear like this:
http://www.sitepoint.com/examples/textshadows/h1-wrap.gif
Of course, if you wanted to target H2s, H3s or even P tags, you
would only need to make minor changes to this script.
The CSS ---
Now we have the right structure in place, let's have a look at
the CSS. Although we don't have ids or classes to use, we can
still target each H1 separately by using 'descendant selector'
notation. Although all three headings match the simple h1{}rule,
the more precise h1 h1{} and even more precise h1 h1 h1{} will
always overrule the simpler rule in a showdown.
We're going to position the outermost H1 relatively, and then
use 'position:absolute', to allow us to offset the other two
H1s from the outer H1. Here's the code.
h1{
color:#990000;
font:bold 60px/50px Georgia,Sans-Serif;
letter-spacing:1.2px;
position:relative;
padding:0;
margin:0;
width:480px;
}
h1 h1{
position:absolute;
top:-2px;
left:1px;
color: #F1F1D5;
}
h1 h1 h1{
position:absolute;
top:-1px;
left:1px;
color:#990000;
}
So, there you have it [5]. Adjusting the top and left will give
you complete control over the positioning of the shadow. Fonts
and colors choices are no different to standard CSS selection
criteria. I've used three layers here, but there's nothing
stopping you using more or less.
The advantages are mainly consistency and flexibility. Any
device that reads HTML and understands JavaScript will render the
effect. Non-JS devices are never aware it even exists.
The key *disadvantage* is an accessibility issue. Most screen
readers rely on Internet Explorer's rendering engine to
interpret what they will read back to the user. Since IE will
render this effect before Jaws reads it out, we have the problem
of Jaws reading out two extra copies of our heading. I imagine
this could get irritating quite quickly.
Hey, I never said it was perfect ;)
As I said, it's an experiment, but if you have a workaround in
mind, I'd love to hear it.
Meanwhile, Stuart has been taking us on a tour of some of Stu
Nicholls' more mind-boggling CSS experiments. Although there are
some comments on 'inappropriate use of CSS', I believe
'out-there' stuff like this is valuable on two levels.
Firstly, as a teaching aid. Taking a normal behaviour out of its
conventional setting is often a great way of getting a clearer
understanding of exactly how it works.
Secondly, it isn't always possible to see the final commercial
application of a technique until after the pure R&D lab work has
been completed. Often it's a case of "Y'know what that thing you
invented would be great for?!"
You never know when the next failed hearing-aid experiment ends up
giving you the telephone.
Read the blog entry:
Design Blog: Stylish Scripting
by Stuart Langridge
The power of pure CSS [6] (16 comments) [1]
[2]
[3]
[4]
[5]
[6]
Sidan senast uppdaterad av toel
