I want to have the bottom curved in my Header Div. Basically the div should be slanted, i tried the below, and its working in all latest browser's except ie8 & below
<div class="HeaderTitle" style="background: #000;">
<h1 class="header">
PROMOTIONS</h1>
</div>
#Container #InnerPages .HeaderTitle
{
padding: 115px 0 0 0; background-color: #000;
margin-right: -20px;
-webkit-transform: rotate(5deg); /* Safari and Chrome */
-moz-transform: rotate(5deg); /* Firefox */
-o-transform: rotate(5deg); /* Opera */
-ms-transform: rotate(5deg); /* IE 9 */
transform: rotate(5deg);
}
#Container #InnerPages .header
{
text-align: center; color: #fff; font-size: 30px; margin: 0; padding: 0 0 26px;
-webkit-transform: rotate(-5deg); /* Safari and Chrome */
-moz-transform: rotate(-5deg); /* Firefox */
-o-transform: rotate(-5deg); /* Opera */
-ms-transform: rotate(-5deg); /* IE 9 */
transform: rotate(-5deg);
}
But this doesnt work in IE & my client is very adamant that it should work in IE 8 :-(
Any help please...
Solution 1
Use IETransformsTranslator
It's an on-line tool With this tool you can make matrix filter transforms what works on IE6,IE7 & IE8. Just paste you CSS3 transform functions (e.g. rotate(15deg) ) and it will do the rest.
Solution 2
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
The rotation property of the BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degress respectively.
Solution 3
Since this answser is still getting up-votes, I feel I should update it with information about a javacript library called CSS Sandpaper that allows you to use (near) standard CSS code for rotations even in older IE versions.
Once you've added CSS Sandpaper to your site, you should then be able to write the following CSS code for IE6-8:
-sand-transform: rotate(25deg);
Hope this helps you :)
Basically you want curves for IE8
This will help
.div
{
-webkit-border-radius:4px; /* older webkit based browsers */
-khtml-border-radius:4px; /* older khtml based browsers */
-moz-border-radius:4px; /* older firefox */
border-radius:4px; /* standard */
behavior: url(border-radius.htc); /* IE 6-8 */
}
Related
I have Pie chart drawn using CSS. when current image is not starting from 0 degree..
Actual Out & Expected Output : Green should be 140 deg ; red : 60 deg ; orange: 160 deg
CSS :
<style>
/*
make each pie piece a rectangle twice as high as it is wide.
move the transform origin to the middle of the left side.
Also ensure that overflow is set to hidden.
*/
.pie {
position:absolute;
width:100px;
height:200px;
overflow:hidden;
left:110px;
-moz-transform-origin:left center;
-ms-transform-origin:left center;
-o-transform-origin:left center;
-webkit-transform-origin:left center;
transform-origin:left center;
}
/*
unless the piece represents more than 50% of the whole chart.
then make it a square, and ensure the transform origin is
back in the center.
NOTE: since this is only ever a single piece, you could
move this to a piece specific rule and remove the extra class
*/
.pie.big {
width:200px;
height:200px;
left:10px;
-moz-transform-origin:center center;
-ms-transform-origin:center center;
-o-transform-origin:center center;
-webkit-transform-origin:center center;
transform-origin:center center;
}
/*
this is the actual visible part of the pie.
Give it the same dimensions as the regular piece.
Use border radius make it a half circle.
move transform origin to the middle of the right side.
Push it out to the left of the containing box.
*/
.pie:BEFORE {
content:"";
position:absolute;
width:100px;
height:200px;
left:-100px;
border-radius:100px 0 0 100px;
-moz-transform-origin:right center;
-ms-transform-origin:right center;
-o-transform-origin:right center;
-webkit-transform-origin:right center;
transform-origin:right center;
}
/* if it's part of a big piece, bring it back into the square */
.pie.big:BEFORE {
left:0px;
}
/*
big pieces will also need a second semicircle, pointed in the
opposite direction to hide the first part behind.
*/
.pie.big:AFTER {
content:"";
position:absolute;
width:100px;
height:200px;
left:100px;
border-radius:0 100px 100px 0;
}
/*
add colour to each piece.
*/
.pie:nth-of-type(1):AFTER,
.pie:nth-of-type(1):BEFORE {
background-color:green;
}
.pie:nth-of-type(2):AFTER,
.pie:nth-of-type(2):BEFORE {
background-color:red;
}
.pie:nth-of-type(3):AFTER,
.pie:nth-of-type(3):BEFORE {
background-color:orange;
}
/*
now rotate each piece based on their cumulative starting
position
*/
.pie[data-start="140"] {
-moz-transform: rotate(140deg); /* Firefox */
-ms-transform: rotate(140deg); /* IE */
-webkit-transform: rotate(140deg); /* Safari and Chrome */
-o-transform: rotate(140deg); /* Opera */
transform:rotate(140deg);
}
.pie[data-start="200"] {
-moz-transform: rotate(200deg); /* Firefox */
-ms-transform: rotate(200deg); /* IE */
-webkit-transform: rotate(200deg); /* Safari and Chrome */
-o-transform: rotate(200deg); /* Opera */
transform:rotate(200deg);
}
/*
and rotate the amount of the pie that's showing.
NOTE: add an extra degree to all but the final piece,
to fill in unsightly gaps.
*/
.pie[data-value="140"]:BEFORE {
-moz-transform: rotate(140deg); /* Firefox */
-ms-transform: rotate(140deg); /* IE */
-webkit-transform: rotate(140deg); /* Safari and Chrome */
-o-transform: rotate(140deg); /* Opera */
transform:rotate(140deg);
}
.pie[data-value="60"]:BEFORE {
-moz-transform: rotate(60deg); /* Firefox */
-ms-transform: rotate(60deg); /* IE */
-webkit-transform: rotate(60deg); /* Safari and Chrome */
-o-transform: rotate(60deg); /* Opera */
transform:rotate(60deg);
}
.pie[data-value="160"]:BEFORE {
-moz-transform: rotate(160deg); /* Firefox */
-ms-transform: rotate(160deg); /* IE */
-webkit-transform: rotate(160deg); /* Safari and Chrome */
-o-transform: rotate(160deg); /* Opera */
transform:rotate(160deg);
}
/*
NOTE: you could also apply custom classes (i.e. .s0 .v30)
but if the CSS3 attr() function proposal ever gets implemented,
then all the above custom piece rules could be replaced with
the following:
.pie[data-start] {
transform:rotate(attr(data-start,deg,0);
}
.pie[data-value]:BEFORE {
transform:rotate(attr(data-value,deg,0);
}
*/
</style>
HTML :
<!--
for each piece of the pie chart create one div and give it
a data-value attribute that represents the amount (in degrees) that
represents its total visible portion, and a data-start attribute
that matches the amount rotation for the starting (the cumulative value amount of all the previous pieces).
-->
<div class="pie" data-start="0" data-value="140"></div>
<div class="pie" data-start="140" data-value="60"></div>
<div class="pie big" data-start="200" data-value="160"></div>
use
.pie[data-start="200"] {
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
Fiddle
It is easy to set text from top to bottom and there are enough resources to do that.
The problem is with bottom to top vertical alignment.
See the image below-
You might want to try this.
.rotate {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
This should work:
<head>
<style>
div
{
width:130px;
height:50px;
-ms-transform:rotate(270deg); /* IE 9 */
-moz-transform:rotate(270deg); /* Firefox */
-webkit-transform:rotate(270deg); /* Safari and Chrome */
-o-transform:rotate(270deg); /* Opera */
}
</style>
</head>
<body>
<br><br><br>
<div><h3>Vertical Text</h3></div>
</body>
div {
top:90px;
position:relative;
width:50px;
white-space:nowrap;
-ms-transform:rotate(270deg);
-moz-transform:rotate(270deg);
-webkit-transform:rotate(270deg);
-o-transform:rotate(270deg);
}
Worked well for me.
I have written below code. But now the requirement is that the image should be rotated 180 degrees. How can I achieve this?
#cell {
background-image: url("../images/logo.PNG");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 0px 250px;
background-color: #FFFFFF;
border-left: 2px;
}
HTML tag:
<td width="2%" id="cell"/>
One cross-browser solution is
#cell {
-webkit-transform: rotate(180deg); /* Chrome and other webkit browsers */
-moz-transform: rotate(180deg); /* FF */
-o-transform: rotate(180deg); /* Opera */
-ms-transform: rotate(180deg); /* IE9 */
transform: rotate(180deg); /* W3C compliant browsers */
/* IE8 and below */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand');
}
Note, that for IE8 and below, the rotation center point is not located in the center of the image (as it happens with all other browsers). So, for IE8 and below, you need to play with negative margins (or paddings) to shift the image up and left.
The element needs to be blocked. Other units that can be used are:
180deg = .5turn = 3.14159rad = 200grad
If you don't have any text in the <td> you can use transform: rotate(180deg); on it. If you do have text, this will rotate the text too. To prevent that you can put a <div> inside the <td>, put the text inside that, and rotate that 180 degrees (which puts it upright again).
Demo: http://jsfiddle.net/ThinkingStiff/jBHRH/
HTML:
<table>
<tr><td width="20%" id="cell"><div>right-side up<div></td></tr>
</table>
CSS:
#cell {
background-image: url(http://thinkingstiff.com/images/matt.jpg);
background-repeat: no-repeat;
background-size: contain;
color: white;
height: 150px;
transform: rotate(180deg);
width: 100px;
}
#cell div {
transform: rotate(180deg);
}
Output:
You can also try this axial type rotation OR rotation on Z-axis.
.box {
background: url('http://aashish.coolpage.biz/img/about/7.jpg');
width: 200px;
height: 200px;
transition: transform .5s linear;
transform-style: preserve-3D;
}
.box:hover {
transform: rotateY(180deg);
}
<div class="box"></div>
You can use CSS3 for this, but there are some browser issues:
transform: rotate(180deg);
Also look here: CSS3 rotate alternative?
image a complete black web page. On this web page is a 100% size white div that fills the whole page. I'd like to rotate this div by -7 degrees (or 7 degrees counter-clock wise).
This will result in the black background being visible in triangles on the edges, just like you had placed a piece of paper on a desk and turned it a bit to the left.
Actually this can be done with some css and it's working quite well (except for IE).
The real problem now is:
I'd like to have a normal, non-rotated div element on top of that to display the content in, so that only the background is rotated.
Rotating a contained div counterwise doesn't work though, because through the two transformations the text will be blurry in all browsers.
How can I realize that?
Best would be a solution workiing in current Webkit browsers, FF3.5+ and IE7+. If only IE8+ I could live with that too.
Try using
#content {
position: absolute;
z-index: 500;
margin-left: auto;
margin-right: auto;
}
#background {
//Your white DIV
}
<div id="background"></div>
<div id="content">
Lorem ipsum
</div>
Use position:absolute; on the background and z-index it to the back.
Here is an example.
You have to rotate it back... http://jsfiddle.net/gFCHE/
Not blurry at all on Chrome or ChromeOS. It shouldn't be anywhere else either.
Add overflow:hidden to #crooked for a cool effect with images.
This CSS will work to get you started but you'll need to tweak it to work as you want it.
<div id='wrap'>
<div id='cooked'>
<div id='straight'>
</div>
</div>
</div>
#wrap{
background:#000;
height:100%;
}
#crooked{
height:100%;
color:#f00;
-moz-transform: rotate(-7.0deg); /* FF3.5+ */
-o-transform: rotate(-7.0deg); /* Opera 10.5 */
-webkit-transform: rotate(-7.0deg); /* Saf3.1+, Chrome */
-ms-transform: rotate(-7.0deg); /* IE9 */
transform: rotate(-7.0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.992546151641322, M12=0.12186934340514748, M21=-0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
zoom: 1;
}
wrap{
background:#000;
height:100%;
}
#crooked{
height:100%;
background:#fff;
-moz-transform: rotate(-7.0deg); /* FF3.5+ */
-o-transform: rotate(-7.0deg); /* Opera 10.5 */
-webkit-transform: rotate(-7.0deg); /* Saf3.1+, Chrome */
-ms-transform: rotate(-7.0deg); /* IE9 */
transform: rotate(-7.0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.992546151641322, M12=0.12186934340514748, M21=-0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
zoom: 1;
}
#straight{
-moz-transform: rotate(7.0deg); /* FF3.5+ */
-o-transform: rotate(7.0deg); /* Opera 10.5 */
-webkit-transform: rotate(7.0deg); /* Saf3.1+, Chrome */
-ms-transform: rotate(7.0deg); /* IE9 */
transform: rotate(7.0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.992546151641322, M12=-0.12186934340514748, M21=0.12186934340514748, M22=0.992546151641322, sizingMethod='auto expand');
zoom: 1;
I want to rotate a single word of text by 90 degrees, with cross-browser (>= IE6, >= Firefox 2, any version of Chrome, Safari, or Opera) support. How can this be done?
Updated this answer with recent information (from CSS Tricks). Kudos to Matt and Douglas for pointing out the filter implementation.
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
/* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
/* Should be unset in IE9+ I think. */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Old answer:
For FF 3.5 or Safari/Webkit 3.1, check out: -moz-transform (and -webkit-transform). IE has a Matrix filter(v5.5+), but I'm not certain how to use it. Opera has no transformation capabilities yet.
.rot-neg-90 {
/* rotate -90 deg, not sure if a negative number is supported so I used 270 */
-moz-transform: rotate(270deg);
-moz-transform-origin: 50% 50%;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: 50% 50%;
/* IE support too convoluted for the time I've got on my hands... */
}
I am using the following code to write vertical text in a page.
Firefox 3.5+, webkit, opera 10.5+ and IE
.rot-neg-90 {
-moz-transform:rotate(-270deg);
-moz-transform-origin: bottom left;
-webkit-transform: rotate(-270deg);
-webkit-transform-origin: bottom left;
-o-transform: rotate(-270deg);
-o-transform-origin: bottom left;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
Another solution is to use an SVG text node which is supported by most browsers.
<svg width="50" height="300">
<text x="28" y="150" transform="rotate(-90, 28, 150)" style="text-anchor:middle; font-size:14px">This text is vertical</text>
</svg>
Demo: https://jsfiddle.net/bkymb5kr/
More on SVG text: http://tutorials.jenkov.com/svg/text-element.html
The CSS Writing Modes module introduces orthogonal flows with vertical text.
Just use the writing-mode property with the desired value.
span { margin: 20px; }
#vertical-lr { writing-mode: vertical-lr; }
#vertical-rl { writing-mode: vertical-rl; }
#sideways-lr { writing-mode: sideways-lr; }
#sideways-rl { writing-mode: sideways-rl; }
<span id="vertical-lr">
↑ (1) vertical-lr 至<br />
↑ (2) vertical-lr 至<br />
↑ (3) vertical-lr 至
</span>
<span id="vertical-rl">
↓ (1) vertical-rl 至<br />
↓ (2) vertical-rl 至<br />
↓ (3) vertical-rl 至
</span>
<span id="sideways-lr">
↓ (1) sideways-lr 至<br />
↓ (2) sideways-lr 至<br />
↓ (3) sideways-lr 至
</span>
<span id="sideways-rl">
↓ (1) sideways-rl 至<br />
↓ (2) sideways-rl 至<br />
↓ (3) sideways-rl 至
</span>
I adapted this from http://snook.ca/archives/html_and_css/css-text-rotation :
<style>
.Rotate-90
{
display: block;
position: absolute;
right: -5px;
top: 15px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
</style>
<!--[if IE]>
<style>
.Rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
right:-15px; top:5px;
}
</style>
<![endif]-->
I've had problems trying to do it in pure CSS - depending on the font it can look a bit rubbish. As an alternative you can use SVG/VML to do it. There are libraries that help make it cross browser with ease e.g. Raphael and ExtJS. In ExtJS4 the code looks like this:
var drawComp = Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(), //or whatever..
height: 100, width: 100 //ditto..
});
var text = Ext.create('Ext.draw.Component', {
type: "text",
text: "The text to draw",
rotate: {
x: 0, y: 0, degrees: 270
},
x: -50, y: 10 //or whatever to fit (you could calculate these)..
});
text.show(true);
This will work in IE6+ and all modern browsers, however, unfortunately I think you need at least FF3.0.
If you use Bootstrap 3, you can use one of it's mixins:
.rotate(degrees);
Example:
.rotate(-90deg);
My solution that would work on Chrome, Firefox, IE9, IE10 (Change the degrees as per your requirement):
.rotate-text {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
filter: none; /*Mandatory for IE9 to show the vertical text correctly*/
}
If CSS writing-mode: sideways-lr is what you prefer, and you happen to run into chromium/chrome based browser. You may try
{
writing-mode: vertical-rl;
transform: rotate(180deg);
}
so all modern browsers support it now.
reference: https://bugs.chromium.org/p/chromium/issues/detail?id=680331#c4