TECHNICAL xhtml, css, textpattern and coding articles
CSS Text Fx
(This article was originally at 4-ever.org)
The "wicked worn" look is very popular and to my eyes usually looks best with some diagonals or slants in there, for example as at Decibel Magazine and Covina Vineyard (yes, that's a wicked church site, would you believe it!) Of course it can look good without slants, for example Eightface and Matt Brett, but I thought it might be cool if more plain text was slanted. All the heading text, body text, sidebar lists and other text elements I see on the web are horizontal apart from some headings which use image replacement. I do not want to add to the already high bandwidth, so how to add slanting text without using images?
Well, I haven't been able to produce any truly slanted text. But in trying I came across some interesting effects and pseudo-slants that I would like to share with you. The following examples are done simply by manipulation of html and css. View the source of each to see how it is done. Please let me know if they don't work in your browser.
Overlay
The first set of examples are not slanted but are mostly of the wicked variety. Get them by simply overlaying one identical text on top of another and adjusting some of the properties.
- The basic overlay is simply one div positioned 1px differently from the other div. Position: relative is used on the containing div, so that position: absolute can be used on the specific divs. This is the general method for all the following examples.
- The basic overlay with colour difference shows a little more potential.
- The basic overlay with 2px positioning gets blurry, but the heading is interesting.
- The basic overlay with positioning adjusted is simple and practical.
- Some headings. I tried laying Verdana over Times, Arial on top of Georgia, Georgia on the Veranda and other combinations of web-safe fonts but what works quite well in one browser breaks in another. Using the same font with different properties can work, however, and might be useful in a variety of contexts. Note positioning, letter-spacing and font-sizes.
Overflow
To get the slanted look I have overlaid text and used the overflow:hidden property along with positioning.
- The basic overflow method is simple but not very inspiring. Check the source.
- The basic overflow with gap uses positioning and a border-right.
- 3-column overflow with gaps is starting to get there. It works best at narrower widths.
- 4-column overflow without gaps is like many a column in an evening newspaper, as does this 4-column overflow with gaps.
Using the method with lists works well. By adding a class to the lines, it is easy to slant the sides and zebra-fy them.
- Basic 2-column list shows the potential.
- 3-column list slants nicely.
- 3-column list with varying slants is achieved by a nested ul.
- Another 3-column list with varying slants but this time using spans.
- Left-aligned list compared with Right-aligned list. Text-align:right works fine with good browsers but the one that gets far too much publicity forces us to change column widths, z-indexes, margin-lefts and line widths. If you want an easy life it may be best to stick to the left-aligned list with zebra blocks.
- Full Page Example to show the text effects in some kind of context. Are you thinking that I went to a lot of trouble to produce a very scruffy page? Perhaps you have a point ;-)
Why Bother?
Please read my article about The Exclusive Internet. You could just make an image of the perfect slanting text. A lot of people already do that. But too many graphics can make a web site inaccessible because they increase bandwidth, slow down page loads and are often meaningless to screenreaders. Plain text is fast and accessible. Perhaps I should have spent longer on the examples but hopefully you can see the potential for the occasional text fx using CSS. The slant effect can, of course, be enhanced with a small repeating background image, resizable underlines or the fruits of your imagination. Enjoy!
And Finally...
The method produces a lot of duplications. There may be other reasons as well to duplicate text, images or web page things. Wouldn't it be great if you could put something like this in your CSS?
.r1, .r2, .r3 {render: multiple; }
Then assign all three classes to one paragraph, list or whatever. Then apply CSS to the 3 classes to position or colour them etc, with the end result being 3 different renderings of the same single passage of text (or graphic, logo, Textpattern-produced list etc)
Previous Comments
This article was previously at 4-ever.org. These comments were made there.
Freddy commented
Well, it's certainly an original idea, I can't comment on that.
As this is the first CSS + HTML based try, it's not really fair to be nasty about it. Nevertheless, I would just like to comment on the following: selecting text. Because running around naked with a load of pickled onions will actually produce more 'text selecting' results, than moving the mouse over the text you wish to select. Carefully selecting the text, every four letters. And then after five weeks copying and pasting it.
Other than that, quite a good idea!
Peter commented
Thanks for pointing that out, Freddy. But if you drag your mouse down the left of any text, it will select the hidden part as well. Not quite the expected behaviour, of course, but more productive than naked pickle running, although not nearly as much fun!
Jesse Gardner commented
And another 'offense:none;' comment here you're talking about saving bandwidth, when some of your layouts have the same text being duplicated three times. Overkill?
Mike Palmer commented
It's an interesting thought, but I don't see this having much practical value at this point in time because you have to manipulate markup and duplicate content. Also, making text selection confusing is a downer as well. Perhaps in the next set of CSS recommendations?
Peter commented
Jesse and Mike, you are both right of course, and the technique is far from perfect. But it might be useful occasionally?
Copy and paste makes duplication easy. But the smoother the slant the more duplicates are needed, so that is a fundamental problem. That's why I suggested a new CSS rule such as render:multiple. I guess I will have to follow that up seriously through the W3C?
The real solution to prevent text selection oddities and duplication is, of course, for browsers to be able to respond to something like angle:30 but that probably needs a new technology. Meantime, I think there might be some use for shadowy headers, tilted lists and slanty column text.
Peter commented
Regarding text selection, I just noticed this article at CSS Beauty's new SkillShare Forum and realised that I had the same problem with IE6. So I followed Alex's link to a solution, and implemented it on the examples. So now text selection should be better for IE. Please let me know if it is not.
kemie commented
An interesting effect, however, using markup to achieve graphical effects goes against the whole point of using css to separate style from structure, and wouls probably make for a very confusing read for screenreaders, google and other non-visual browsers.
Peter commented
I thought of this and already put 'skip duplicates' links in the full page example. But you are right, Kemie, and duplication goes against the grain.
Over at W3C there's text shadow and string set in the pipeline. These are a step towards solving those problems.
sbt commented
the duplicate bandwidth problem. i had a position fixed top menu, which needed a filler background at the top. i didn't have much text, because the top menu never became a menu; it was just a title.
to avoid headaches of duplication, i investigated the content: css thing. content: isn't capable of much. (also in some ways content: is similar to frames, because page content becomes scattered in files other than the html page.)
Seeing this and one other 4-ever.org CSS-topic page, you seem to have a mind for trying creative solutions.