How to display a text in vertical direction using HTML CSS

As of now we have worked on horizontal text view, i.e a text are written from left to right direction, but what about top to bottom approach? i.e in vertical direction on web page. So in this post we are going to see that how to display a text in vertical direction using HTML CSS. In old days (in internet explorer era) this was a losing battle, but now days writing a vertical text become very simple and easily achievable using HTML CSS. Here’s how to do this!

Displaying vertical text using CSS

For example.

<div class="demo-content">
	<div id="image-golf">
	<div id="vertical-orientation">Vertical Direction</div></div>
</div>

Apply CSS to make it vertical

#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;
	}

 

That’s it,