Snowfalls

Posts Tagged ‘CSS3

Sometimes a normal-horizontal text isn’t enough, we need the text rotate into some angle we want them to be.

To do this we could add a few lines of codes in our text css-selector. For example:

In your HTML:

<div class=”container”>

<span>It Works</span>

</div>

Inside the css file you should add:

.container span{

-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
transform: rotate(-12deg);

}

But unfortunately this won’t work in IE.. To have it works you should add more lines of codes like I shown below:

position: absolute;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

The absolute position is very important here because if you put another position options like relative or static, the filter wouldn’t work.. And for rotation value, the number means:

0 = not rotated

1 = 90 degrees

2 = 180 degrees

3 = 270 degrees

So our CSS selector become:

.container span{

-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
transform: rotate(-12deg);
position: absolute;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

}

Until I write this post,

I haven’t found a method to make text-rotation in IE rotate with custom degrees,

so if you have some ways to do it, I would appreciate a lot  if you share it by commenting below my post 🙂

Tags: , , ,

For example you have this class:

<div class=”rounded”>… Text Here …</div>

In your CSS code you could add these line to implement the rounded-corner box:

.rounded{

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

}

In which:

moz-border-radius gives you compatibility with older firefox browser

-webkit-border-radius gives you compatibility with older webkit browsers, such as Safari

border-radius is a CSS3 tag that works with modern browsers, such as Safari 5, Firefox 3.5.x, Internet Explorer 9, and Google Chrome 4

But, unfortunately these styles are not working in IE6, 7, and 8