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

WIN a home entertainment system with Synology and Jupiter Ascending, in cinemas February 6 2015. Visit HERE to enter

Three of the most expensive Limited Edition games ever made: Who's buying a $1,000,000 game?

Three of the most expensive Limited Edition games ever made: Who's buying a $1,000,000 game?

Co-op's Easter egg promo site is an Apple parody

Co-op's Easter egg promo site is an Apple parody

Best Mac: Apple Mac buyers guide for 2015: iMac, MacBook, MacBook Air, MacBook Pro, Mac mini and Mac Pro buying advice

Best Mac: Apple Mac buyers guide for 2015: iMac, MacBook, MacBook Air, MacBook Pro, Mac mini and...

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