well, I normally find the answer to my questions here but this time I didn't so I will now ask my first one here! :)
I have some rotated text on my page and it is positioned using position:absolute, like below:
.rotate-box .rotate-text{
display: block;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute;
left: -45px;
top: 170px;
}
<div class="rotate-box">
<span class="rotate-text">Rotated text</span>
</div>
This works fine on all browsers (with webkit) except for Safari and Chrome where the text is displayed about 90px lower than in the other browsers.
To prevent this I have added:
#media screen and (-webkit-min-device-pixel-ratio:0){
.rotate-text {top: 80px !important;}
}
Now the text is in the correct place in all browsers but this doesn't feel right to me... Am I missing something here?
I hate adding browser exception code, it tends to come back and bite you in the long run... :o
Regards,
Anders
Change this line:
-webkit-transform: rotate(90deg);
to
-webkit-transform: rotate(90deg) translate(-100px, 16px);
As you know, this line is only used by the webkit browsers (Safari, Chrome)
You'll probably have to play around with the exact px figures, but then you can get rid of the extra #media screen tag.
Look into transform-origin. Basically, you should be able to do transform-origin: 0 0; (with all the prefixes, of course), and it'll hook the rotate to the top left, which sounds like what you want.
Related
I have website www.stanosimkovic.sk and i have problem with vertical positioning right element with text on main page in IE browser. In another browsers it load correctly. Can somebody help me how to fix this issue.
I think problem is somewhere in CSS
.alignMiddle {
position: relative;
top: 50%;
transform: translateY(-50%);
}
But dont know how resolve it, because in Chrome Opera etc. its OK.
Depending of the version of IE, the transform property might not work. So what you have to do is add the vendors prefix. So it should look like this (-ms- is for IE) :
.alignMiddle {
position: relative;
top: 50%;
transform: translateY(-50%);
-ms-transform: translate(-50%);
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
}
Hope it helps !
I'm making a website that contains many skewed elements, like this:
This isn't too bad, there are CSS transforms that could skew it. But how about this:
The image isn't distorted, just the frame is cropped in a skewed way. What's the easiest/best way to do this?
I think this should work for you. As a Mark commented on, clip-path is a nice way to go. There are tools for getting just the right path such as Clippy. Once you've got the path, you drop it right into your code. In my demo, I used it on the div wrapping the image, rather than on the image itself. I did it this way to keep border effects—added via pseudo-class—on top of the image.
Demo: http://codepen.io/antibland/pen/eZKxNa
I ended up using the following. It creates a skewed parent, then unskews the child, centering it and making it big enough to fill the skew's stick-out bits.
HTML
<div class="skewed">
<img src="images/sad-kid.jpg">
</div>
CSS
div.skewed {
position: relative;
height: 140px;
transform: skew(-2deg) rotate(2deg);
-webkit-transform: skew(-2deg) rotate(2deg);
-moz-transform: skew(-2deg) rotate(2deg);
overflow: hidden;
}
div.skewed > * {
width: 110%;
position: absolute;
top: 50%;
transform: skew(2deg) rotate(-2deg) translateY(-50%);
-webkit-transform: skew(2deg) rotate(-2deg) translateY(-50%);
-moz-transform: skew(2deg) rotate(-2deg) translateY(-50%);
}
OUTPUT
This is similar to Andy Hoffman's method, but supports a greater number of browsers.
Folks, I have text on a div that has transform: rotate(3deg). In Firefox, the text is rendered wavy. Removing the transform to the div fixes the waviness. Is there a way for me to have my cake and eat it too?
HTML:
<div class="card turn-right">
<div class="card-text">
<p>Blah. Blah. Blah.</p>
</div>
</div>
CSS:
.card {
display: block;
width: 550px;
height: 375px;
}
.turn-right {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
Edit:
Additional information: I have to use a #font-face for this project.
Screenshot:
Try adding perspective
.turn-right {
-webkit-transform: perspective(9999px) rotate(3deg);
transform: perspective(9999px) rotate(3deg);
}
No need for -moz-transform in modern browsers
By the way, the same bug is present in webkit browsers.
Why does this work ?
I don't have a real answer, because I don't have the source for the browser. But my guess is the following. The browsers have a very good rendering engine, that can do lots of things, and does it pretty well. But doing all this is most of the time expensive (read: makes the browser slow). So, most of the time it is trying to guess: is this really necessary ? Do I really need to calculate the xxxx of the yyyy in the zzzz to display this ?
And some of the bugs come from that guess being incorrect, and omiting a necesary calculus.
The solution then, is to put there something that makes the browser rendering engine think "wait, I really need to calculate that, that is not the easy case".
Also in this line are fixes like translate3d(0,0,0) or translateZ(0) or backface-visibility hidden . What is the sense in translating something 0px ? They force the browser to do something the complicated way instead of the easy way, and solve - optimize the result.
When I want to rotate a div I want to rotate the text as well, but I have still issues with anti-aliasing. The text is blurry and I cant fix it. The effect occurs in Firefox and Chrome.
I found this solution, but it didn't work for me.
-webkit-backface-visibility: hidden;
html
<div id="rotate">
<span>Hi, iam rotated blurry text </span>
</div>
css
#rotate{
margin-top:30px;
-moz-transform: rotate(-9deg);
-ms-transform: rotate(-9deg);
-o-transform: rotate(-9deg);
-webkit-transform: rotate(-9deg);
transform: rotate(-9deg);
background:#292929;
font-size:30px;
color:green;
display:inline-block;
}
link: http://jsfiddle.net/P52Yu/6/
plz help :)
Chrome has difficult with numbers with a lot of decimal places at times when there is a transform involved. Try doing a parseInt on those numbers to bring the decimal places down. You'll find the blurryness often goes away with this simple fix.
To change a web page CSS to be RTL from LTR I have to set or invert the following CSS properties:
body{direction:rtl}
any float:left should be float:right and Vice versa
any padding or margin regarding left or right should be reversed
In addition any images should be inverted horizontally.
My question is: are there any more CSS properties should be changed?
text-align, background-position, border positions, left and right positions, basically anything and everything that has a horizontal property.
If you would like to do it by hand, you may go through a list of css properties such as this one, but personally I would look at using one of the online tools to get started.
CSSJanus is usually pretty good, though I am sure there are more out there if you google it.
Best of luck.
Are you just trying to use right-to-left writing, or are you trying to mirror the webpage?
body {
transform: scaleX(-1);
-ms-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
}
This will produce a mirror image of the webpage, but everything still works as it should (links are clickable in their new positions, for instance)
Another few properties...
box-shadow and text-shadow
/* multiply the first value ( horizontal offset of the shadow) by -1 */
`box-shadow: 5px -5px 5px 5px #abc;`
becomes
box-shadow: -5px -5px 5px 5px #abc;
and
text-shadow: 2px 2px #FF0000;
becomes
text-shadow: -2px 2px #FF0000;
2: border-radius
You need to be careful with this one as changing the values to achieve rtl works differently here
border-radius:25px 0px 0 25px;
becomes
border-radius:0 25px 25px 0; (not border-radius:25px 25px 0 0;)
Also, here are a couple of tips:
Horizontal Positions as Percentages
If you have a style like:
.style
{
position: absolute;
top: 22%;
left: 32%;
...
}
the left property would become 100-32=68%
2. background-position: Horzontal Value in pixels - eg:
background-position: -34px -85px;
In such cases you will have to work this out manually. (See this article)
As a reference:
Here's a great article about about converting a website to rtl
actually, the entire website http://rtl-this.com deals with rtl issues so can find lots of useful stuff there
You may try;
body {
-ms-transform: scaleX(-1);
-moz-transform: scaleX(-1); /* Gecko */
-o-transform: scaleX(-1); /* Operah */
-webkit-transform: scaleX(-1); /* webkit */
transform: scaleX(-1); /* standard */
filter: FlipH; /* IE 6/7/8 */
}
This will make a mirror effect. Here is a Live Demo.
You may try rtl if you want to flow letters from right to left and may use just text-align: right if you want to float items to right.
If you want text to begin from the right, you may try;
body{
unicode-bidi:bidi-override;
direction:rtl;
float: right;
}
Here is the Live Demo;