Dreamweaver tutorial: Use CSS3 transitions for form highlights in Dreamweaver CS6

CSS3 transitions can be fiddly to hand-code from scratch, but Dreamweaver CS6 makes it easier.

Intro


CSS transitions can be fiddly to hand-code from scratch, so Dreamweaver’s straightforward form-oriented workflow will be as welcome to dedicated hand-coders as to less technically inclined web designers.

Let's find out how it works.

Step 1

STEP 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

STEP 2

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

Advertisement. Article continues below

Step 3

STEP 3

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.


Craig Grannell

STEP 4

Craig Grannell is a designer and writer.