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.

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

Output Compatibility

ABOUT US

We create Dreamweaver extensions (also known as add-ons) that ease the work of web designers and web developers.
Our tools extend the functionality of Dreamweaver (CS4, CS5 CS5.5, CS6, CC and CC 2014.1) bringing new features, optimizing the development and increasing the productivity for both beginners and advanced users.