is there a way to make my website automatically zoom out to 90% ?
Thanks
This can be done with css3 scale attribute but beware that this is not support on all browsers.
http://www.w3schools.com/css3/css3_2dtransforms.asp/
body{
transform: scale(0.9);
-ms-transform: scale(0.9); /* IE 9 */
-webkit-transform: scale(0.9); /* Safari and Chrome */
-o-transform: scale(0.9); /* Firefox */
}
Or with jquery and javascript for cross browser by appending a div around the content off the site and scaling to 90% off the body width;
Something roughly like
var bdwidth = $("body").width();
$("wrapper").width((bdwidth / 100)*90);
Use CSS
body {
-moz-transform: scale(0.9, 0.9); /* Moz-browsers */
zoom: 0.9; /* Other non-webkit browsers */
zoom: 90%; /* Webkit browsers */
}
This worked for me!
Related
http://i.stack.imgur.com/yY4pG.png <--- Not enough reputation to post images.
This is how my website looks without any browser zoom on a 27" screen.
I know about this but I dont know how to use it.
-webkit-transform: scale(0.5); /* Chrome, Safari 3.1+ */
-moz-transform: scale(0.5); /* Firefox 3.5-15 */
-ms-transform: scale(0.5); /* IE 9 */
-o-transform: scale(0.5); /* Opera 10.50-12.00 */
transform: scale(0.5);
offsetRatio = (ratio - 1) / 2;
So how do I make my site auto scale??
You can always use this:
width:100%;
http://www.w3schools.com/cssref/pr_dim_width.asp
This question already has answers here:
How to rotate a <div> 90 degrees?
(6 answers)
Closed 9 years ago.
Is it possible to rotate a block-level box, generated by block element relative to this geometrical center. E.g. as follow:
You can use CSS transform:
transform: rotate(-200deg);
-ms-transform: rotate(-200deg); /* IE 9 */
-webkit-transform: rotate(-200deg); /* Safari and Chrome */
Demo
The transform property is supported in Internet Explorer 10, Firefox, and Opera. You do not need to use CSS prefixes for these.
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
The property transform in CSS3 does this. You need to use vendor prefixes for some browsers.
Here is an example: http://jsfiddle.net/gfEL5/
-moz-transform: rotate(30deg); /* FF after 3 and before 16 */
-ms-transform: rotate(30deg); /* IE 9 */
-o-transform: rotate(30deg); /* Opera after 10.5 and before 12 */
-webkit-transform: rotate(30deg); /* current Chrome, Safari, Opera */
transform: rotate(30deg); /* IE after 10, FF after 16 */
It rotates around the center by default, but you can set another transform-origin as well. More about this: https://developer.mozilla.org/en-US/docs/Web/CSS/transform
I'm trying to skew some text that sits within a div, which is all nice a straight forward, but I am trying to find a way to keep each line completely left justified to one side of the div, as currently the first few lines sit in so many pixels and the last few lines overflow out. The font we're using is already italic but we want to push it a little more with the skew, I know it's not going to look perfect but it works for what we want.
Is there a way to do this? I've tried searching one out already but I'm not sure if I'm looking for the right thing or it's something that's nobody bothers doing.
Heres a basic JSfiddle
and an awful mock up... bad mockup
and the basic code to test it out...
Here is the CSS:
.box {
width:600px;
height:300px;
background:#f1f1f1;
}
.box p {
transform: skew(-20deg);
-ms-transform: skew(-20deg); /* IE 9 */
-moz-transform: skew(-20deg); /* Firefox */
-webkit-transform: skew(-20deg); /* Safari and Chrome */
-o-transform: skew(-20deg); /* Opera */
}
And the HTML:
<div class="box">
<p>Text here - more in the fiddle</p>
</div>
Thanks guys!
This may be a silly question, but are you simply wanting italic text? If that's the case, and your font is italic by default as you say, simply remove the skew completely and give your .box p selector font-style: italic:
.box p {
font-style: italic;
}
JSFiddle demo.
If you are wanting the text's container to be skewed, however, what you can do is introduce a container element and apply the skew on that:
<article>
<p>...</p>
</article>
.box article {
transform: skew(-20deg);
-ms-transform: skew(-20deg); /* IE 9 */
-moz-transform: skew(-20deg); /* Firefox */
-webkit-transform: skew(-20deg); /* Safari and Chrome */
-o-transform: skew(-20deg); /* Opera */
}
Now simply counter that skew on your p element by skewing the same amount in the opposite direction:
.box article p {
font-style: italic;
transform: skew(20deg);
-ms-transform: skew(20deg); /* IE 9 */
-moz-transform: skew(20deg); /* Firefox */
-webkit-transform: skew(20deg); /* Safari and Chrome */
-o-transform: skew(20deg); /* Opera */
}
Here I've again added font-style: italic to make the text render italic.
JSFiddle demo.
How can I make this line rotation work in IE8? I used this to get the ms-filter but still wont work..
Here's a JSFIDDLE.
Heres the HTML:
<div class="mainmenu">
test
</div>
and the CSS:
.mainmenu:before {
background: none repeat scroll 0 0 #333333;
content: "";
display: block;
height: 1px;
position: relative;
right: 12.5%;
transform: rotate(-45deg);
width: 35%;
z-index:10000;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
}
Any Help Greatly Appreciated.. Thanks
IE8 doesn't support standard CSS3 rotation, but it does have the -ms-filter style, which is capable of doing the same thing (albeit with much more complex syntax, and some annoying caveats).
However, if you're prepared to use a bit of Javascript, I would strongly recommend using a good polyfill script for this, which will allow you to use the standard CSS rotate syntax even for old IE versions.
The best polyfill script I know of for rotation is CSS Sandpaper.
Using this means you can use (near) standard CSS code, which means that (1)your code is more consistent between browsers, and therefore easier to maintain, and (2) you don't need to learn the horrible -ms-filter syntax.
So instead of the -ms-filter code, you'd have a line that looks like this:
-sand-transform: rotate(-45deg);
In addition to rotate, CSS Sandpaper also implements a variety of other CSS3 effects into old IE versions, which makes it a very useful tool.
Hope that helps.
transform: rotate(45deg); /* CSS3 (for when it gets supported) */
-moz-transform: rotate(45deg); /* FF3.5+ */
-o-transform: rotate(45deg); /* Opera 10.5 */
-webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
I am trying to rotate text by using LESS
Simply, I try the following code but it does not work.
.my-class {
color: #ff0000;
.rotate(90);
}
Here is my jsfiddle http://jsfiddle.net/D2RLR/2750/
Did you try adding a unit? (or an unit Mr president?)
.rotate(90deg)
See MDN about CSS3 transform and rotate for more information. That's what LESS.js or lessphp will output
To make css rotation work on all browsers including ie7 through ie10 using LESS, I am using a mixin like this:
.rotate(#deg: 90) {
/* Safari */
-webkit-transform: rotate(#deg * 1deg);
/* Firefox */
-moz-transform: rotate(#deg * 1deg);
/* IE10+ */
transform: rotate(#deg * 1deg);
/* Opera */
-o-transform: rotate(#deg * 1deg);
/* Internet Explorer */
#IEdeg: round(#deg / 90, 0);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#IEdeg);
}
#divToRotate {
.rotate(270);
}
But you won't be able to run this in js fiddle since this will need to be compiled by lessc compiler or using the less js parser.
You can simply write it in plain CSS, and it will work in LESS: transform: rotate(90deg);.
Try something like this:-
.box_rotate {
-moz-transform: rotate(7.5deg); /* FF3.5+ */
-o-transform: rotate(7.5deg); /* Opera 10.5 */
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}
Check this link:- http://snook.ca/archives/html_and_css/css-text-rotation
I recommend using the LESS library: LESS Elements it has a mixin for rotate which seems to work in lots of browsers:
.rotation(15deg); Rotates the item by a number of degrees clockwise.