Snowfalls

Posts Tagged ‘CSS

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 🙂

Advertisements
Tags: , , ,

Please see this example:

<h2><a href=”#”>This is a link</a></h2>

And this one:

<a href=”#”><h2>This is a link</h2></a>

If we see the result of those html codes, both of the examples would give same result if you test it on modern browsers.

Unfortunately, if you are still using IE6 as your browser then you will have a problem.

Fox example you have this CSS code:

a{ text-decoration: underline; }

a:hover{ text-decoration: none; }

If you follow the second example (which is the invalid html) the anchor hover state would not working in IE6 because of the headings element.

So to avoid that and make your code valid you should refer to http://validator.w3.org for checking