How to make vertically rotated links in HTML?
Here is my solution. I have updated your HTML and CSS to allow for this. Here is a live example: http://jsfiddle.net/8RTaV/4/
HTML:
<div id='left_column_date_search'>
<a href='#' class='a1'>Dnes</a>
<a href='#' class='a2 selected'>Zítra</a>
<a href='#' class='a3'>Pátek</a>
<a href='#' class='a4'>Sobota</a>
</div> <!-- end: #left_column_date_search -->
CSS:
#left_column_date_search {
background: #000;
width: 36px;
float: left;
}
#left_column_date_search a {
display: block;
height: 60px;
width: 60px;
color: #fff;
text-shadow: 1px 0px 0px #000;
text-decoration: none;
line-height: 31px;
margin: 5px 0 0;
text-align: center;
}
#left_column_date_search a.selected {
/* background: url(/images/structure/city-search-grad-selected.jpg); */
color: #660000;
text-shadow: 0px 1px 0px #9e4a4a;
}
#left_column_date_search a:hover {
background: url(/images/structure/city-search-grad-hover.png);
}
#left_column_date_search a{
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
vertical navigation with rotated text
Rotating each a
element or li
element will make us encounter some problem spacing, positioning the elements exactly as we want. We should build the navigation menu so that it spreads horizontally, looks OK first then we just to need rotate the whole container of the navigation menu. Here is the updated code:
.main-nav {
width:100vh;
height:45px;
position:fixed;
background:#4c4c4c;
-webkit-transform-origin: left top;
-webkit-transform:rotate(-90deg) translateX(-100%);
}
ul.nav li {
margin-right:20px;
float:right;
height:100%;
line-height:45px;
}
The menu is supposed to have fixed height of 45px
(after rotated, it will be the width). We use line-height:45px
to center the a
element vertically (after rotated, it will be horizontally). At first the .main-nav
will lie horizontally like this:
we need to rotate it -90deg
(which is counter-clockwise) around the point left - top
specified by transform-origin: left top
. After rotated, all the .main-nav
will be out of view like this:
So we need to translate it down a distance of 100% of width
, however note that we don't use translateY
which seems to mean translate it vertically, because after rotated, the X axis becomes vertical (not horizontal as before), so we have to use translateX(-100%)
(the positive direction is upwards, it's rightwards before rotated). Then we have:
It's just a simple use case related to transform in CSS3. For the vh
unit, it's the unit relative to the viewport's height. 100vh
means 100% of viewport's height
. We have to use 100vh
for the width
because after rotated, width
becomes height
. It should fill the full height of the viewport. However you can set some min-width
for the width
by px to limit the width
's minimum value. It's because when you resize the window, the viewport's height may become small and hence the width
will be shrunk accordingly. Also note that instead of using float:left
for the li
elements, we have to use float:right
so that the Home menu appears first from top to bottom, otherwise (using float:left
), the Home menu will appear at the end (at bottom). There is a little advanced usage of the transform
here (to newbie) it we use more than 1 transform for a transform
property, all the transforms are separated by space and the order of transforms is important. Such as rotate(-90deg) translateX(-100%)
means rotating -90deg
first, then translating along the X axis -100%
, while translateX(-100%) rotate(-90deg)
is reverse to that, it's a totally different thing and of course won't work (makes an unexpected result).
Jsbin Demo.
Vertical menu with rotated text at 100% height
Try this:
CSS
#container {
overflow: hidden;
width: 50px;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: table;
}
.section {
position: relative;
height: 33.33333%;
display: table-row;
background: #ccc;
text-align: center;
}
.section .link {
display: table-cell;
vertical-align: middle;
line-height: 50px;
white-space:nowrap;
max-width:50px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
}
.section:hover { background: #ddd }
HTML
<div id="container">
<div class="section"><a href="#" class="link">aaa</a></div>
<div class="section"><a href="#" class="link">bbb</a></div>
<div class="section"><a href="#" class="link">ccc</a></div>
</div>
DEMO JSFiddle
Align vertical rotated text with horizontal text
This is quite hard and seems like you need some real help here :)
I'll try to explain in code:
@import 'https://fonts.googleapis.com/css?family=Oswald';
h2 { text-align: right; font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 8em; line-height: 1.1em;}
h2 span.smallVertical { font-size: 12%; letter-spacing: 0.1em; /*float: left; /* NOOOOOOOOOOOO :) */ display: inline-block; /* use this instead of float:left */ transform: rotate(-90deg) translateY(50%); /* Add: translateY 50% */ width: 8em; /* same as font size (OR A BIT SMALLER) */ text-align:center; /* to center text inside the red thing */ vertical-align:top; /* top to "center" span... (yeah I know...) */ background:rgba(255,0,0,0.1); /* just to see what the heck we're doing */ white-space: nowrap; /* prevent small text wrap at 8em */}
h2 span.orangeText { color: #FF9900;}
<h2> <span class="smallVertical orangeText">We're Just A</span> Small<br/>Company<br/> <span class="smallVertical">Striving For A</span> <span class="orangeText">Big Feel</span></h2>
Vertically center rotated text with CSS
The key is to set position top and left to 50% and then transformX and transformY to -50%.
.inner {
position: absolute;
top: 50%;
left: 50%;
}
.rotate {
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}
see: http://jsfiddle.net/CCMyf/79/
Inline text rotation
There are multiple ways to do this, but I think CSS skew()
transform property would be the best approach to get what you want.
The skew()
will accept two properties (skew(ax, ay)
) for distorting the element in x and y axes, but in your current particular case passing the first parameter would be enough.
So your final code would be something like this:
.skew {
transform: skew(15deg);
}
<div class="skew">hi there</div>
Vertically & horizontally align text after CSS rotation
You could pull it back in with a few CSS properties...
#whatever {
position: relative;
top: -4px;
right: -10px;
}
Alternatively, you could play with the transform-origin
property:
transform: rotate(-90deg);
transform-origin:20% 40%;
-ms-transform: rotate(-90deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(-90deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(-90deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(-90deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
CSS Rotate Text Vertical - Extra Space on both sides
You may try to use writing-mode
.
The
writing-mode
CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.
https://codepen.io/gc-nomade/pen/rGJGzQ?editors=1100
.rotate { writing-mode:vertical-rl; transform:scale(-1); width:50px; margin-right:50px;}
body { display:flex; align-items:flex-end; }
<div style="display:inline-block; position:relative;" class="rotate"> <span style="displock;width:100%;font-size: 55px;color: #222222;opacity: 0.15;white-space: nowrap;">BACKGROUND</span> <span style="display:block;width:100%;font-size: 45px;color: #222222;text-align:center;">TITLE</span>
</div>Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element
Vertical Text Direction
Alternative approach: http://www.thecssninja.com/css/real-text-rotation-with-css
p { writing-mode: tb-rl; }
Related Topics
Svg CSS Rounded Corner Not Working
How to Scroll Programmatically a Div with Its Own Scrollbars
CSS3/HTML 5/Png Blur Content Behind Element
Putting Buttons and Links Over Particles.Js Script (Z-Index)
Split Page Vertically Using CSS
Touchmove Pointer-Events: None CSS Doesn't Work on Chrome for Android 4.4/Chromeview
Three Column Div Layout Dynamics; Left = Fixed, Center = Fluid, Right = Fluid
Svg Circle File Stroke from Top in Anti Clockwise Direction on Windows
5Px Extra Margin Getting Added to The Bottom of Each Div
How to Dynamically Size Multi-CSS Sprite Image
Adding Background Image to Div Using CSS
Div at Bottom of Window and Adaptable Height Div
How to Make a Div Have a Fixed Size