Archive for October, 2009

Rotate text or images using CSS

Thursday, October 29th, 2009

Here is a bit of css with sample html to show you how to rotate text or an image using css. Works in FF 3.5, Chrome, Safari (most likely just 4, but have not tested in others), IE6-8 (read it supports 5.5). I got this from http://snook.ca.

CSS:

#book {
display: block;
float: left;
}
.title {
display: block;
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.
BasicImage(rotation="3");
position: absolute;
}
</style>

HTML:

<div id="book">
<span class="title">War of the Flowers</span>
</div>

Each browser needs its own little prefix for this (the filter is for IE).

Although I can’t think of a reason off the top of my head why I would use this, its still a neat little trick.

Posted in CSS, Web Development | No Comments »

Adobe’s Browserlab…

Thursday, October 8th, 2009

Been a while since I posted. But I found something that I thought was interesting and COULD be useful to some web designers/developers. Adobe came out with a product called Browser lab. Basically it is a screen shot service. You type in a url, and it takes screen shots of that site using different browsers in different operating systems.

It has some cool features…2 up view to compare to browser screens side by side, 1 up, and Onion Skin view. The last is kind of cool. It overlays two views on top of each other and you can adjust the transparency to see the differences between two browsers.

You have to have an account with adobe to use it, and for right now it is free to the public. They will eventually start charging a monthly fee to use it, probably in the $10-$20 range, like their editor (Incontext Editor).

On the one hand I like the Browserlab for what it is, BUT…you will still have to open the site up that you are building in the actual browsers to use developer or firebug to fix errors.

Posted in Web Development | No Comments »