CSS3!

GuildPortal admin site link to the original post



CSS3 is now available in all major browsers, including IE9! It adds a lot of neat things you can do to your site like text and box shadows, text and box rotation, rounded corners, gradient backgrounds and resizable and multiple background images! Webkit browsers (Safari and Chrome) even have css animation!

As usual the learning curve for this stuff is relatively steep, I still haven't bothered to learn it all, but I found a nice resource. The site is called "CSS3 Please!" and it allows you to play around with settings and colors, then you can just copy the css code to your site. The only thing you need to do is make sure you are using the correct class name.

So lets say you have an image you want to rotate 45 degrees.

• Figure out which image you want to modify. Open the editor and give that image a class name (you plan on rotating multiple images using the same css3 rule) or an ID (for one image only). For example (in this post):
  

  <img alt="" id="test-img" src="http://www.axiomfiles.com/Files/278466/folder_locked.png" />

• Now go to CSS3 Please!
• Find the ".box_rotate" rule and click "toggle rule on"
• Click and highlight the top most yellow "7.5", then enter 45. You should see the CSS block (pictured above) rotate 45 degrees!
• Now click on the "to clipboard" link.
• Now on your page, go to Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standard.
• Add the following:
  

  #test-img {}

• Then paste in the css code you just copied from the CSS3 Please site inside the curly brackets. You should end up with this:
  

  #test-img {
    -moz-transform: rotate(45deg);  /* FF3.5+ */
    -o-transform: rotate(45deg);  /* Opera 10.5 */
    -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
    -ms-transform: rotate(45deg);  /* IE9 */
    transform: rotate(45deg);
    filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6&ndash;IE9 */
    M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
    zoom: 1;
  }

• Save the changes and reload your page.
• You should end up seeing something like this:
  
  

  Before	After

• The nice thing about this css, is that is can be applied to anything: images, boxes, iframes and even the entire page. Happy CSSing!