Jun '10

Using CSS3 with Dreamweaver CS5

While I truly am excited by the new semantic elements in HTML5, as well as the possibilities that things like local storage will do for expanding the capabilities of websites, I have to admit that I’m really much more excited by the shiny new toys in CSS3. And, of course, with the recently released HTML5 pack for Dreamweaver CS5, I no longer have to “try” to remember the new CSS3 properties – I get them all with lovely code-hinting and code-completion right within Dreamweaver CS5.

In the following video, I show you how to use some of the really popular new properties – like using border-radius to add rounded corners, transform to rotate elements and transitions to create the illusion of an animated rollover.

There is a definite caveat that I want to make sure to mention – since CSS3 (and HTML5, of course) is still being developed, not all of the CSS3 properties are available in Dreamweaver CS5 (and in Live View some properties do not render). But even with that caveat, Dreamweaver CS5 now really rocks with CSS3. And again, if you’ve not looked at Dreamweaver lately, you can always download a 30-day trial.


8 Responses to “Using CSS3 with Dreamweaver CS5”

  1. Giles Says:

    Really enjoying the HTML5/CSS3 videos, impatient for the next. Hurry hurry!!!

  2. SG Says:

    Excellent video, thanks!

  3. Wendy Tyrrell Says:

    Completely awesome. Wish I hadn’t bought CS4 only just last December.

  4. Goblin Ink Says:

    OH Thank You!! Just getting started and wanted to understand the CSS3 transitions. This was exactly what I needed. Thank you so much! *bookmarked*

  5. Goblin Ink Says:

    Also, (and I AM new to all of this) why do the transitions not work with the click function. I want an image to move and another to expand from a fixed side. Is this possible using CSS?

  6. Kathryn Hathaway Says:

    Just wondering if you’ve been able to implement html5 or css3 with this WordPress blog?

  7. Greg Says:

    CSS3 Transitions and Transforms are only triggered by :hover and :focus. You can use Javascript to trigger the transform/transition by capturing any event available to JS such as click.

  8. Budi Says:

    I make website with dreamweaver and combine between css 2.1 with css3 I have error message when try to validate “Property border-radius doesn’t exist in CSS level 2.1 but exists in [css3] : 10px ” how do I fixing this problem? thanks sir

Leave a Reply