custom css borders?

I've tried using the borders which can be created by using the CSS dialog,
but I'm not especially happy with them. Is there a way to customize them a
bit more? For instance, if I want to create a raised border that has a flat
"top" the same color as the background color, and choose specific colors and
pixel dimensions for the shadow and highlight areas, can it be done?

When I look for the source code defining the border style I create it
doesn't seem to have any way of handling these details. All I can find is a
snippet such as:

}
..borders1 {
border: 4px ridge #E8FFF1;

Where are the details defined, and can I change them?

.oO(J Fraze)

I've tried using the borders which can be created by using the CSS dialog,
but I'm not especially happy with them. Is there a way to customize them a
bit more? For instance, if I want to create a raised border that has a flat
"top" the same color as the background color, and choose specific colors and
pixel dimensions for the shadow and highlight areas, can it be done?

See

8.5.3 Border style: [...]
http://www.w3.org/TR/CSS2/box.html#border-style-properties

for the available styles. For more complicated borders you have to used
nested elements (each with its own border-style) or images.

Micha

In other words, the answer seems to be no.

I gather the browser interprets the simple code as it sees fit, and that's
all there is to it.

----------
In article <hcsod0hecum4366su846s9i6b0scdmmmq2 (AT) 4ax (DOT) com>, Michael Fesser
<netizen (AT) gmx (DOT) net> wrote:

.oO(J Fraze)

I've tried using the borders which can be created by using the CSS dialog,
but I'm not especially happy with them. Is there a way to customize them a
bit more? For instance, if I want to create a raised border that has a flat
"top" the same color as the background color, and choose specific colors and
pixel dimensions for the shadow and highlight areas, can it be done?

See

8.5.3 Border style: [...]
http://www.w3.org/TR/CSS2/box.html#border-style-properties

for the available styles. For more complicated borders you have to used
nested elements (each with its own border-style) or images.

Micha

J Fraze wrote:

In other words, the answer seems to be no.

I gather the browser interprets the simple code as it sees fit, and that's
all there is to it.

----------
In article <hcsod0hecum4366su846s9i6b0scdmmmq2 (AT) 4ax (DOT) com>, Michael Fesser
netizen (AT) gmx (DOT) net> wrote:

Don't know if it's the best solution, but one solution is to nest divs
with slightly different sizes and colors or shades inside one another to
appear as though 3 dimensional. I had hand coded picture frames like
this but not tried it in dreamweaver.

J Fraze wrote:

I've tried using the borders which can be created by using the CSS
dialog, but I'm not especially happy with them. Is there a way to
customize them a bit more? For instance, if I want to create a raised
border that has a flat "top" the same color as the background color,
and choose specific colors and pixel dimensions for the shadow and
highlight areas, can it be done?

When I look for the source code defining the border style I create it
doesn't seem to have any way of handling these details. All I can
find is a snippet such as:

}
.borders1 {
border: 4px ridge #E8FFF1;

Where are the details defined, and can I change them?

you can use (change colours to suit)

{border-top:1px solid #E8FFF1;
border-right:1px solid #FFFFFF;
border-left: 1px solid #009966;
border-bottom: 1px solid #006699;
}

giving a different color to a side can give you a 'sort of' 3 dimensional
look

--
Nadia
-----------------
*Free Templates *Dropdown Menu Templates*
http://www.DreamweaverResources.com
*Templates - HTML and CSS Validated *
*Free Nav Bar Sets*
*Resources : Ecommerce : SEO Articles*
-----------------
: Macromedia (MM) Technotes:
http://www.macromedia.com/support/search/
-----------------
:Flexible Table Tutorial:
http://www.dwfaq.com/Tutorials/Tables/flexible_tables.asp
-----------------
:Search the group:
http://groups.google.com/advanced_group_search?q=+group:macromedia.dreamwea ver

In other words, the answer seems to be no.

I gather the browser interprets the simple code as it sees fit, and
that's all there is to it.

Yes and no.

It depends on the exact effect you are trying to achieve. There's no magical
single line of code to achieve complex beautiful effects but you can achieve
a lot with some imagination knowing how the browser reads the code.

e.g. table borders and table cells can each be assigned different colours
and styles.
So you could apply a dark colour to a table border, a lighter colour to the
table cell border and create a subtle bevelled effect similar to Microsoft
UI's.

If you go further and nest a few other elements e.g. several tables or
div's, each can have its own unique border colour, thickness and style and
you can emulate certain 3D effects.

One tip I've found useful is to take a screenshot of a screen effect you
like and import it into an image editor then zoom right in (say 1600%) and
see how the screen pixels are coloured to form the effect. From there you
can construct some CSS and HTML to emulate it.

HTH

--
Regards

John Waller

Thanks Nadia and John for your replies. Very helpful!

----------
In article <cbjbmq$qi0$1 (AT) forums (DOT) macromedia.com>, "John Waller"
<johnw (AT) REMOVETHISpinnacleweb (DOT) com.au> wrote:

In other words, the answer seems to be no.

I gather the browser interprets the simple code as it sees fit, and
that's all there is to it.

Yes and no.

It depends on the exact effect you are trying to achieve. There's no magical
single line of code to achieve complex beautiful effects but you can achieve
a lot with some imagination knowing how the browser reads the code.

e.g. table borders and table cells can each be assigned different colours
and styles.
So you could apply a dark colour to a table border, a lighter colour to the
table cell border and create a subtle bevelled effect similar to Microsoft
UI's.

If you go further and nest a few other elements e.g. several tables or
div's, each can have its own unique border colour, thickness and style and
you can emulate certain 3D effects.

One tip I've found useful is to take a screenshot of a screen effect you
like and import it into an image editor then zoom right in (say 1600%) and
see how the screen pixels are coloured to form the effect. From there you
can construct some CSS and HTML to emulate it.

HTH

--
Regards

John Waller

J Fraze wrote:

Thanks Nadia and John for your replies. Very helpful!

You're welcome.


--
Nadia
-----------------
*Free Templates *Dropdown Menu Templates*
http://www.DreamweaverResources.com
*Templates - HTML and CSS Validated *
*Free Nav Bar Sets*
*Resources : Ecommerce : SEO Articles*
-----------------