Pinterest Stumbleupon Whatsapp
Ads by Google

cool css effectsCSS3 (combined with the power of HTML5) is rapidly being supported by all the major browsers (read – anything except Internet Explorer), so I thought now would be a good time to see some of the cool CSS effects we can achieve using the power of your the browser and a little CSS code. You should be able to see all the effects demonstrated in this article if you’re using the latest Chrome, Safari or Firefox browser.

First – What Is CSS?

If you’re reading this article because you’re intrigued but have no idea what CSS means, let’s me explain quickly. CSS is the coding language used to decorate webpages. It stands for Cascading Style Sheet, and basically just adds style and flair to a site. Websites are certainly readable without their CSS, but they are hideous just like all websites were back in 1995. While HTML files describe the structure and textual content of a page, the CSS makes them display in the way the designer intended, and determine everything from page layout, text size and colours, and now a number of fancy effects with the introduction of CSS3.

In the past, achieving the same kind of effects as the ones described in this article would have meant downloading bulky CSS or even bigger graphics. Now, CSS can just describe to your browser how it would like the page to look, and the browser will handle the processing. It like me handing you the plans to build your own house instead of selling you the whole house – it’s significantly cheaper!

Rounded Corners

The Internet has gradually been getting ’roundier’, but now this is solidified in CSS3. Take a look at the box surrounding this paragraph. It isn’t an image – try right clicking on it to see. Pure CSS!

The code for rounded corners is really easy:

.box_round {
     -moz-border-radius: 20px; /* FF1+ */
  -webkit-border-radius: 20px; /* Saf3-4, iOS 1+, Android 1.5+ */
          border-radius: 20px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
  }

 

Text Shadow

Text can sometimes look really harsh on its own, but a simple little shadow really helps things. Check out the shadow I’ve applied to this paragraph.

Here’s the code for some text shadows:

Ads by Google
.box_textshadow {
     text-shadow: 1px 1px 3px #888; /* FF3.5+, Opera 9+, Saf1+, Chrome */
}

Gradients

No more flat colors or background gradient images, now you can create a cool gradient using CSS only. Unfortunately, you do need a few lines due to current incompatibility issues between browsers, but you can use the tool that I will describe later to generate these automatically.

Here’s the code for CSS gradients:

.box_gradient {
  background-color: #3f9fe3;
  background-image: -moz-linear-gradient(top, #3f9fe3, #white); /* FF3.6 */
 background:-moz-linear-gradient(top, #1E5799 0%, #207cca 26%, #2989D8 39%, #FFFFFF 100%); /* firefox */
  background-image: -ms-linear-gradient(top, #3f9fe3, #white); /* IE10 */
  background-image: -o-linear-gradient(top, #3f9fe3, #white); /* Opera 11.10+ */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#3f9fe3), to(#white)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #3f9fe3, #white); /* Chrome 10+, Saf5.1+ */
  background-image: linear-gradient(top, #3f9fe3, #white);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#3f9fe3', EndColorStr='#white'); /* IE6–IE9 */
}

Rotation

It’s difficult to imagine a use for this in terms of text, but it can add some nice design elements when using pictures, for example. Again, notice that even though this paragraph has been rotated, you can still select and interact with it as it remains regular text.

Here the code to rotate something:

.box_rotate {
     -moz-transform: rotate(7.5deg);  /* FF3.5+ */
       -o-transform: rotate(7.5deg);  /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
      -ms-transform: rotate(7.5deg);  /* IE9 */
          transform: rotate(7.5deg);  
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
                     M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
               zoom: 1;
}

Animation

Oh yes, I saved the best ’till last. CSS3 introduces various forms of animation for any number of the cool CSS effects described. On this paragraph, I’ve defined the transition property as listed below, as well as a simple background color and rotation when you hover over it. If you aren’t already, hover over this paragraph of text now to see the effect in action. You can animate pretty much anything!

You’ll need the transition code like this to any element you want to change. You’ll also need to use some pseudo CSS classes (such as :hover to change any properties that you want animating, such as color, size or rotation)

.box_transition {
     -moz-transition: all 0.5s ease-out;  /* FF4+ */
       -o-transition: all 0.5s ease-out;  /* Opera 10.5+ */
  -webkit-transition: all 0.5s ease-out;  /* Saf3.2+, Chrome */
      -ms-transition: all 0.5s ease-out;  /* IE10? */
          transition: all 0.5s ease-out;  
}

Cross Browser Incompatibilities

Though most modern browsers do support all of CSS3 in some ways, some still require some slightly different code or hacks to make it work with their particular implementation of the standard. In the code above for instance, you’ll see many instances of -moz- or -webkit- preceeding some of the CSS properties, which relate to either Mozilla based or Webkit based browsers. Writing these extra lines can be a pain though, so check out the css3 generator to write them for you.

Conclusion

The web is going to get a whole lot more exciting with the new CSS3 and HTML5 extensions. Granted, we are going to see another spurt of flashing text and a high ratio of whizz-bang to real content (just as we did when animated GIFs were first “discovered”) but in the long run we will learn how to use the tools of CSS3 to make more interesting web interfaces. And hey, you can always turn it all off!

If you’re a designer or web developer yourself, just remember that CSS3 should never be the only option. If your site won’t function without CSS3, you haven’t used it correctly. CSS should be used to enhance the experience, not program functionality.

  1. Aibek
    May 7, 2011 at 1:06 pm

    hey mate, excellent post!

  2. Josh Fox
    April 29, 2011 at 12:51 pm

    Good article James. I was actually working on implementing some of these, along with others, on my own site when I first saw the article posted yesterday.

    However, your gradient doesn't seem to work right in my browser. It just shows up as the base color. I'm using Firefox 4, and gradients show up on my site, but there must be something different in the code. I used the Ultimate CSS Gradient Generator to get my code, and it seems to work in all of the browsers I tested it in.

    I also found some other resources to help generate CSS3 code, like the CSS3 Generator. Things like these can help save time of coding.

    • James Bruce
      April 29, 2011 at 1:26 pm

      Curious, thanks Josh. Possibly the generator I used was not targetting FF4 yet, as it works in 3. 6. ill see if i can edit one in...

  3. fatSlave
    April 28, 2011 at 7:24 pm

    i think css3 simplifies a lot of things .. but jquery+css2 rocks meanwhile the browser wars make them fully compatible .. :)

  4. Chris Nichols
    April 28, 2011 at 7:02 pm

    Interesting that when I view this article in Chrome, some of the CSS3 displays differently than it does in Firefox 4. I think before this can become mainstream, these discrepancies need to be addressed. I still have nightmares about the days when I had to code for Netscape Navigator and IE 5 at the same time. Gawd. What a mess!

  5. Yoh
    April 28, 2011 at 12:06 am

    Yup, figured out that I'm not seeing any effects on my Google Reader. That's why I decided to go here.
    Of course it wouldn't work since its rss. Its formatted differently.

    • James Bruce
      April 28, 2011 at 9:06 am

      Yep, apolgoies Yoh, I hadnt thought about RSS feeds. I guess RSS is stripping some of the tags, because I would have thought that it should work in RSS if browser supports it.

  6. Scarlett
    April 27, 2011 at 11:33 pm

    One thing to note is that most of these effects don't work if you're viewing an article in a feed reader. Shame, that!

  7. Atayl
    April 27, 2011 at 11:21 pm

    This isn't just a format. It is the broad all encompassing styling language for web design.

    • James Bruce
      April 28, 2011 at 9:07 am

      Well said

  8. EADubya@live.com
    April 27, 2011 at 10:12 pm

    Why isn't IE picking this format and running with it?

  9. Richard Bradshaw
    April 27, 2011 at 10:14 pm

    If you are interested in transforms and animations, then have a look at css3.bradshawenterprises.com for lots of practical demos and uses.

  10. Richard Bradshaw
    April 27, 2011 at 8:14 pm

    If you are interested in transforms and animations, then have a look at css3.bradshawenterprises.com for lots of practical demos and uses.

    • James Bruce
      April 28, 2011 at 9:07 am

      excellent Richard, thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *