Display Text in Any Direction using CSS

Display Text in Any Direction using CSS

July 14, 2016 No comments Article SEO Website Designing

Hi Friends, Today i will tell you how to display text in any direction using css. When we are designing our website we have to write our text in a horizontal, vertical or some other direction. In the internet lots of codes are available for changing the direction  of the text but they include some javascript and other library which slow down your website.

We tell you about horizontal and vertical orientation. We can use css for displaying your text in any direction. Writing in any direction gives a trending and modern look to your website without any jquery.

How to Display Text in Any Direction using CSS:

You have to open your page write some css and html code to write anything in any direction. You have to follow some steps to display text in any direction. These steps are

Display Text in Any Direction using CSS Live Demo:

See the Live Demo and download the code below:

SEO Website Designing Live Demo      SEO Website Designing Download

Step1: Open your web page in any code editor.

Step2: Paste some code and do some changes to write your text anywhere.

CSS Code: In the below code, i have used some property to rotate your text and change the origin of the text.

#any {float: left;
		font-size: 2em;
		color: #FFF;
		background-color: #ff0000;
		text-transform: uppercase;}
 
		.any1 {transform: rotate(90deg);
		transform-origin: left top;}





For Rotating the text you have to use tranform: rotate(90deg); You can also change the degree for changing the rotating text position.

Syntax of transform rotation:

transfrom: rotate(Your value with deg);

for changing the text origin or axis you have to use transform-origin: left top; You can change the axis for changing your text position:

Syntax of transform origin:

transform-origin: x-axis y-axis z-axis;

HTML Code: In the html you may mention your text and class which have a rotation and changing origin property of the text.

I have created a div with id #any and class .any1 to give and change the position to our text. Inside the div you can write any text as per your website or webpage requirement.

<div id="any" class="any1">SEO Website Designing</div>

Syntax of the above code:

<div id=”Your Id” class=”Your Class“>Your Text</div>

Note: You can write all the css in one class or one id.



Complete Code below:

<html>
<head>
  <title>Display Text in Any Direction using CSS</title>
  <style>
		body {width:70%; margin:5% auto; background:#000;}  
		#any {float: left;
		font-size: 2em;
		color: #FFF;
		background-color: #ff0000;
		text-transform: uppercase;}
		.any1 {transform: rotate(90deg);
		transform-origin: left top;}
		.any2 {transform: rotate(118deg);
		transform-origin: left 26%;}
		.any3 {transform: rotate(-113deg);
		transform-origin: right top;}
		.any4 {transform: rotate(10deg);
		transform-origin: right bottom;}
		.any5 {transform: rotate(337deg);
		transform-origin: 22% 60%;}
</style>
</head>
<body> 
<div id="any" class="any1">SEO Website Designing</div>
<div id="any" class="any2">SEO Website Designing</div>
<div id="any" class="any3">SEO Website Designing</div>
<div id="any" class="any4">SEO Website Designing</div>
<div id="any" class="any5">SEO Website Designing</div>
</body>
</html>

Step3: After pasting the code you can see your webpage.

Now You Know How To Design & Optimize Website

Read About Other Interesting Things below.

  1. HOW TO WRITE CSS CODE FOR SAFARI BROWSER ONLY (NOT CHROME)
  2. ADD GOOGLE CUSTOM SEARCH ENGINE ON YOUR WEBSITE
  3. DISABLE ADDING NOODP META ROBOTS TAG IN YOAST PLUGIN
  4. Basics of Social Media Optimization Services
  5. On Page Search Optimization Services
  6. How to Create a Website from scratch for beginners
  7. How To Write a Blog for Website and Content Marketing
  8. Website Promotion – Need For All Websites
  9. Important Things to Think Before Graphic Designs
  10. Remember Things Before Email Marketing

If You like my blog, kindly Subscribe it.

 

Categories: Website Design

Leave a Reply