Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > CSS3 Please!
Mottie (MVP) 5/22/2011 4:06 PM EST : CSS3 Please!
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

CSS3!



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!
TopBottom

Mottie (MVP) 5/27/2011 8:56 AM EST : RE: CSS3 Please!
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Here's another site I found that helps you with CSS3: CSS3 Generator
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%