Vertical Text with CSS

2 Nov

This creates a quite interesting effect of vertical text, in this example used with a link.

Unfortunately this is IE only, so use with caution. If your audience consists of IE only (or if you don’t give a damn about other browsers, I know you guys are out there) then go ahead.

Hopefully, alot of improvements to vertical text standards wise will come with CSS3.

Example:

Email me

CSS:

<style>
<!--
#verticaltext {
writing-mode: tb-rl;
filter: flipv fliph;
font-family: verdana, arial, helvetica, sans-serif;
}
-->
</style>

HTML:


<div id="verticaltext">
<a href="mailto:email@domain.com">Email me</a>
</div>

No comments yet

Leave a Reply