I need to create a fixed menu button which would be assigned to the right side of the browser. Currently i my code looks lie this:
#button-side-menu {
background: none repeat scroll 0 0 #F5F5F5;
border-radius: 5px 5px 0 0;
color: #363636;
height: 28px;
position: fixed;
right: 16px;
top: 91px;
z-index: 2000;
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-webkit-transform: rotate(-90deg);
-moz-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
padding: 10px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
Is it possible to center it in the div, the text was not adhered to the right side. And also is it possible to set test like this:
M
e
n
u
P.S.
Site is multilingual so i need the text, not image in this case.
This works:
#button-side-menu {
background: none repeat scroll 0 0 #F5F5F5;
border-radius: 5px 5px 0 0;
color: #363636;
width: 15px;
position: fixed;
right: 16px;
top: 91px;
z-index: 2000;
word-wrap:break-word;
text-align: center;
padding: 10px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
Important: word-wrap and text-align are added to make it look like what you asked.
Its width is fixed to 15px instead of height.
Related
Here is a simple ribbon I want to position at the left upper corner of the screen:
.ribbon {
width: 200px;
background: #e43;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #ffffff;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
font-family: "Open Sans Regular";
font-size: 1.5em;
top: -10px;
left: -80px;
height: 80px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
position: fixed;
box-shadow: 0 3px 3px rgba(0,0,0,.3);
}
.ribbon.new {
background: #9ddc03;
}
<div class="ribbon new">NEW</div>
As you see the New word on the green ribbon is not totally visible because it is on the upper edge of the rectangle.
How can I position the ribbon's text on the lower edge of the rectangle so that we can see it correctly.
I used the below flex postioning on the ribbon class but it pushes the text to the right and not the center:
display: flex;
justify-content: flex-end;
align-items: flex-end;
You can update your code like below:
.ribbon {
background: #e43;
color: #ffffff;
font-size: 1.5em;
position: fixed;
top: 0;
left: 0;
transform: translateX(-50%) rotate(-45deg);
transform-origin:top;
padding:40px 100px 0; /* adjust the 40px to control the height (the 100px need to be a big value) */
box-shadow: 0 3px 3px rgba(0,0,0,.3);
}
.ribbon.new {
background: #9ddc03;
}
<div class="ribbon new">NEW</div>
I am trying to make a feedback button that is on the right hand side.
<button className="feedback-button">Feedback</button>
.feedback-button {
height: 40px;
border: solid 3px #CCCCCC;
background: #333;
width: 100px;
line-height: 32px;
-webkit-transform: rotate(-90deg);
font-weight: 600;
color: white;
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
text-align: center;
font-size: 17px;
position: fixed;
right: -40px;
top: 45%;
font-family: "Roboto", helvetica, arial, sans-serif;
z-index: 999;
}
However this does not factor when a scrollbar is shown then feedback button gets overlapped with the scrollbar.
I would like it to be beside the scrollbar but when no scrollbar is shown it adjusts so it is beside the end of the page.
edit
A note: The original post were deleted with its user, and as I found it could be useful, I reposted it.
The rectangle should be rotated -90deg and be centered vertical in the left side of the screen. As you can see in the picture below.
If possible, only HTML and CSS should be used.
The problem is, to first rotate the element, which makes it more difficult to center it.
Stack snippet
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 16px;
font-family: Arial, sans-serif;
}
* {
box-sizing: border-box;
}
body>div {
position: fixed;
top: 50%;
left: 0;
background-color: #FF0000;
color: white;
font-weight: bold;
padding: 10px;
-webkit-transform: rotate(-90.0deg);
-moz-transform: rotate(-90.0deg);
-ms-transform: rotate(-90.0deg);
-o-transform: rotate(-90.0deg);
transform: rotate(-90.0deg);
}
<div>Lorem Ipsum</div>
To better control the rotation, and more easily both left align and center it vertically, use both the transform-origin and transform.
First make its left/top corner as the center of the rotation by adding transform-origin: left top; to the div.
Second, by combine rotate and translate, move it half of its own width to the left (translateX(-50%)), and then rotate it 90 degrees counterclockwise rotate(-90.0deg).
Note 1; When using more than one <transform-function> value, they execute from right to left, which in below sample mean it starts with translateX.
Note 2; I temporary removed the prefixed properties, so you need to add them back.
Stack snippet
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 16px;
font-family: Arial, sans-serif;
background-color: #ccc;
}
* {
box-sizing: border-box;
}
body>div {
position: fixed;
top: 50%;
left: 0;
background-color: #FF0000;
color: white;
font-weight: bold;
padding: 10px;
transform-origin: left top;
transform: rotate(-90.0deg) translateX(-50%);
}
<div>Lorem Ipsum</div>
Update after a comment.
Here is 4 fiddles, showing 4 steps, that hopefully make it more clear how this works:
Step 1 - Step 2 - Step 3 - Step 4
Here is an animation, showing how it moves, and hopefully make it more clear how this works:
html, body {
margin: 0;
font-size: 16px;
font-family: Arial, sans-serif;
}
.faked-body div {
position: absolute;
top: 50%;
left: 0;
background-color: #FF0000;
color: white;
font-weight: bold;
padding: 10px;
transform-origin: left top; /* the rotation center is moved to black circle */
transform: rotate(0)
translateX(0);
animation: the-div 3s 1s forwards;
}
#keyframes the-div {
0% { transform: rotate(0)
translateX(0);
}
50% { transform: rotate(0)
translateX(-50%); /* move to left */
}
100% { transform: rotate(-90deg) /* rotate 90 degree */
translateX(-50%);
}
}
/* styling/info for this demo */
.faked-body div::before {
content: '';
position: absolute;
top: -10px;
left: 0;
transform: translateX(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background-color: black;
animation: the-spot 1.5s 1s forwards;
}
.faked-body {
position: relative;
margin: 10px 60px;
width: 440px;
height: 200px;
background-color: #ccc;
font-size: 14px;
}
.faked-body::before {
content: 'The gray area represents the body so we can see how the "Lorem Ipsum" element moves';
color: #666;
}
.faked-body::after {
content: 'The black spot show where the rotation center is';
color: #222;
position: absolute;
bottom: 0; left: 0;
}
#keyframes the-spot {
0% { left: 0;
}
100% { left: 50%;
}
}
<div class="faked-body">
<div>Lorem Ipsum</div>
</div>
We can use the 'text-orientation' property instead of 'rotate'.
I tried the below code and it worked for me.
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-size: 16px;
font-family: Arial, sans-serif;
display: flex;
align-items: center;
align-content: center;
}
body > div {
background-color: #ff0000;
color: white;
font-weight: bold;
padding: 10px;
width: auto;
height: auto;
writing-mode: vertical-rl;
text-orientation: upright;
}
Create another parent div to 'Lorem Ipsum' and apply "display: flex;
align-items: center;
align-content: center;" properties to the parent div to avoid giving flex to 'body' tag.
Hope it helps.
Understood. Please try the below css, it may solve your issue.
body, html {
height: 100%;
display: grid;
font-size: 16px;
font-family: Arial, sans-serif;
}
div {
margin: auto auto auto 10;
background-color: #FF0000;
-webkit-transform: rotate(-90.0deg);
-moz-transform: rotate(-90.0deg);
-ms-transform: rotate(-90.0deg);
-o-transform: rotate(-90.0deg);
transform: rotate(-90.0deg);
padding: 10px;
}
FYI: I tested this on chrome and safari and working.
Im trying to create this <a> element that pins left of the screen. Its position is absolute but I cannot get it as in image:
HTML:
<a class="feedback__btn">Feedback</a>
CSS:
.feedback__btn {
position: absolute;
top: 11.5%;
left: 0;
background: green;
width: 150px;
height: 45px;
color: red;
z-index: 9;
display: inline-block;
transform: rotate(270deg);
font-size: 24px;
font-weight: 900;
text-align: center;
line-height: 45px;
border-radius: 0px 0px 4px 4px;
}
Two things that cause the tag from not pinning to the left: transform and the width/height. How to to get it pinned to either sides of screen (left in this case) with the same transformation?
If you move the center-point of the button, with transform:translateX(-50%) you will have a much easier way to figure out how much you need to move the button to place it correctly:
.feedback__btn {
position: fixed;
top: 11.5%;
left: 23px;
background: green;
width: 150px;
height: 46px;
color: red;
z-index: 9;
display: inline-block;
transform: translateX(-50%) rotate(270deg);
font-size: 24px;
font-weight: 900;
text-align: center;
line-height: 45px;
border-radius: 0px 0px 4px 4px;
}
I have added transform: translateX(-50%) rotate(270deg); and left: 23px; to your code and changed the heigh of the button to an even number, as that is easier to halve (half of 46 is 23, while half of 45 is 22.5, and you can't have half pixels).
I have also changed the position to fixed, so it follows the user down the site when scrolling.
When browser get resized absolutely positioned after pseudo-element overflows and causes problems. I am looking for a way to fix this. Just resize the browser until you reach header text.
Here is a demo of the problem: http://codepen.io/anon/pen/grKNoJ
.section {
font-family: 'Quantico';
font-weight: bold;
font-size: 36px;
color: white;
border-top: solid 1px black;
text-transform: uppercase;
margin-bottom: 28px;
}
.section-title {
background-color: black;
display: inline-block;
padding: 8px 18px;
position: relative;
}
.section-title:after {
content: " ";
position: absolute;
display: block;
right: 0;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: #000;
transform-origin: bottom left;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}
You can fix it by adding text-overflow: ellipsis; and white-space: nowrap; to .section-title.
You could also set a max-width to that element, and set it to different values according to your media queries, and have it serve your needs on different devices.
Here is the updated result: http://codepen.io/johnnykb/pen/mPKZLg