| [CSS Tutorial] How To Create Triple Borders; Vector Series: http://s4.zetaboards.com/vector/topic/8636547/ | |
|---|---|
| Tweet Topic Started: Thursday, 24. November 2011, 11:32 (628 Views) | |
| Andrew | Thursday, 24. November 2011, 11:32 Post #1 |
![]()
ぼくたちがすべてはばか。
|
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.
Now for some body styling.
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.
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.
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.
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 | Thursday, 1. December 2011, 04:52 Post #2 |
![]()
BAMMMMM!
|
Outline Documentations T H E M E S Documentation accepted in to the Themes database |
![]() 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 » |
| Track Topic · E-mail Topic |
8:15 PM Jul 10
|
Powered by ZetaBoards Premium · Privacy Policy



Multi
Multi








^




8:15 PM Jul 10


Outline Live