In the following code why do we use the webkit and ms keywords?
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
EDIT: The ms- and webkit- keywords are used so each of the different CSS processors versions (microsoft (ms) and webkit) know how to handle that line. This is because of experimental features, like transform, being added by each of the CSS processors at different times.
The typical use of a block of CSS like this is used to move an element to the centre of it's parent object on the horizontal axis.
The idea is to move the element to so the left edge is in the middle of the parent:
#svgelemn {
position: relative;
left: 50%;
}
Now that the element is just to the right of the middle (remember that it's the left edge that is in the middle), you need to move the element to the left by 50% of it's own width (not it's parents width). Because we're moving the element to the left, we also need to invert the percentage so it's negative (-50%). So now you add the transform section:
#svgelemn {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%); /* Webkit specific transform */
-ms-transform: translateX(-50%); /* Microsoft specific transform */
transform: translateX(-50%); /* Generic transform (all evergreen browsers) */
}
The code that you have only makes a final adjustment of only 20%, so that's not quite the middle.
You can see an example here. You can see how the top element is in the middle, while the original code makes it slightly off centre.
Related
I've been in the process of making a customise-able tooltip for Vue using SCSS, allowing a developer to specify the colour and placement of the tooltip, which is constructed from a pair of ::before and ::after pseudo-elements in a button element of variable size. The ::before acts as the tooltip's arrow, and the ::after the tooltip content.
There's four placements I want to make possible: top, bottom, left and right. The following two groups of classes apply to the top and bottom positions:
.tooltip-placement-top, .triangle-placement-top {
left: 50%;
transform: translate(-50%, 0);
}
.tooltip-placement-top {
bottom: calc(100% + 10px); // 3. 100% here is parent height, key point
}
.triangle-placement-top {
bottom: calc(100%); // 4. no need add 5px, because transparent border also takes place
border-top-color: var(--tooltip-border-color);
}
.tooltip-placement-bottom, .triangle-placement-bottom {
left: 50%;
transform: translate(-50%, 0);
}
.tooltip-placement-bottom {
top: calc(100% + 10px); // 3. 100% here is parent height, key point
}
.triangle-placement-bottom {
top: calc(100%);
border-bottom-color: var(--tooltip-border-color);
}
and these result in a centred tooltip above and below the button like so:
The next stage is to position the left and right hand tooltip classes to sit aligned with the horizontal centre of the button, but conforming to the left or right edge of the button rather than the top and bottom, as seen here:
Both the button and tooltip are likely to appear as different sizes depending on their context of use, so unfortunately this needs to be a scalable solution (i.e. increasing the size of either button or tooltip won't cause them to fall out of alignment). My current attempts to adapt the code has made the tooltip appear at 100% of its own width right of the button, which as you can imagine looked terrible.
Sorry I don't have screen-caps to share, but I hope the drawings make it clear what I'm trying to achieve! If you need any additional code then I can supply it, but the question was getting quite bulky as it is.
Sorted it!
Here's what I have for my right and left classes:
.tooltip-placement-left, .triangle-placement-left {
top: 50%;
}
.tooltip-placement-left {
right: 100%;
transform-origin: right;
transform: translate(-12px, -50%);
}
.triangle-placement-left {
right: 100%;
transform: translate(8.3px, -50%);
}
.tooltip-placement-right, .triangle-placement-right {
top: 50%;
}
.tooltip-placement-right {
left: 100%;
transform-origin: left;
transform: translate(12px, -50%);
}
.triangle-placement-right {
left: 100%;
transform: translate(-8.3px, -50%);
}
the exact distances in pixels depend on the dimensions of your tooltip arrow, but this is what worked for me. Hope it helps someone else!
I am trying to create a box with a jagged edge, that can actually be used as a HTML element should be, and can resize etc.
Finally got my head around border-image, got it looking nice, and then when I rotate it, it gets a gap between the border-image and the main fill:
I googled it, and found an answer on SO telling someone to set
-webkit-backface-visibility: hidden;
This cleared it up, but obviously only in webkit browsers.
I tried using -moz-backface-visibility as well, but it didn't clear the issue up in Firefox.
Any suggestions?
jsFiddle
e: I actually thought I may be able to fix it by setting a background color, and then setting the background-clip to padding-box, but honestly it just left me in the same position.
One trick that fixes the problem both in Webkit and FF is setting perspective (instead of backface visibility)
.box.one {
-webkit-transform: perspective(999px) rotate(1deg);
-moz-transform: rotate(1deg);
-ms-transform: rotate(1deg);
-o-transform: rotate(1deg);
transform: perspective(999px) rotate(1deg);
}
fiddle
Adding an after pseudo class with negative margin seems to fix the Firefox issue.
.rough:after {
content: "";
display: block;
margin: -1px;
height: 302px;
background: black;
}
Fiddle demo: http://jsfiddle.net/Wkk7W/3/
Note that the display:block seems to be an essential part of my hack/fix.
Update: Depending on your plans for content inside the div, that exact example might not suit. However, I think the concept could be tweaked depending on your requirements - e.g. using a 3px wide black border instead of a background fill, and using position:absolute to allow other text to be layered on top of the box.
Gonna answer myself, because this solution actually covers my needs of it being "as a html element should be, and can resize etc", even though I developed this solution from Grants answer.
http://jsfiddle.net/Wkk7W/6/
Set the element to position:absolute, then give it a pseudo element with:
content: "";
display: block;
position: absolute;
top: 0;
width: 102%;
margin: -1px 0 0 -1%;
height: 102%;
background: black;
z-index: -1;
This way it keeps the elements width and height, z-index: -1 to put it behind the text. It might not require the display:block, i didn't check.
There are still a few tiny gaps but they are basically impossible to cover and I am happy with it the way it is.
This question already has answers here:
How to align a <div> to the middle (horizontally/width) of the page [duplicate]
(27 answers)
Closed 9 years ago.
I'm trying to achieve centered vertical and horizontal alignment of a div.
This is the styling I'm using:
.box{
position:fixed;
display:block;
width:200px;
height:400px;
top:50%;
left: 50%;
width: 50%;
transform: translateX(-50%) translateY(-50%);
background:#ccc;
}
This style works perfectly in Firefox but not in Chrome. Here's the example: http://codepen.io/0leg/full/HJjrK
The interesting thing is that I lifted this styling from a modal window on this tutorial http://tympanus.net/Development/ModalWindowEffects/, and for some reason this works perfectly in webkit browsers...
That is simply because in even the latest version of Chrome, you will need to use the vendor prefix -webkit- for CSS3 transforms. Mozilla Firefox has been supporting unprefixed transform since v16 (current v25), and ironically so is the current version of IE. More information on browser support is available here: http://caniuse.com/transforms2d
Therefore, use the vendor prefix (just -webkit- is sufficient, unless you want to support older versions of IE and Firefox, then use their respective vendor prefixes, too):
.test {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: red;
width: 200px;
height: 200px;
}
http://codepen.io/terrymun/pen/zCgkI
As you know the height and width of the div, I would change your CSS to this:
.box{
position:absolute;
width:50%;
height:400px;
top:50%;
left: 50%;
margin-top: -200px; /* Half the height of the div */
margin-left: -25%; /* Half the width of the div */
background:#ccc;
}
You're moving the div half way down and across the page, and then negatively margining it back by half of it's width.
http://jsfiddle.net/davidpauljunior/utPhs/2/
Note: You had two width declarations, I presumed you wanted the second one (50%), so removed the first one. I changed position fixed to absolute but it works with both, and I removed the display:block as <div> is already a block level element.
When using scale in Firefox, the scaled element dóes get scaled properly. The problem is, that it's positioned as if it isn't scaled.
This works fine in Chrome, and probably also in IE, Safari and Opera. These browsers all support the CSS zoom property, where Firefox doesn't. For Firefox I'm using -moz-transform: scale(0.3);.
This is my CSS:
#overview .page-content {
zoom: 0.3;
-moz-transform: scale(0.3);
}
This is what it should look like (as in Chrome):
This is what it shouldn't look like (as in Firefox):
Does anybody know how to fix this? Or maybe a workaround?
As thirtydot mentioned:
position: absolute;
-moz-transform-origin: 0 0;
This will do the trick.
I added -transform-origin: 0 0; and it still did not work.
Somehow in Chrome it collapsed to -webkit-transform-origin: 0;
So I changed it to -transform-origin: top left; and it works fine now.
Full code:
-moz-transform: scale(50%);
-moz-transform-origin: top left;
-o-transform: scale(50%);
-o-transform-origin: top left;
-webkit-transform: scale(50%);
-webkit-transform-origin: top left;
If absolute positioning is not an option - and aware of according browser support - display: table-cell with a min-width definition, should needs be, might do the trick as well.
E.g. this helped me to get a row with customer logos scaling well across different screen resolutions.
First of all, an image of what I am trying to acheive:
Sample here:
http://i.imgur.com/3BpFF.png
The white box with the word 'div' in it is obviously the div I have. For my purposes, it's a div centered in a page using width:500px; margin: 0 auto;. What I want is to be able to align some rotated text (using -moz-transform: rotate(90deg) or alternatively prefixed rotates) along the top of the div, like the word 'Holy' above (sample text). I would also like to set the baseline on that div, though it isn't that important.
By the way, I used some absolute positioning in Firebug to get the text aligned there - it was hacked there using per pixel positioning. It's not very flexible (if at all) because once I increase the font size or change the position of the div, it's broken.
Also: I am open to using SASS and other such things (I don't have any experience with it yet, but I do I think it allows use of variables which may help).
When you can use CSS transform it means you can use pseudo elements in your CSS code. Then I will add that "Holly" part via :after pseudo element.
div:after{
content:"Holy";
line-height:20px;
position:absolute;
background:yellow;
padding:0 10px;
left:100%; top:0;
-webkit-transform:rotate(90deg) translateY(-100%);
-webkit-transform-origin:0 0;
}
As you can see I've use translateY to move this part out of the div, because we rotated the thing before then translateY will work as translateX.
transform-origin is set to 0 0.
This code is independent from you div size.
Look at it live here:
http://jsbin.com/akaziy/2/
You can place something like this in your .css file (the margin-top & margin-bottom are just examples)
div {
width:500px;
margin: 0px auto;
}
.holly {
margin-top:20px;
margin-left:520px
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer 9*/
-ms-transform: rotate(90deg);
/*undefined prefix*/
transform: rotate(90deg);
}