Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Column Composer Magic CSS3 Effects

PVII is the leader in creative extensions for Dreamweaver.

CCM Tutorials and Videos Home

The CSS rules illustrated in this tutorial are based on the Style Theme 01 (Classic) CSS file. Each rule begins with .p7ccm01. If you are editing Style Theme 02 (Carbon), the rules would begin with .p7ccm02.

CSS rounded corners

We use CSS border-radius to round corners.

Note: CSS3 border-radius is supported by modern browsers including Firefox, Opera , Safari, Chrome, and IE9. Older browsers default to rectangular corners.

border-radius syntax

Consider the declaration:
border-radius: 6px;

It creates a 6px radius curve at all 4 corners, which is expressed with a single value.

Tip: To increase the amount of curve, increase the radius value. To decrease the curve, reduce it.

You can also set a unique radius for each corner of an element. The border-radius property allows for 4 separate values, one for each corner. The values are expressed starting with the top-left and moving clockwise to the top-right, the bottom-right, and the bottom-left. While we don't use this technique in CCM, it can come in handy for you in other projects.


border-radius: 10px 20px 0px 40px;


border-radius: 10px 10px 0px 0px;


border-radius: 30px 0 0 30px;

In Column Composer Magic, border-radius for the outermost container is declared on this rule:

.p7ccm01-rounded {
border-radius: 5px;
}

Non-Microsoft browsers do not contain the radius of a nested element inside a parent with rounded corners. To work around this, border-radius is assigned to the rows and columns inside your structure, using these rules:

For the Rows:

.p7ccm01-content-row.p7ccm01-top-rounded {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.p7ccm01-content-row.p7ccm01-bottom-rounded {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}

For the columns:

.p7ccm01-2col-auto-column2-cnt.p7ccm01-content.p7ccm01-top-rounded {
border-top-right-radius: 4px;
}
.p7ccm01-2col-auto-column2-cnt.p7ccm01-content.p7ccm01-bottom-rounded {
border-bottom-right-radius: 4px;
}

Radius on the inner elements is always set 1px less than the radius on the outermost element.

CSS shadows

The box-shadow property is extremely powerful and far more nuanced than border-radius. We'll cover some basics. For additional insight, we recommend reading the W3C specification.

Consider this simple rule:

.theDIV {
box-shadow: 10px 10px 20px #000;
}

The values represent:

box-shadow: horizontal offset | vertical offset | blur | color

Don't forget the browser-specific property name for Safari browsers.

You can also declare multiple shadows for an element. For instance, use a regular shadow, followed by an inset shadow to create a bevel effect.

The 2 shadows are separated by a comma:
box-shadow: 0px 0px 50px #999, inset -3px 20px 40px #C05A5A;

Shadows on CCM elements

The shadow option for the outermost structure is set via this rule:

.p7ccm01-outer-shadow {
box-shadow: 0px 0px 20px #444;
}

Inner row shadows are set with this rule:

.p7ccm01-content-row.p7ccm01-row-inner-shadow {
box-shadow: inset 0px 0px 20px #999;
}

Inner column shadows are set with this rule:

.p7ccm01-content-inner-shadow {
box-shadow: inset 0px 0px 40px #E1C095;
}

Editing and determining RGBA colors

The following procdures will enable you to convert HEX colors to RGBA in Dreamweaver CS5 and under. Dreamweaver CS5.5 and up have native support for RGBA built in.

RGBA stands for Red-Green-Blue-Alpha. Each value is separated by a comma. The alpha value allows you to set a transparency level for the element being colored—be it a background color, a text color, or a border color. White (255, 255, 255) and black (0, 0, 0) are easy. Dreamweaver can help you to determine the RGB values using its standard color picker tool.

In your CSS Styles panel, select the rule you want to edit. Start by assigning a Hex color. Let's say #6C6. Open the color picker. Then click the System Color Picker icon:

The System Color Picker will open:

Your RGB numbers are listed as the Red, Green, Blue values: 102, 204, 102. So change your color value to:

rgba(102,204,102,1);

Remember, the "1" at the end is the alpha value and means your color is fully opaque (no transparency). To set transparency, choose a decimal value between 1 and 0. For example, to set 50% transparency, your values would be:

rgba(102,204,102,.5);

RGBA colors in CCM

For the content rows, color is set on this rule:

.p7ccm01-content-row.p7ccm01-RGBA {
background: rgba(255,255,255,.80);
}

A fallback color for older browsers is not necessary here because because the undelying structure is white. For elements assigned the accent or contrast color options, a fallback is used. The first rule below contains a background-color declaration which old browsers understand.

.p7ccm01-content-row.p7ccm01-contrast {
background-color: #A5A5A5;
}

The following rule contains a background declaration using RGBA for modern browsers. The value is equivalent to the conventional hex value in the fallback rule.

.p7ccm01-content-row.p7ccm01-contrast.p7ccm01-RGBA {
background: rgba(165,165,165,.85);
}

Sidebar colors

For the column configurations that have sidebars we've assigned background color to them. This rule is an example:

.p7ccm01-2col-sidebar-left-column2 .p7ccm01-content {
background-color: #DCDCDC;
background: rgba(220,220,220,.5);
}

The first declaration is the fallback color for old browsers and the second is for modern browsers.

Get to know your CSS file

The naming convention used for class names was chosen to allow you to quickly relate the class to its relevant structural element. When experimenting with box-shadow, border-radius, and RGBA colors, it is a good idea to go through the CSS file using Dreamweaver's Find and Replace feature to locate all instances of a property name. Open the CSS file itself (not the CSS styles panel). Dreamweaver has only a Code View for CSS files:

Locate the first instance of box-shadow

Right-click and choose Find and Replace:

The Find and Replace dialog will open and box-shadow will be entered for you in the Find box.

You are not replacing anything here, so you simply want to click the Find Next button, which will locate all instances of box-shadow in the file. You can keep the Find and Replace dialog open while editing a rule.