Friends you have most of show text in Horizontal direction and display text in this direction is very easy but if you want to displaying text in vertical direction, then at that time it is not simple to displaying text in vertical direction using css. Displaying text in vertical direction will the visibility of you web page and user can find something new from your website. For describing this things I have place one image to background of web page and on that image I will displaying text in vertical direction using CSS. For displaying text in vertical direction I will use css transform property. This property will transform the text to 2D and 3D transformation. I have using CSS property which rotate the tag line text with ninety degree angle left to display it in vertical direction. And we used a transparent tagline to display the vertical caption for the background. If you want to get information in detail for how can we display text in vertical direction on web pageby using css, so watch web development video tutorial which I attach with this post.
Source Code
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Displaying text in Vertical Direction by using CSS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<style>
#back_image
{
background:url("beach.jpg");
width:1170px;
height:657px;
}
#vertical-text
{
float:left;
transform:rotate(90deg);
transform-origin:left top 0;
margin-left:80px;
padding:10px;
background-color:rgba(37, 34, 34, 0.3);
font-size:36px;
text-transform:uppercase;
color:#fff;
}
</style>
<body>
<br /><br />
<div class="container">
<h1>Displaying text in Vertical Direction by using CSS</h1><br />
<div id="back_image">
<div id="vertical-text">Natural Beach</div>
</div>
</div>
</body>
</html>
0 comments:
Post a Comment