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


X

Email this to a friend

Characters remaining:

  • Step 1: Create a form 1
  • Step 2: Define properties 2
  • 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 slideshow image

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.

Comments

Comments

OnePlus 2 UK release date, price, specification: OP2 confirmed in VR product launch - full OnePlus 2 details

OnePlus 2 UK release date, price, specification: OP2 confirmed in VR product launch - full OnePlus…

Why Vodafone’s frequency choice should interest you: The benefits of 800MHz

Why Vodafone’s frequency choice should interest you: The benefits of 800MHz

Motoman robots: from killing The Terminator to samurai swordmanship

Motoman robots: from killing The Terminator to samurai swordmanship

Why Apple's being criticised for everything, even the good things

Why Apple's being criticised for everything, even the good things