Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Text & Text Effects >> Vertical Text


Code Snippet </> Info


Snippet Name: Vertical Text

Description: Create an eye catching vertical text effect.
Example: View Code Demo

Note: Change the color values to your preferences.

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-08-26 22:53:03

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <title>HTML5 CSS3 Vertical Text</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> /* Begin HTML5 CSS3 Vertical Text */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;} #content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px;} .vertical-text { -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); transform:rotate(90deg); -ms-transform-origin:left top 0; -moz-transform-origin:left top 0; -webkit-transform-origin:left top 0; transform-origin:left top 0; background:darkgray; color:#fff; margin-left:40px; padding:10px; border:1px solid #ccc; text-transform:uppercase; border:1px solid #B52C2C; text-transform:1px 1px 0px rgba(0, 0, 0, 0.5); box-shadow:2px -2px 0px rgba(0, 0, 0, 0.1); float:left; } #code {position:absolute;top:470px;} </style> </head> <body> <div id="content"> <h1>CSS3 Vertical Text</h1> <p>Check out the text below! It's totally vertical!</p> <div style="position: relative;"> <div class="vertical-text">Hello Vertical Text!</div> </div> <br /><br /> <div id="code"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_171.html">HTML5 CSS3 Vertical Text Code Snippet</a> page. ] </div> </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library