Comments on: Creating a Body Border http://css-tricks.com/body-border/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Tue, 18 Jun 2013 20:47:07 +0000 hourly 1 http://wordpress.org/?v=3.5.1 By: Sms http://css-tricks.com/body-border/#comment-96505 Sms Sat, 11 Jun 2011 10:05:02 +0000 http://css-tricks.com/css-trick-creating-a-body-border/#comment-96505 Really nice tutorial! that really means a lot to me. Such a nice start for beginners. Thank you for taking the time to do all of that!

]]> By: DPXradar 001 – Link Roundup for Online Business Owners http://css-tricks.com/body-border/#comment-96258 DPXradar 001 – Link Roundup for Online Business Owners Thu, 09 Jun 2011 00:08:27 +0000 http://css-tricks.com/css-trick-creating-a-body-border/#comment-96258 [...] border effect form sites like Hicksdesign and kottke.org? Well, Chris Coyier recently rewrote his Creating a Body Border tutorial to show modern techniques.If you’re an Envato Marketplace author or plan on becoming [...]

]]> By: ItsBuiltForYou http://css-tricks.com/body-border/#comment-96176 ItsBuiltForYou Wed, 08 Jun 2011 01:47:37 +0000 http://css-tricks.com/css-trick-creating-a-body-border/#comment-96176 Yeah well, when your design looks like that!! But I totally agree that this may be just a tad bit useless =). Unless someone really really wants those borders!

]]> By: felicja http://css-tricks.com/body-border/#comment-96150 felicja Tue, 07 Jun 2011 17:03:51 +0000 http://css-tricks.com/css-trick-creating-a-body-border/#comment-96150 This article shows how to complicate simple things… To solve this problem I wrote in firebug: body {border:10px solid #000} and <div style="position: fixed; width: 100%; height: 10px; background: #000; left: 0; bottom: 0"></div>. And it works. I think that the simplest solutions are the best.

]]> By: raozuzu http://css-tricks.com/body-border/#comment-95839 raozuzu Fri, 03 Jun 2011 23:24:57 +0000 http://css-tricks.com/css-trick-creating-a-body-border/#comment-95839 Nice article! And what about something like that?
I didn’t test it on Opera, but I think I only need to add the line below if it results broken:
overflow-x: hidden; /* For Opera */

Here the code:


body:after {
content:" ";
display: block;
position: absolute;
width: 100%;height: 100%;top:0;
box-shadow: inset -20px -20px 0 pink,
inset 20px 20px 0 pink;
/* z-index: -1; just uncomment this to set this as a part of the background */
padding: 60px; /* eventual padding, 40px + 20px of the inset box-shadow */
position: fixed;
}

I usually put this when I want a subtle inset shadox on a repeated texture, but I think it’s also suitable in order to get a body border.

Let me know what do you think about this!
Best regards,
raozuzu :)

]]> By: Joshua http://css-tricks.com/body-border/#comment-95792 Joshua Fri, 03 Jun 2011 09:32:28 +0000 http://css-tricks.com/css-trick-creating-a-body-border/#comment-95792 Switching between the kottke.org demo and the actual kottke.org, I noticed some differences in the metrics. The following modifications will replicate the original site pixel for pixel:

inset #19d4ff 0 0 0 4px,
inset #18cdf7 0 0 0 5px,
inset #53dfff 0 0 0 9px,
inset #50d8f7 0 0 0 10px,
inset #8ce9ff 0 0 0 14px,
inset #88e2f7 0 0 0 15px,
inset #c5f4ff 0 0 0 19px,
inset #bfecf7 0 0 0 20px;
]]> By: Remy Bach http://css-tricks.com/body-border/#comment-95786 Remy Bach Fri, 03 Jun 2011 07:47:40 +0000 http://css-tricks.com/css-trick-creating-a-body-border/#comment-95786 I half agree with Brent on that one, with the exception being that I’d give the body a padding of ’0 10px’ and having two b tags for the left and right.
The only problem I guess would be if the site needs to scroll horizontally, but that’s something that should be avoided anyway.

]]> By: Creating a Body Border | Blogs – NG Outsourcing http://css-tricks.com/body-border/#comment-95772 Creating a Body Border | Blogs – NG Outsourcing Fri, 03 Jun 2011 03:29:06 +0000 http://css-tricks.com/css-trick-creating-a-body-border/#comment-95772 [...] This article as originally published on February 25, 2008, but is now being completely re-written to… [...]

]]> By: Creating a Body Border | Joomla Showcase : CSS Showcase http://css-tricks.com/body-border/#comment-95758 Creating a Body Border | Joomla Showcase : CSS Showcase Thu, 02 Jun 2011 22:31:32 +0000 http://css-tricks.com/css-trick-creating-a-body-border/#comment-95758 [...] This article as originally published on February 25, 2008, but is now being completely re-written to… [...]

]]> By: stygyan http://css-tricks.com/body-border/#comment-95757 stygyan Thu, 02 Jun 2011 20:44:16 +0000 http://css-tricks.com/css-trick-creating-a-body-border/#comment-95757 It works, certainly it works, but you can’t click on anything, as the new element avoids it. Extra note: you have to give a value of 0px to left, right, top and bottom.

]]>