Multi
Multi
[CSS Tutorial] How To Create Triple Borders; Vector Series: http://s4.zetaboards.com/vector/topic/8636547/
Topic Started: Thursday, 24. November 2011, 11:32 (628 Views)
Andrew
Member Avatar
ぼくたちがすべてはばか。
How To Create Triple Borders
Difficulty: Medium
Time: 5-15 Minutes
Demo: Attachment



Today we will be utilizing the CSS after and before pseudo selectors in order to created triple borders. We'll start with some base HTML.
Code: HTML
 
<div></div>
<center>I'm Pretty Sure These Triple Borders Weren't Photoshopped</center>

Now for some body styling.
Code: CSS
 
html, body {
background: #fcfcfc;
font-family: Tahoma;
font-size: 35px;
text-shadow: 0px 0px 1px transparent;
}

Now to start creating the triple borders. We're gonna style the div with a gray background, dark gray 1px border and a drop shadow.
Code: CSS
 
div {
height: 400px;
width: 400px;
margin: 200px auto;
background: #EAEAEA;
position: relative;
border: 1px solid #999;
box-shadow: 0px 0px 1px #888;
}

We now have one border.

Before we start building the other borders you need to know how borders work with width and height. If you have a 400x400 pixel div with a 1px border than the div will be 402x402 pixels. Keeping that in mind let's do our second border.
Code: CSS
 
div:before {
position: absolute;
content: '';
width: 396px;
height: 396px;
border: 2px solid #fff;
}

Set the position to absolute so the selector will be right on top of our div, with a content of '' so that there is nothing in there. Now, since it is a 2 pixel border, we need to decrease our width and height by 2 times the border width. So our width and height will be 396x396 pixels.

We're gonna do the third border now which is a bit trickier but is basically the same concept.
Code: CSS
 
div:after {
position: absolute;
content: '';
width: 396px;
height: 396px;
border: 1px solid #999;
top: 1px;
left: 1px;
}

Our border is 1px but since it is the third border instead of setting our width and height to 398x398 we're gonna use 396x396 so that the border overlaps the second border. Position the top and left with a 1px offset and now you have successfully achieved triple borders.

I hope you enjoyed this tutorial and if you have questions feel free to ask them.

- - -

For the complete tutorial: http://s4.zetaboards.com/vector/topic/8636547/
Off
Profile
Quote
Top
 
Maddy
Member Avatar
BAMMMMM!
Outline Documentations
T H E M E S

Documentation accepted in to the Themes database
Posted Image
This is a work in progress ^^

"You still talk about it? You still care about it."


Tumblr - WeHeartIt - My Things - Twitter

The List
Life
<3
Off
Profile
Quote
Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Coding & Development · Next Topic »

Welcome Guest [Log In] [Register]
Outline Live
Loading..
Loading..