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

  • dw wt 1 Step 1: Create a form 1
  • dw wt 2 Step 2: Define properties 2
  • dw wt 3 Step 3: Test your work 3
  • More stories
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 Step »

Next Prev dw wt 1

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’.

 

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.)

 

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.

Elsewhere on IDG sites
Huawei MateBook X Pro (2019) review

Huawei MateBook X Pro (2019) review

Nvidia’s Gaugan tech turns simple colour blocks into realistic landscapes

Nvidia’s Gaugan tech turns simple colour blocks into realistic landscapes

New iMac 2019 launch: Release date, price, features & specs

New iMac 2019 launch: Release date, price, features & specs

Les meilleurs smartphones Xiaomi (2019)

Les meilleurs smartphones Xiaomi (2019)