Macworld Masterclass: Use CSS3 transitions for form highlights in Dreamweaver CS6

Macworld Masterclass: Use CSS3 transitions for form highlights in Dreamweaver CS6

We show you how to use CSS3 transitions for form highlights in Adobe's new Dreamweaver CS6


  • Step 1: Create a form 1
  • Step 2: Define properties 2
  • Step 3: Test your work 3
Next Prev

Step 1 of 3: Step 1: Create a form

In a new document, create a typical web form with a few fields (or just load an existing site with a form). Go to Window > CSS Transitions to open the new panel. Click + to create a new transition and set Target Rule to ‘.highlight’ and ‘Transition On’ to ‘focus’.

Next Prev

Step 2 of 3: Step 2: Define properties

Set ‘Duration’ to 1 and ‘Timing Function’ to ‘ease-in-out’. Click + under ‘Property’, choose ‘background-color’ and set ‘End Value’ to #ff9. Hit the Create Transition button. Select your form fields in turn and apply the new (.highlight) class to them. (If they already have a class, add ‘highlight’ in code after the original value.)

Next Prev

Step 3 of 3: Step 3: Test your work

Use Live view in Dreamweaver and clicking inside the form fields. You should find they turn yellow. When a form field loses its focus, the yellow fades back to the original background colour. Experiment with further property values to create more complex transitions.

Next Prev

Market Place


Everything Tablet brings you the latest casing and accessories helping you to personalise, protect and get the most out of your tablet. Working at the intersection of fashion and function we create products for trend-setters and tech-heads alike!.

Zip Cloud

Zip Cloud automatically backs up your Files, Folders and all your Important Documents. Nominated for MacWorldUK Best Professional Software, coupled with Award winning iPhone and iPad apps, Zip Cloud really is the number 1 choice in Cloud Storage Today. Try Unlimited Cloud Storage Today for FREE!.

TemplateCloud is the design marketplace for graphic designers. You create designs, and use our software to build them into online editable templates. We sell your designs in different countries via different websites. Each time a customer uses your design, we pay you a royalty; the price is set by you.


Amsys is recognised as the technical leader in Apple and has developed bespoke technical products and solutions to deliver class leading support to its business clients. Amsys clients can select from consultancy, integration, break-fix, recruitment, training and app development. Amsys make Apple products work for business.

About NAD

NAD Electronics has always stood out by doing things differently. Our relentless pursuit of great sound has earned us a ‘giant killer’ reputation. Every product is designed with heart and soul you can hear, emphasizing quality over quantity. We focus on the inside where it counts—and where you can hear the results.

Sphero is a completely new type of gaming system.

It's the world's first robotic ball that you control from your smartphone or tablet. You can drive Sphero, play tabletop and multiplayer games, use Sphero as a handheld controller for on-screen gameplay, and even explore augmented reality. Now with 20+ apps!


WeatherPro - the award winning weather app! Developed by professional meteorologists and providing weather forecasts for over 2 million locations with real-time, high resolution radar and satellite images, ski weather, water temperatures and more, WeatherPro is the most accurate and comprehensive weather app on the market.

Beat the Credit Crunch - Lease your Mac from Hardsoft

Hardsoft are the only 'one stop' solution for the supply and finance of I.T. to businesses throughout the UK via our regional branch offices. We are uniquely both equipment Apple Approved Reseller and licensed Credit Brokers and have tailored a solution which includes a full 3 year warranty and an equipment upgrade every 18 months.


Synology is dedicated to taking full advantage of the latest technologies to bring businesses and home users reliable and affordable ways to centralise data storage, simplify data backup, share and sync files across different platforms, and access data on-the-go. Synology delivers products with forward-thinking features and the high quality technical support.


Samsung Galaxy Note 4 release date, price and specs 2014


iOS 8 features wishlist: the changes iPhone and iPad users want in Apple's iOS 8


25 Years of the World Wide Web: Happy Birthday, Intenet


Developers get access to more Sony camera features

We use cookies to provide you with a better experience. If you continue to use this site, we'll assume you're happy with this. Alternatively, click here to find out how to manage these cookies

hide cookie message