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


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

Market Place

synology.com

Founded in 2000, Synology is dedicated to developing high-performance, reliable, versatile, and environmentally-friendly Network Attached Storage (NAS) servers for home and business users. To see their full product portfolio visit

Nexus 6 vs Sony Xperia Z3 comparison: Lollipop phablet takes on KitKat flagship smartphone

Nexus 6 vs Sony Xperia Z3 comparison: Lollipop phablet takes on KitKat flagship smartphone

Why people aren't upgrading to iOS 8: new features are for power users, not the average Joe

Why people aren't upgrading to iOS 8: new features are for power users, not the average Joe

Free rocket & space sounds: NASA launches archive of interstellar audio on SoundCloud

Free rocket & space sounds: NASA launches archive of interstellar audio on SoundCloud

iPad Air 2 review: Insanely fast and alarmingly thin. Speed tests, camera tests, beautiful photography and more

iPad Air 2 review: Insanely fast and alarmingly thin. Speed tests, camera tests, beautiful...

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