
In this tutorial, we are going to see how to display a text in the vertical orientation. We use CSS for displaying a floating text in the vertical direction. In this example, we are having a background image with a transparent vertical tagline to show a text. The floating vertical text will provide a rich and modern look.
The following code shows the HTML and the styles required to display a vertical caption for a background image. Using CSS, we rotate the text with 90-degree angle left to display it in the vertical orientation. And we used a transparent tagline to display the vertical caption for the background.
<style> #vertical-orientation { float: left; transform: rotate(90deg); transform-origin: left top 0; margin-left: 50px; padding: 10px; background-color: rgba(37, 34, 34, 0.3); opacity: 0.9; font-size: 1.8em; color: #FFF; text-transform: uppercase; } #image-golf { background:url("golf.jpg"); width: 600px; height: 350px; } </style> <h1>Demo Display Text in Vertical Direction using CSS</h1> <div class="demo-content"> <div id="image-golf"> <div id="vertical-orientation">Vertical Direction</div></div> </div>