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

Should I upgrade to Windows 10? Why upgrade to Windows 10? Is Windows 10 good? The pros and cons of upgrading from Windows 7 or Windows 8 | Free upgrade to Windows 10 ends today 29 July!

Should I upgrade to Windows 10? Why upgrade to Windows 10? Is Windows 10 good? The pros and cons of!...…

1995-2015: How technology has changed the world in 20 years

1995-2015: How technology has changed the world in 20 years

Illustrator Rachel Lillie discusses how she draws, and the beauty of quietness

Illustrator Rachel Lillie discusses how she draws, and the beauty of quietness

macOS Sierra vs Windows 10 comparison: Apple and Microsoft's latest OS releases go head to head | Mac vs PC

macOS Sierra vs Windows 10 comparison: Apple and Microsoft's latest OS releases go head to head |…