Flexi CSS Layouts for Dreamweaver

Download a free trial of   Flexi CSS Layouts for Dreamweaver
Buy Flexi CSS Layouts for Dreamweaver
Download Flexi CSS Layouts trial
See video Flexi CSS Layouts
box Flexi CSS Layouts for Dreamweaver

Flexi CSS Layouts is a Dreamweaver Extension that helps you create browser compliant table-less web pages with ease. Unlike other products that are limited to templated CSS layouts with 1, 2 or 3 columns, with Flexi CSS Layouts for Dreamweaver you can build your own custom layout structure without coding.

Not only that you can create fixed, liquid or elastic layouts in seconds, but you can generate custom website sections with unlimited DIV levels, following even the most detailed mock-ups from your designer.


Special offer

Flexi CSS Layouts documentation

CSS3 rounded corners and gradient background color

Starting version 1.1.276, Flexi CSS Layouts comes with rounded corners and background color gradient - CSS3 features.

Browser compatibility for the CSS3 features

Flexi CSS Layouts embedded CSS3 rounded corners are compatible with Opera 10.5+, Safari/Chrome 3+, Firefox 1+ and IE 9+ For the non compatible browsers, the rounded corners functionality will be ignored.

Flexi CSS Layouts embedded CSS3 background gradient feature is only compatible with FF 3.6+, Chrome/Safari 4+ The non compatible browsers will ignore the gradient settings.

How to create CSS3 rounded corners with the Flexi CSS Layouts

Rounded corners can be applied to any cell inside the design that has a border. Select a cell from the layout view and from the right panel go to "Borders/Padding/Margins" and set the border: let's say 1px black on all sides.

Set the border

Click on the rounded corners button and set the radius for each corner. Note: the background color of the part outside the rounded corner will have the background color of the cell's parent.

Setting the border radius

How to set CSS3 background color gradient in Flexi CSS Layouts

Just like you do for the rounded corners, you have to select a cell in the layout view and from the right General panel, click on Set Gradient:

Click on Set Gradient


In the pop-up you can chose the gradient direction (vertical, horizontal, left-top to right-bottom and left-bottom to right-top)

Set Gradient Pop up

Using the markers you can select the colors for the gradient and the transparency next to the color selector on the right

Set Gradient Colors

Download Flexi CSS Layouts for Dreamweaver trial
  • Adobe Dreamweaver CS3
  • Adobe Dreamweaver CS4
  • Adobe Dreamweaver CS5
  • Adobe Dreamweaver CS5.5
  • Adobe Dreamweaver CS6