Click on any phrase to play the video from that point.
[ADOBE DREAMWEAVER CS5.5 CSS3 AUTHORING]
Hi, I'm Scott Fegette, senior product manager for Dreamweaver.
This video I'd like to talk a little bit about the CSS3 support
that we've added to Dreamweaver CS5.5.
It's very common today to see client requirements
for things like small rotated objects,
rounded corners, transparency and the like.
In the past, these were effects that you really needed to do over in Photoshop,
usually bake into an image, and then bring into Dreamweaver and import.
But now in CSS3 a lot of these features are now available
in good old markup in CSS.
So we can simply do a lot of this right in the CSS panel, much like we're used to.
In this case, let's go ahead and take a look at some of what we've got going on.
We've got a rule here called equal height that's been applied to all three of these columns.
And you can see that we've been able to add the new CSS3 border-radius property to it
to give it a nice 10-pixel corner.
For any of these new properties in Dreamweaver CS5.5
that require multiple properties to define,
we've given a little pop-up into the CSS panel
so that you can actually do some real-time manipulation.
Say we want a little bit rounder corner.
We just tap in 20, and we can see it pop up right in real time.
So there is a direct connection between what's happening in the CSS panel
and Live View at all times, so you can make really quick visual changes over here
and see them updated immediately.
For example, RGBa is another really killer feature in CSS3
that we now have access to
which lets us do some fun things like take this white color
and notice it's 255,255,255,1.
That's basically a way of saying truly opaque white.
But if we want to back off that opacity a little bit, let's just create a 0.8 opacity.
And click out of it.
You'll see that we've added a nice semi-transparent effect
to these top headers of these columns--
again, an effect that we would have had to do with images
and probably some very careful placement in the past.
So along with this we can also--
If you don't want to work in the CSS panel,
we can take this and go right into code.
Let me just do a quick jump over to our Code window.
We'll hop and split down here.
All of this is available within code hinting as well.
So for example, if we want to go ahead and make some quick changes,
we've added the border-radius of 20 pixels,
but we might want this to also work in WebKit and Mozilla.
So we'll go ahead, type a dash, and we get WebKit.
From here we can go down to border-radius.
Let's tab down to that one.
And let's just go add in 20 pixels and close it.
It's just as easy for us to go ahead and add the Mozilla one by typing the M,
[keys clicking]
border. [keys clicking]
There is border-radius. And 20 pixels.
And now we're set up to watch the CSS3 effect
work across all the browsers independently.
You saw the code hinting here for the selectors,
but you can get to all the CSS3 selectors directly within code hinting as well,
and this should be incredibly handy for helping you take some of those image set features
and really bake them right into CSS and HTML the way Web designers like to work.
So we hope you enjoyed this little peek into some of the new CSS3 features
that you can now get to within Dreamweaver CS5.5.
I hope you enjoy working with them.
[ADOBE TV - tv.adobe.com]
