I am trying to horizontally center align a inline-block element that also has a fixed position. This is because this element is also being animation via transform translation. Current attempt looks like this:
.cd-nav-trigger {
position: fixed;
display: inline-block;
}
.cd-nav-trigger {
bottom: 7%;
left: 48.25%;
top: auto;
right: auto;
width: 44px;
height: 44px;
z-index: 5;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.cd-overlay-nav, .cd-overlay-content {
/* containers of the 2 main rounded backgrounds - these containers are used to position the rounded bgs behind the menu icon */
position: fixed;
bottom: 7%;
left: 48.25%;
height: 4px;
width: 4px;
-webkit-transform: translateX(20px) translateY(-20px);
-moz-transform: translateX(20px) translateY(-20px);
-ms-transform: translateX(20px) translateY(-20px);
-o-transform: translateX(20px) translateY(-20px);
transform: translateX(20px) translateY(-20px);
}
HTML implementation is this:
</div> <!-- cd-overlay-content -->
Menu<span class="cd-icon"></span>
</div>
The left property is not allowing me to correctly align the element, even when set to 50%. Any help would be appreciated.
Try to add a negative margin-left (half of the width)
.cd-nav-trigger {
position: fixed;
bottom: 7%;
left: 50%;
width: 44px;
height: 44px;
margin-left: -22px;
}
Menu<span class="cd-icon"></span>
Related
When I hover the p tag and add a letter-spacing on it, it messes up the entire text. I wanted to hover it and it stays in the same position with the letter-spacing on it.
#text {
position: absolute;
transform: translate(-50%, -50%);
left: 40%;
top: 50%;
font-size: 2em;
transform: rotate(90deg);
}
#text:hover {
letter-spacing: 10px
}
<p id="text">sample text rotation</p>
Just add white-space: nowrap
BTW, your second transform rewrites the first one.
The correct use is transform: translate(-50%, -50%) rotate(90deg);
#text {
position: absolute;
transform: translate(-50%, -50%) rotate(90deg);
left: 40%;
top: 50%;
font-size: 2em;
white-space: nowrap;
}
#text:hover {
letter-spacing: 10px
}
<p id="text">sample text rotation</p>
The flickering happens because the transform-origin is wrong. You're rotating the text, so you should take the original transform-origin into account (which is from left to right).
See this updated code snippet for the result.
.text {
position: absolute;
transform-origin: top left;
left: 70%;
top: 20%;
font-size: 2em;
transform: rotate(90deg);
}
.text:hover {
letter-spacing: 10px;
}
<p class="text">sample text rotation</p>
Couple of things:
You have 2 transform tags on your css
You still will need more spacing padding so the hover is not flickering
Also Im sure you wanted a transition so try this:
#text {
transition: letter-spacing 0.5s;
}
#text {
display: block;
padding: 0;
position: absolute;
left: 40%;
top: 50%;
font-size: 2em;
transform: translate(-50%, -50%) rotate(90deg);
transition: letter-spacing 0.5s;
}
#text:hover {
letter-spacing: 10px
}
<p id="text">sample text rotation</p>
You will probably need more block /width /spacing so it can get the right setup but thats all you...
Is it possible to have a div with a background image which has a skewed bottom AND round corners?
Most examples use only a background color which doesn't have the duplicate image problem that a background image has.
CSS clipping path
The clipping path option works however, it has no support on IE 11.
Closest solution so far
The HTML:
<div class="container">
<div id="parallelogram">
<div class="image"></div>
</div>
</div>
The CSS:
.container {
overflow: hidden;
padding-bottom: 40px;
}
#parallelogram {
width: 300px;
height: 150px;
margin: -41px 0 0 0;
-webkit-transform: skewY(-11deg);
-moz-transform: skewY(-11deg);
-o-transform: skewY(-11deg);
background: red;
overflow: hidden;
position: relative;
border-radius: 40px;
}
.image {
background: url(http://baconmockup.com/340/500);
position: absolute;
top: -30px;
left: -30px;
right: -30px;
bottom: -30px;
-webkit-transform: skewY(11deg);
-moz-transform: skewY(11deg);
-o-transform: skewY(11deg);
}
https://jsfiddle.net/Spindle/81e30bmx/
But the problem with this is that the round corners aren't visible anymore as well...
Adding border-radius to parent div could work, as it will work as border-radius for four corner and then individually using border-top-right-radius, border-top-left-radius,border-bottom-right-radius,border-bottom-left-radius you can change and align accordingly as below and thus it skews at bottom-left along-with border-radius at 4 sides,
.container {
overflow: hidden;
padding-bottom: 40px;
border-top-right-radius:16px;
border-bottom-right-radius:14px;
border-top-left-radius:40px;
margin-top:40px;
display:inline-block;
}
#parallelogram {
width: 300px;
height: 150px;
margin: -41px 0 0 0;
-webkit-transform: skewY(-11deg);
-moz-transform: skewY(-11deg);
-o-transform: skewY(-11deg);
background: red;
overflow: hidden;
position: relative;
border-radius: 40px;
}
.image {
background: url(http://baconmockup.com/340/500);
position: absolute;
top: -30px;
left: -30px;
right: -30px;
bottom: -30px;
-webkit-transform: skewY(11deg);
-moz-transform: skewY(11deg);
-o-transform: skewY(11deg);
}
<div class="container">
<div id="parallelogram">
<div class="image"></div>
</div>
</div>
It is possible and does seems to work on your example.
If you are talking about the top left and right corners getting chopped off, then what you need to do is add a margin to the top so:
#parallelogram { margin: -41px 0 0 0; }
Would become:
#parallelogram { margin: 23px 0 0 0; }
This will adds the hole shape in.
I have this side-pane. It's height is 80%. In this side-pane I have a text. I want this to always be in the middle.
Main div:
.simulation {
height: 80%;
width: 500px;
border: 1px solid #ccc;
box-shadow: 8px 8px 7px #A5A5A5;
background: #FFF;
position: absolute;
top: 10px;
z-index: 100;
left: -450px;
transition: 500ms ease all;
}
Sub div:
.simulation .simulation-content .simulation-bar .heading {
position: relative;
margin-top: 340px; /* How do I get this in the middle?? */
-webkit-transform: rotate(-90deg);
}
I can't get the margin-top right when i express it in %.
Plunkr: http://plnkr.co/edit/Z8xZNYLNvShQDVPZMZgk?p=preview
You could align the child element vertically at the middle of the parent by positioning the child absolutely and a combination of top: 50% and transform: translateY(-50%).
In this particular instance — Example:
.simulation .simulation-content .simulation-bar .heading {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translate(-30%, -50%) rotate(-90deg);
-moz-transform: translate(-30%, -50%) rotate(-90deg);
-ms-transform: translate(-30%, -50%) rotate(-90deg);
-o-transform: translate(-30%, -50%) rotate(-90deg);
transform: translate(-30%, -50%) rotate(-90deg);
}
An explanation can be found here:
How to center a "position: absolute" element
You can use also flexboxes to achieve it. just add:
display: flex;
flex-flow: column nowrap;
justify-content: center;
to your "main-content"
How do you vertically rotate text on IE8+
The elements I want to vertically rotate are positioned absolutely and require to be in the same place.
<div id="parent">
<div id="child_1">
</div>
<div id="child_2">
</div>
</div>
CSS:
#parent {
position: absolute;
width: 300px;
height: 300px;
}
#child_1 {
postion: absolute;
top: 250px;
left: 50px;
width: 100px;
height: 10px;
}
#child_2 {
postion: absolute;
top: 200px;
left: 10px;
width: 100px;
height: 10px;
}
There is a hack for IE8 using filter however this requires positioning of element for IE separately but I can live with this.
IE8:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
IE9+:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
I am trying to rotate this div, fix it and float it to the RIGHT like this [jsbin.com/ujebik/1][1] but it don't completely float to the RIGHT
HTML:
<div class="logo">
ROTATE THIS TEXT
</div>
CSS:
.logo {
position: fixed;
top: 20px;
right: 0;
z-index: 100;
width: 250px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
font-size:20px;
background-color:green
}
UPDATE:
want this:
but Have this:
Try to add transform-origin: 100% 100%; to make the div rotate around its lower right corner instead of its center (http://jsbin.com/iniweq/2/)
I am guessing what you are trying to do is have the element on the left? If this is the case then you need to change your CSS to
.logo {
position: fixed;
top: 20px;
left: 0;
z-index: 100;
width: 250px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
font-size:20px;
background-color:green
}
Here is a fiddle: http://jsfiddle.net/Er3yL/
Or if what you are trying to say is that you want to 'float' it to the extreme RIGHT, then I am guessing that the parent element for .logo is not stretched to 100% of the window. Either you can correct that or if you want to keep it that way then you can add a negative value to right, like this
.logo {
position: fixed;
top: 20px;
right: -20px;
z-index: 100;
width: 250px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
font-size:20px;
background-color:green
}