This article shows how to create vertical text using css and html. Here i given two simple vertical text with box type and without box type. This vertical text uses somewhere in websites. and also this vertical text are two different direction. One was 270 degree rotation and 90 degree rotation.
Code for Vertical text :
<html>
<head>
<title>Vertical text using css</title>
<style>
.vertical-text-type1
{
width:400px;
height:365px;
-webkit-transform:rotate(270deg);
-ms-transform:rotate(270deg);
-o-transform:rotate(270deg);
-moz-transform:rotate(270deg);
margin-bottom: 55px;
}
.vertical-text-type2
{
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
transform-origin: left top 0;
margin-left: 65px;
padding: 10px;
background-color: #000;
font-size: 28px;
color: #FFF;
float:left;
}
</style>
</head>
<body>
<h1 class="vertical-text-type1">This is vertical text type1 </h1>
<div class="vertical-text-type2"> This is vertical text type2</div>
</body>
</html>
<head>
<title>Vertical text using css</title>
<style>
.vertical-text-type1
{
width:400px;
height:365px;
-webkit-transform:rotate(270deg);
-ms-transform:rotate(270deg);
-o-transform:rotate(270deg);
-moz-transform:rotate(270deg);
margin-bottom: 55px;
}
.vertical-text-type2
{
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
-moz-transform:rotate(90deg);
transform-origin: left top 0;
margin-left: 65px;
padding: 10px;
background-color: #000;
font-size: 28px;
color: #FFF;
float:left;
}
</style>
</head>
<body>
<h1 class="vertical-text-type1">This is vertical text type1 </h1>
<div class="vertical-text-type2"> This is vertical text type2</div>
</body>
</html>
0 Comments