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.
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
See the Live Demo and download the code below:
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;} |
#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> |
<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> |
<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.
Read About Other Interesting Things below.
If You like my blog, kindly Subscribe it.
Categories: Website Design
Leave a Reply