Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Crafting transitions in Dreamweaver

From: CSS: Transitions and Transforms

Video: Crafting transitions in Dreamweaver

In this movie, I'll show you the two approaches you can use for enhancing your web pages with CSS Transitions and Transforms. To show you how it works, let's replicate the enhancements we added in two different Chapter 2 movies, animating color changes and growing page elements. I have opened now the about.htm file from the Chapter 6/06_02/about folder, and we are going to start with animating the transitions to our sidebar links as we did in animating color changes.

Crafting transitions in Dreamweaver

In this movie, I'll show you the two approaches you can use for enhancing your web pages with CSS Transitions and Transforms. To show you how it works, let's replicate the enhancements we added in two different Chapter 2 movies, animating color changes and growing page elements. I have opened now the about.htm file from the Chapter 6/06_02/about folder, and we are going to start with animating the transitions to our sidebar links as we did in animating color changes.

And for that, we'll use the more straightforward of the two new Dreamweaver interfaces, that can be found in the updated CSS Rule Definition dialog box. Just to remind you what it is we are looking for, go into Live View here, and here we have a very subtle changeover when I hover over any of the links, you can see a light diagonal pattern appear. I am going to make that more prominent by bringing in this purple background color, keeping it a little transparent, so it will highlight that diagonal striping better.

So first I am going to just click into here, so over in my CSS Styles panel, which I have set in Current mode, I can find the governing rules, and I see I have two of them, one for hover and one for the regular state. Let's work with the regular state first section.info li a. So that's the anchor tag that's in the list item found in the section with a class of info. Now, once I have selected that, I am going to click the Edit Rule button and bring up my CSS Rule Definition dialog box.

Now I am going to go to the very last category, over on the left-hand side, Transition, and this is the panel that has been updated for Dreamweaver CS6. Let's go to the top here. Now I don't want to change, All animatable properties, I just want to change some very specific ones. So I'll deselect this option here. From the Property list I'll click add and choose from the list of, I think there are about 50 different properties here. Luckily the one I'm looking for is right up top, that's background-color.

And once you select your property, the other options become available to you, like we can set a Duration. Let's set that in for three quarters of a second, so .75, and you can see I have an option now to either choose seconds or milliseconds. I don't want any delay for this, we want to have it to happen right away, so I can leave that blank and from the Timing functions list, I have all the available values. Let's go ahead and choose ease, and then I'll click OK. You can see in the Properties pane of the CSS Styles panel that Dreamweaver has not only written out the basic CSS3 transition declaration down here that's highlighted, but it's also generated the vendor specific versions for both Mozilla and Webkit. It's a real timesaver.

If we want to replicate what we did for the Chapter 2 movies, all we actually need to do is to specify a background color for the hover state. So let me go down just a little bit here in my Rules where the hover state lives, and I am going to go through the CSS Rule Definition dialog box again. This time I'll pick on the Background-color option, get my nice little eyedropper and go over and sample the purple there, that's in Roux Academy. Now I want to be able to enter an opacity value or an alpha value, so let's switch it from the hexadecimal format to RGBA, and by opening up the color swatch again and then going to the options, I can choose Color Format > RGBA, and it will translate that for me, and that's fine, I can say OK. And then I can put my cursor into that text field and change the last value, which is the alpha transparency, or opacity, from 1 to .6.

Okay, so that should do it. Let's go ahead and click OK. Now it's already happening, you can see when I hover over the objects, I'm getting a really nice fade in of my Background-color, and when I move away, it fades out, very nice enhancement. Let's tackle something a little more complex, a two-dimensional transform, scale. For this effect, we are going to scroll down a little bit on the page, and we want to scale up these four images on hover to 50% larger than they are now and then add a drop shadow, and we want to do it all over the same duration and with the same timing function.

Dreamweaver handles all these chores in one step through the new CSS Transitions dialog box. To access the dialog box, you go to Window > CSS Transitions, and here you see the CSS Transitions that we just applied in the CSS Rule Definition dialog box. All right, let's click add and the New Transition dialog box appears. Now we want to be able to target a specific rule.

As you can see, if I click on the list, it will show all the rules that are available. The CSS rule that I want is #theArt img. So we are looking for images within the art div. So we want to set the Transition trigger, and we are going to Transition On > hover. Now we have an option for using the same transition for all properties or using a different one for each property. We're going to choose, Use the same transition for all properties.

Now I can put in my Duration, and let's have this happen over half a second, .5. Again, I don't want any delay and Timing Function, we have the same sort of control, let's just choose ease. Now to enter the Property, I will choose the add list, and this time we'll scroll almost all the way down to choose transform, and you may be thinking to yourself, where do I enter in the scaling function? Well, you do it right in the field called End Value. So scale(1.5), that will bring it up 50% larger than what the original is.

And where do we want to create this transition? Well, the only option at this point is main.css, and that's blocked out, but that's exactly what we want. So now let's choose Create Transition, and there you see a little bit of action happening there. If I go over and select it, you can see my hovering is already active. If I click into this, over in the CSS Styles Properties pane, you can see that transform property has been written out for me, including all of the vendor prefixes.

Now let's finish it up by adding a box shadow to the same CSS rule. So I am just going to click on Add Property here, and type in box-shadow, press Tab, and now we'll click on the middle Edit button here, and that will open up a nice little dialog box where I can easily change the values for my presets. Let's make the X-preset 3, Y 3, and the Blur radius 5 pixels. We'll set the Color to black. All right, looks good.

I can click anywhere to close and add that in. All right, so now let's take a look at our page, and we can even actually check the Go to Code and check the rule. Now when we go to code, you see the box-shall rule has been written in, but unfortunately it does not add the vendor prefixes, so let's go ahead and add that in. I'll copy it and paste in box-shadow a couple of times and then add in -webkit, -moz and -o, and let's paste it in one more time and put in -ms.

Okay just to cover our bases completely. So now when I save the page, head back to Design view, and I scroll over any of the images, I do see my nice little box shadow appearing, excellent! And you can see in the CSS Transitions panel my new #theArt img transition has been added, and if I wanted to change any of the properties associated with it, I have got a couple of options. I can go right through the Properties panel here and change, let's say if I wanted to make it 1.35 instead of 1.5, I could make the change there, or if I wanted to add a whole other property to it, I could go ahead and just double-click on the instances, and now the New Transition dialog box becomes Edit Transition. Certain parameters like Target Rule and Transition On are disabled, but other ones are available.

So, like I said, if I wanted to change this to 1.35, I can make that change, save the transition, my code is rewritten and the effect doesn't go up quite as much and impinge over the other areas. So that might actually be better. As you can see, Dreamweaver now gives you access to the full range of properties possible with CSS transitions and transforms right at your fingertips.

Show transcript

This video is part of

Image for CSS: Transitions and Transforms
CSS: Transitions and Transforms

26 video lessons · 15080 viewers

Joseph Lowery
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Transitions and Transforms.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.