g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Low Carb: 8:00 PM

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


CSS3 Transitions in Dreamweaver CS6

With the addition of HTML5 and CSS3, interactive websites are becoming the expected. Now, with DreamweaverR CS6 and the new CSS Transitions panel, you can create your own interactive effects without the need to write any code. The output from this process is CSS3 only, with no JavaScript. Therefore, you don't need to worry if the viewer has enabled JavaScript. The transitions created by Dreamweaver can play in any modern web browser.

Let's see how easy it is to create our own interactive transitions. The transition can be applied to any class, ID or CSS element. All we need to do is set the values in the CSS Transitions panel.

  1. Our first step is to select the element to which we wish to apply the transition. In our example it will be a menu link.

  2. Click Window - CSS Transitions to open the panel.

  3. In the CSS Transitions panel, click the Plus sign to add a transition.

  4. In the New Transition dialog box, we can use the Target Rule menu to choose from the presets or type in our own name for the transition. Let's type in the name .morph.

  5. Next we need to choose the action that will trigger the transition. From the Transition On menu, choose Hover so that the transition will trigger when we place our mouse over the link. Other choices include: active, checked, disabled, enabled, focus, hover, indeterminate and target.

  6. For the Menu Option, we have two choices. Let's choose the first.

    Use the same transition for all properties
    Use a different transition for each property

  7. For the Duration and Delay of the transition, we can use Seconds or Milliseconds. Let's set the Duration to 1 second and the Delay to .05 second.

  8. For the Timing Function, we have several easing choices. Let's choose Ease Out.

  9. To add a CSS Property, click the Plus sign and choose one from the pop-up list. Let's choose Background-Color.

  10. Once we have chosen a Property we can set the End Value for the transition. Depending on the Property we have chosen, the End Value menu will give us the corresponding menu for that Property. For the Background-Color we get the Color Picker. If we add the Font-Weight property, we get a menu of preset weights.

  11. Finally we need to choose Where to Create the Transition. Our choices are This document only or New Style Sheet File. Let's use the first.

Once we click the Create Transition button, we can see that the transition has been listed in the CSS Transitions panel, indicating that the morph transition will be triggered by the hover action and applied to the a.morph target.

If we check the code view, we see the morph class has been added to the link.

When we pass our mouse over the link in Live view, the background color will change.

But what if we needed to edit the transition? We can do this via the CSS Transitions panel.

  1. Select the a.morph transition and the Edit icon will become active (pencil icon).

  2. Click the Edit icon to open the Edit Transition dialog box. Here we can change the values as needed or add a new Property and End Value.

Now that we have the morph transition created, we can easily apply it to other elements because it is now available from the Target Rule menu.

*Adobe provided a copy of this software to me for review purposes.

Join us in the Flash forum. | Join us in the Digital Art and Design forum.


Add CSS3+Transitions+in+Dreamweaver+CS6 to Twitter Add CSS3+Transitions+in+Dreamweaver+CS6 to Facebook Add CSS3+Transitions+in+Dreamweaver+CS6 to MySpace Add CSS3+Transitions+in+Dreamweaver+CS6 to Del.icio.us Digg CSS3+Transitions+in+Dreamweaver+CS6 Add CSS3+Transitions+in+Dreamweaver+CS6 to Yahoo My Web Add CSS3+Transitions+in+Dreamweaver+CS6 to Google Bookmarks Add CSS3+Transitions+in+Dreamweaver+CS6 to Stumbleupon Add CSS3+Transitions+in+Dreamweaver+CS6 to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor