Quick Tip: Build CSS3 Effects Using Fireworks CS5
basixvideos

Quick Tip: Build CSS3 Effects Using Fireworks CS5

on Dec 9th 2011 with 12 comments
Tutorial Details
  • Topic: Fireworks
  • Difficulty: Basix
  • Screencast duration: 7 mins
This entry is part 8 of 8 in the Fireworks Pro Series Session
« Previous

One of the really neat things about CSS3 is the ability to create objects containing special effects such as gradients, rounded corners and even drop shadows. In this tutorial I’m going to show you how a new Fireworks extension can do all the hard work for you.

The Fireworks CSS3 Mobile pack, found on Labs, gives you the ability to create an object in Fireworks CS5.1, extract its CSS3 properties and add them to an HTML page in Dreamweaver CS5.5.

I’ll also show you how to preview your effects in various browsers – code free.

Watch the Screencast

Don’t like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

 

Additional Resources

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Tom is a professor of Interactive Multimedia through the Humber Institute of Technology and Advanced Learning’s School of Media Studies. Like all faculty in the program, Tom believes his students deserve to be taught by instructors who are regarded as experts in their field and whose knowledge of their subject is current with industry best practice.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://gail.is Ronalds

    Pretty useless, seems quicker to write it by hand!

    • http://twitter.com/garbaczd David Garbacz

      Not if you’re crunched for time. This is nothing short of a miracle for those who can’t remember their CSS3 properties (like myself), or who want to get as much CSS as possible without using an image in its place.

      • alex

        You can use snippets for the css properties and I think that will be faster than using fireworks.

    • Patrick

      I’m going to have to agree with Ronalds. This effect could’ve been achieved much faster if it was written by hand!

    • Greg Potter

      You wouldn’t create just a single object in FW just to do the effects. This is more for if you already have a page prototype. Instead of having to figure out what effects you used, where the gradient starts/ends, etc. you just click on the object. Of course, you wouldn’t use Dreamweaver ;)

    • http://www.justinhubbard.me Justin Hubbard

      I also must agree. I’ve been personally using Fireworks to build websites for quite some time and have never used the code builder since my first crack at it, simply because Fireworks creates too much bloat, unorganized code and unconventional names. This spells hours of editing which can be done faster by hand in the first place.

  • Thiago

    Nice! Thanks for writing us FW tuts!

  • Pingback: Quick Tip: Build CSS3 Effects Using Fireworks CS5 | Shadowtek | Hosting and Design Solutions

  • Gabor

    Thanks Tom,
    For the Noobs – Dangerous!

  • http://kustomdesigner.com/ mike

    I prefer this: http://css-tricks.com/examples/ButtonMaker/ Dreamweaver is good for a php editor but css and xhtml I wouldn’t really call hard to learn, at the very least everyone should know how to code a website by hand in notepad++ . Dreamweaver just seems to let people get by without having a solid foundation. Do yourself a favor and learn how these things work, don’t rely on fancy code editors.

  • jasper

    what a bloated joke!

    who would ever use that? it reminds me of the code that go live used to kick out….

    thank god we don’t have to pay for it

  • http://www.dhaneshtk.com dini297

    Always happy to learn new ways of doing things.
    Thanks for tip.

  • Pingback: Tuts+ Basix – Learn a New Skill These Holidays | Android Developers

  • Pingback: Tuts+ Basix – Learn a New Skill These Holidays | Hire Flash Developers

  • http://www.crunchmatrix.com Muhammad Ahmed

    CSS3 is just blow away at the top in building amazing web user interface designs which is not only working for PCs but also creating equal contribution to all tablets and mobile devices. This amazing technology is just awesome for all web designers and developer.