You are not logged in.

#1 11 Mar 2008 2:59 pm

Butcher
Moderator
From: Norway
Registered: Jul 2006
Posts: 308

Advanced borders

I am trying to get a "fancy" border around a box, now bordering a box using simple CSS is easy enough, but this border is unique. Using the glowing edges technique in photoshop (ain't very advanced, I know), I made this:

http://www.bamboocommandos.com/border.jpg

But I need to replicate the border so that it can be used around the box (notice that the border is gradiently transparent in the corners). I could do it with the standard 3 by 3 html table cells, but it looks bad because the all the sides are affected by the corners transparency, which goes a little into what would be the left, right, top and bottom pictures.

Any suggestions on how? If Adobe made it for photoshop, there must be some way to do it again elsewhere.


http://bamboocommandos.com/butcher_img/butchersig7.jpg

Offline

 

#2 11 Mar 2008 8:32 pm

MadHatter
Administrator
From: Dallas TX
Registered: Jun 2006
Posts: 529
Website

Re: Advanced borders

css doesnt support effects like a gradient or glowing borders.  you can create a box w/ a (solid, dotted, or dashed) border in css though.

one way that is often done in css is to create a div w/ a background image (which would be the black box on a black background).

in theory you could wrap multiple divs blocks with different width border's that create the fake gradient (the more divs you add, the better your gradient will look, but it won't be transparent):

Code:

<html>
    <head>
        <style>
        body {
            background-color:#000;
        }
        div#inner {
            position: relative;
            border: 2px #550000 solid;
            width: 500px;
            height: 100px;
        }
        div#middle {
            position: relative;
            border: 3px #330000 solid;
            width: 504px;
        }
        div#outter {
            position: relative;
            border: 4px #110000 solid;
            width: 510px;
            margin: auto;
        }
        </style>
    </head>
    <body>
        <div id="outter">
            <div id="middle">
                <div id="inner">            
                </div>
            </div>
        </div>
    </body>
</html>

another way (very hackish though) is to apply a transparencies to div blocks, and stack them up.  this requires you placing divs absolutely (not good for generic layout) but should give you a bit better effect.  unfortunately transparency is not CSS compliant, but every browser supports it (though it makes your css ugly, and you're better off putting your css in a php file, and only sending the css supported by the actual browser). -moz-opacity is the gecko transparency property, -khtml-opacity is the konquer / safari transparency property, opacity is the opera transparency property, and filter:alpha(opacity=n) makes transparency work in IE.

here's what that would look like:

Code:

<html>
    <head>
        <style>
            body { background-color: #000; }
            div#inner, div#mid, div#outter { 
                position: absolute; 
                border: 2px #330000 solid;
                left: 10px; 
                top: 10px; 
            }
            div#inner {
                height: 100px; 
                width: 500px; 
                margin: 4px;               
            }
            div#mid {
                height: 104px; 
                width: 504px;
                margin: 2px;
                -moz-opacity: .50;
                -khtml-opacity: .50;
                opacity: .50;
                filter:alpha(opacity=50);
            }
            div#outter {
                height: 108px; 
                width: 508px;
                -moz-opacity: .20;
                -khtml-opacity: .20;
                opacity: .20;
                filter:alpha(opacity=20); 
            }            
        </style>
    </head>
    <body>
        <div id="outter"></div>
        <div id="mid"></div>
        <div id="inner"></div>
    </body>
</html>

notice that the divs are stacked, and we position them relatively.  with this method though, it will actually do the blending based on the background color.


now the image shown has rounded corners, and there are hacks out there that add more html code to your html, but mozilla supports rounded corners natively (its own css, the -moz-... properties, for an example of that, look at the css for this site http://sanity-free.org/main.css look for the .nicetitle classes).

Offline

 

#3 12 Mar 2008 4:35 am

Butcher
Moderator
From: Norway
Registered: Jul 2006
Posts: 308

Re: Advanced borders

Hmm, using solid pictures seem as a better way due to the quality of the border... but can I align pictures around a box using CSS, or should I do it with the horrid html tables? Cause this border looks very special due to it getting gradiently lower towards the corner, and maintaining the lines in the corners themselves.


http://bamboocommandos.com/butcher_img/butchersig7.jpg

Offline

 

#4 12 Mar 2008 7:29 am

MadHatter
Administrator
From: Dallas TX
Registered: Jun 2006
Posts: 529
Website

Re: Advanced borders

even transparent images have problems in some browsers (*cough* IE *cough*).  if you're just chopping up the image to put inside a div then you'd be fine but it won't size.

Code:

<html>
    <head>
        <style>
            body { background-color: #000; }
            .box {
                background-image: url(/path/to/box/image.jpg);
                background-position: top left;
                background-repeat: no-repeat;
                width: 500px;
                height: 70px;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

Offline

 

#5 17 Mar 2008 5:07 pm

Butcher
Moderator
From: Norway
Registered: Jul 2006
Posts: 308

Re: Advanced borders

CSS very well compare to the 4 hot dogs I at once, they were three weeks old and just got me to the edge of puking over my TV. My mind even cannot work together with CSS; for less obvious reasons, everytime I make a website, my head goes into table mode and start thinking about how this table and this table fit together. So, I more or less use CSS to keep all borders and colors the same, and certain margins and paddings here and there.

To make it more efficient I use PHP to use variables to save the color code (each color has it's own variable), it really makes me wonder, whatever the hell happened to good old "save the colors in the database" system, like phpBB2 uses? Started with phpBB3 recently, and it's all CSS (ALL THE TIME!), with a milelong file with colors (repeated over and over), which can only be edited through a webbrowser (they open the file and let you edit it in the browser, but when you try to do it manually, all the line endings naturally ended up as their windows formatted partners, squares).

And the more I think about it, the more I realize that CSS is photoshop; you can place it anywhere, over and under anything, as far or close away as you want. But even when designing a website in photoshop, I never go over the top making ridiculous boxes in the middle of the page, just because I can, the website will always be as functional as it can, and that is easily as achievable using tables as it is using CSS (or more easily).

And that, was my hatespeech for CSS, god knows why I wrote it.


http://bamboocommandos.com/butcher_img/butchersig7.jpg

Offline

 

#6 19 Mar 2008 7:01 pm

Butcher
Moderator
From: Norway
Registered: Jul 2006
Posts: 308

Re: Advanced borders

You know like you have these fancy boxes that pop up when you hover a link on this site, and there are like those regular boxes that pop up with the full address of the link? How do people get like a piece of text above the full address part in the standard hoved thing? I would imagine creating it manually would be using CSS hover attributes, but I am pretty sure it is browser specific, and can be done with simpler means, like HTML, but I can't find the code for it (nor what to google for).

Any ideas?


http://bamboocommandos.com/butcher_img/butchersig7.jpg

Offline

 

#7 20 Mar 2008 7:30 am

MadHatter
Administrator
From: Dallas TX
Registered: Jun 2006
Posts: 529
Website

Re: Advanced borders

the fancy boxes I have here are a script called nice titles.  you basically add a title="text" attribute to links, and alt="text" to images, and the script does the rest.

Offline

 

#8 20 Mar 2008 8:53 am

Butcher
Moderator
From: Norway
Registered: Jul 2006
Posts: 308

Re: Advanced borders

Works just the way I wanted when I add the title part to the link, thanks big_smile


http://bamboocommandos.com/butcher_img/butchersig7.jpg

Offline

 



© 2003 - 2017 NullFX
Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License