logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Autism Spectrum Disorders: 4:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Particle System - Emitter Shape Parameters

Motion Particle Systems - Introduction

Particle Fog in Motion 5 - Scene Graphics

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor