Vertical Text - Create an eye catching vertical text effect. Example: View Code Demo |
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 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="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
/* Begin HTML5 CSS3 Vertical Text */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The https://snapbuilder.com 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="http://snapbuilder.com/code_snippets/copy_code_snippet_171.html">HTML5 CSS3 Vertical Text Code Snippet</a> page. ]
</div>
</div>
</body>
</html>
|
Scroll