Quick Tip: Build CSS3 Effects Using Fireworks CS5


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

Related Posts
  • Design & Illustration
    Quick Tip: Create a Long Shadow Using a Blend in IllustratorLong shadow prev
    Learn how to create a trendy long shadow effect using a Blend in Adobe Illustrator.Read More…
  • Web Design
    Applications and Tools
    Five Useful Things You Can Do With Adobe Reflow Right NowReflow thumb
    Whether or not Adobe Reflow ever becomes a fully functional website creation tool, there are some really useful things you can do with it right now, and we're going to cover five of them.Read More…
  • Photography
    Photo Effects
    How to Create a Magical Photo Manipulation: Post-Production0955 toys psdtuts toys in action 400x400
    Artists often work with a team of individuals to complete a project. This team could include a client, a creative director, an art director, a photographer, a retoucher, and a graphic designer. In this two-part tutorial, I teamed up with photographer Natalie Fobes to create a magical photo illustration that depicts a child interacting with toys that have come to life. In the process, we will show you how to not only shoot the photos that you need, but also, how to retouch them and combine them with stock photos to create artwork that closely resembles a sketch. Let's get started!Read More…
  • Web Design
    New to Web Design? Start Here.New to web design
    Welcome to Webdesigntuts+, an online resource dedicated to teaching and encouraging web designers of all skill levels and experience. Whether this is your first time here, you've found yourself dipping into our content in the past, or you're a regular visitor, this post will help you find the best of our content.Read More…
  • Web Design
    Applications and Tools
    Retina-Friendly Photoshop Slicing With "Cut&Slice Me"Cut n slice retina
    Adobe Photoshop is constantly evolving; new features are added with each release, while existing features are improved. There is, however, one area which is still quite outdated; the way we slice our designs in Photoshop hasn't changed since the web was table-based.Read More…
  • Web Design
    Applications and Tools
    Fireworks in the Real World: IntroductionFw fb1
    Welcome to the first in a series of screencasts about using Adobe Fireworks in the real world. This session is suitable for newcomers to Fireworks and those of you who've used it in the past, but not necessarily as your design tool of choice. Throughout this session I'll be showing you the advantages Fireworks has for real world projects.Read More…