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);
}
Related
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.
I made a page consisting of several sections with different background colors and a transparent background image with noise (transparent "PNG file"). At the top of each section I placed a triangular shaped div with the color of the section above. I would also like to add the noise image to the triangles but I can't figure out how.
I've tried the border-image attribute in "CSS" but that just erases the whole triangular shape for some reason..
I would be grateful if you could help me out. "This" is the site I'm working on.
You can use a rotated pseudo element :
Generic solution:
FIDDLE
HTML:
<div></div>
CSS:
div {
width:200px;
height:200px;
overflow:hidden;
}
div:before {
content:"";
display:block;
width:70%;
height:70%;
background-image: url(/*Path to your image*/);
transform: rotate(-45deg);
transform-origin:0 0;
-ms-transform: rotate(-45deg);
-ms-transform-origin:0 0;
-webkit-transform: rotate(-45deg);
-webkit-transform-origin:0 0;
}
EDIT: Your use case
In your use case, you can consider just rotating .arrow-down by 45deg and set overflow:hidden; on the sections. (you also need to remove the existing borders on .arrow-down and give it desired dimensions)
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.