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

by

  • 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

Synology

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.

row.get(

Netflix to introduce price increase: New subcribers to start with

row.get(

Apple financial results: iPhones, iPads & Macs sales for Apple's Q2 2014, plus shares to split

row.get(

Twitter - not news

row.get(

See Moo Studios' new animated advert for Blue Moon beer

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