Vertical Text - Create an eye catching vertical text effect.
Example: View Code Demo
<!DOCTYPE html> <html xmlns="" dir="ltr"> <head> <title>HTML5 CSS3 Vertical Text</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--[if lt IE 9]> <script src=""></script> <![endif]--> <style> /* Begin HTML5 CSS3 Vertical Text */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;} #content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px;} .vertical-text { -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); transform:rotate(90deg); -ms-transform-origin:left top 0; -moz-transform-origin:left top 0; -webkit-transform-origin:left top 0; transform-origin:left top 0; background:darkgray; color:#fff; margin-left:40px; padding:10px; border:1px solid #ccc; text-transform:uppercase; border:1px solid #B52C2C; text-transform:1px 1px 0px rgba(0, 0, 0, 0.5); box-shadow:2px -2px 0px rgba(0, 0, 0, 0.1); float:left; } #code {position:absolute;top:470px;} </style> </head> <body> <div id="content"> <h1>CSS3 Vertical Text</h1> <p>Check out the text below! It's totally vertical!</p> <div style="position: relative;"> <div class="vertical-text">Hello Vertical Text!</div> </div> <br /><br /> <div id="code"> [ This code example from <a href="">HTML5 CSS3 Vertical Text Code Snippet</a> page. ] </div> </div> </body> </html>