SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
I love the look of checkered text, and I'm using it on my website (see travisemergency.com), but right now my XHTML to get this effect is huge.
This is what the code looks like for the big text at the top of that page:
<span class="c"></span><span class="b">u</span><span class="c">l</span><span class="b">i</span><span class="c">a</span><span class="b">n</span><span class="c"> </span><span class="b">b</span><span class="c">e</span><span class="b">n</span><span class="c">n</span><span class="b">e</span><span class="c">t</span><span class="b">t</span><span class="c"> </span><span class="b">h</span><span class="c">o</span><span class="b">l</span><span class="c">m</span><span class="b">e</span><span class="c">s</span>
(I'm pretty much just putting each letter in its own <span> with alternating classes "b" and "c")
and then I've got a bit of CSS to actually implement the effect:
.c { background-color: #FFFFFF; color: #000000; } .b { background-color: #000000; color: #FFFFFF; }But that's a rediculous amount of code for such a simple effect.
I'm just wondering if there's a better way to do this.
Can't I get rid of all those <span>s?
-
Well you could easily cut it in half by only putting each second letter in spans and changing their look, the others using a default. No need to wrap every letter.
-
That's true, and it's a great first step.
Thanks. -
It's done, and the code is a bit prettier now, but there must be a better way, a way with few spans, or none.
-
Next step:
Change all the spans to <em>letter</em> no class.
Style the em like:
#name em { background-color: #000; color: #fff; } -
-
CommentAuthorbenjitastic
- CommentTimeMar 29th 2006
You could cut it down even further by removing the classes altogether (I think this is what Kanashii was suggesting):
CSS:
#name h1 {
color: white;
}
#name h1 span {
color: black;
background-color: white;
}
HTML:
<div id="name">
<h1>
<span>j</span>u<span>l</span>i<span>a</span>n<span></span>b<span>e</span>n<span>n</span>e<span>t</span>t<span> </span>h<span>o</span>l<span>m</span>e<span>s</span></h1>
</div> -
-
Yeah basically the same, but em is less letters. And on second thoughts use <b>l</b> even less letters :D
P.S. You might need to cancel out the default styling. i.e.
font-weight: normal; -
You could also write some javascript to target a specific element and explode the content of it to individual letters then dynamically write them into individual tags of whatever you want (em's, span's, etc.).
-
Ah yeah, I like the idea of using <b>.
Excellent! It works perfectly.
Nah, I don't want to do javascript, it would lock a lot of users out of seeing the checkered effect.
OK, next step: can we get it so that a Hover over anywhere in that "name" <span> would reverse the entire checkered effect?
I can get it so that a hover over one of the letters reverses the colors for that letter only, but how about for the whole thing? I'm stuck. -
div#name:hover { /* swap the background color here */ }
div#name:hover span { /* etc. */ }
you will need to use JS to do that in IE though. -
Or you might be able to get away with wrapping it all in an <a></a> and use the hover psuedo on the a. i.e.
div#name a:hover {}
div#name a:hover span {}
For IE that is. -
And here's one I prepared earlier :P
Example of checkered Text
Valid and works in Mozilla/Win, Opera/Win, IE6/Win, IE7/Win : )
Enjoy.
1 to 12 of 12