Page 1 of 1
Really nice borders on this game...
Posted: Mon Oct 18, 2010 9:17 am
by Callan S.
I really like the borders on the table of this game
http://kingdoms-game.com/
I've looked at the source and since I'm not very good at html or css, I'm not really seeing how it's done. If it sounds to simple a question, oh well, but any help on the actual html or CSS to do it is appreciated. It's a really nice border!
Re: Really nice borders on this game...
Posted: Mon Oct 18, 2010 1:50 pm
by hallsofvallhalla
yes nice border
Code: Select all
<div id="border-top"><div id="border-left"><div id="border-bottom"><div id="border-right" style="position: relative;">
<div style="right:0px; top: 0px; position: absolute">
<img src="/static/images/layout/corner.png">
</div>
<div style="left:0px; top: 0px; position: absolute">
<img src="/static/images/layout/corner.png">
</div>
<div style="bottom:0px; left: 0px; position: absolute">
<img src="/static/images/layout/corner.png">
</div>
<div style="bottom:0px; right:0px; position: absolute">
<img src="/static/images/layout/corner.png">
</div>
<div id="content-inner">
Re: Really nice borders on this game...
Posted: Tue Oct 19, 2010 12:41 am
by Callan S.
Hi Halls,
I spotted that bit, but couldn't make heads nor tails of it - it only seems to refer to the corner pieces for the graphics? Is there some sort of CSS connection that I'm not getting? With those divs?
Re: Really nice borders on this game...
Posted: Tue Oct 19, 2010 7:07 am
by Chris
CSS3 is coming with border-image. Most browsers already support it:
http://www.css3.info/preview/border-image/
Re: Really nice borders on this game...
Posted: Wed Oct 20, 2010 2:24 am
by Callan S.
Thanks Chris,
The thing is there, that game shows the nice border in internet explorer and that CSS3 border doesn't work in IE. Though I grant that CSS3 will likely become the standard, I'm still wondering how they do that nice border in IE as well.
Re: Really nice borders on this game...
Posted: Thu Oct 21, 2010 11:51 pm
by Ravinos
When I need need to to border backgrounds i do the <div> method Halls posted. If you really want a low tech way you can use tables to make them lol
I can't wait for CSS3 to become standard on all browsers. It's about time they had a border-image option.
Re: Really nice borders on this game...
Posted: Fri Oct 22, 2010 8:34 am
by Callan S.
Ah, I think I get how it works now - had to go investigating for a bit...
CSS, something like
Code: Select all
#content-outer {
width: 83%;
height: auto;
min-height: 250px;
float: left;
margin-left: 15px;
background-image:url('bggrey.png');
}
#content-inner {
padding: 25px;
height: auto;
min-height: 250px;
}
#border-left {
background:
url(bordleft.png)
top left repeat-y;
}
#border-right {
background:
url(bordright.png)
top right repeat-y;
}
#border-bottom {
background:
url(bordtop.png)
bottom left repeat-x;
}
#border-top {
background:
url(bordtop.png)
top left repeat-x;
HTML something like
Code: Select all
<link href="style.css" rel="stylesheet" type="text/css" />
<div id="content-outer" class="main" style="">
<div id="border-top"><div id="border-left"><div id="border-bottom"><div id="border-right" style="position: relative;">
<div style="right:0px; top: 0px; position: absolute">
<img src="corner.png">
</div>
<div style="left:0px; top: 0px; position: absolute">
<img src="corner.png">
</div>
<div style="bottom:0px; left: 0px; position: absolute">
<img src="corner.png">
</div>
<div style="bottom:0px; right:0px; position: absolute">
<img src="corner.png">
</div>
<div id="content-inner">
<font color='white'>Here is some text! Here's some text!</font><br><br><br><br>
</div>
</div>
Is that worth a quick tutorial? I know for Halls, Jack and Chris you probably know it off the back of your hand, but to me it's a nice effect I didn't understand - probably worth me making a post in the tutes section...
Re: Really nice borders on this game...
Posted: Fri Oct 22, 2010 9:35 am
by Chris
Yeah.. Always handy for anyone else who wants to make it.