Mozilla / Firefox Only. Live preview borders.html
Why
-- Having multiple borders around things almost always makes them look
better. An example of such a thing would be an inner light - blue border
with an outer black border with a background of a medium - blue. --
How
-- You will need to use a simple CSS "5" --
What
-- You use a border "markup" that works in itself. Meaning if I wanted a
white outer border and a black inner border I would type something like --
#FFF #000;
Really, one div?
-- The example-source uses two divs, but the first one is specifically there
to center everything, it is completely un-necessary and is just there for an
added design point. One div ("BORDER") is all you really do need! --
Source
-- The source file will show a 2PX red, white and blue border with 4PX
spacer, which is "disguised" as the background color (#AAA), it can
also use the NONE specification. --
Code:
<html>
<head>
<title> HAVING ONE DIV WITH MULTIPLE BORDERS </title>
<style>
.BORDER {
BORDER:12PX SOLID #AAA;
-moz-border-bottom-colors:#F00 #F00 #AAA #AAA #AAA #FFF #FFF #AAA #AAA #AAA #00F #00F;
-moz-border-right-colors:#F00 #F00 #AAA #AAA #AAA #FFF #FFF #AAA #AAA #AAA #00F #00F;
-moz-border-left-colors:#F00 #F00 #AAA #AAA #AAA #FFF #FFF #AAA #AAA #AAA #00F #00F;
-moz-border-top-colors:#F00 #F00 #AAA #AAA #AAA #FFF #FFF #AAA #AAA #AAA #00F #00F;
PADDING:30PX 0PX 30PX 0PX;
FONT-FAMILY:GEORGIA;
TEXT-ALIGN:CENTER;
OVERFLOW:HIDDEN;
FONT-SIZE:13PX;
WIDTH:200PX}
</style>
</head>
<body bgcolor="#AAAAAA">
<div align="center"> <br />
<div class="BORDER"> Textile </div>
</div>
</body>
</html>
--V-- COMMENTS --V--
Code:
<!-- The "FIRST" div is not needed, it is there to provide centering -->
<html>
<head>
<title> HAVING ONE DIV WITH MULTIPLE BORDERS </title>
<style>
.BORDER {
BORDER:12PX SOLID #AAA;
/* 12PX being the overall size of the border, you will need to "FILL" this up. */
-moz-border-bottom-colors:#F00 #F00 #AAA #AAA #AAA #FFF #FFF #AAA #AAA #AAA #00F #00F;
-moz-border-right-colors:#F00 #F00 #AAA #AAA #AAA #FFF #FFF #AAA #AAA #AAA #00F #00F;
-moz-border-left-colors:#F00 #F00 #AAA #AAA #AAA #FFF #FFF #AAA #AAA #AAA #00F #00F;
-moz-border-top-colors:#F00 #F00 #AAA #AAA #AAA #FFF #FFF #AAA #AAA #AAA #00F #00F;
/* -------------- Outmost Borders ------- Middle Borders ------- Inmost Borders */
/* ------ The sum of which equal "12" which is the first defined border width. */
PADDING:30PX 0PX 30PX 0PX;
FONT-FAMILY:GEORGIA;
TEXT-ALIGN:CENTER;
OVERFLOW:HIDDEN;
FONT-SIZE:13PX;
WIDTH:200PX}
</style>
</head>
<body bgcolor="#AAAAAA">
<!-- // NOT NEEDED // -->
<div align="center"> <br />
<!-- // NOT NEEDED // -->
<!-- // NEEDED - IS BORDER // -->
<div class="BORDER"> Textile </div>
<!-- \\ NEEDED - IS BORDER \\ -->
<!-- \\ CLOSES CENTERING TAG \\ -->
</div>
<!-- \\ CLOSES CENTERING TAG \\ -->
</body>
</html>
Last edited by KellyAX; 07-21-2009 at 09:17 PM..
|
