By Harry Roberts
Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.
Written by Harry Roberts on CSS Wizardry.
You may well be familiar with John Hicks’ page
borders that he uses on his site. These are a series of fixed position <b>
elements that are placed top, right, bottom and left of the viewport over the
content, giving the illusion of a fixed border. I wanted to achieve a similar
effect recently but, given my militant approach to progressive enhancement,
I decided to drop the insemantic markup and fashion a pure CSS alternative. For
a live demo please visit suzannahaworth.com.
/*------------------------------------*\
BORDERS
\*------------------------------------*/
/* Create a series of empty pseudo-elements... */
html:before,html:after,body:before,body:after{
content:"";
background:#dad8bb;
position:fixed;
display:block;
z-index:5;
}
/* ...and position them! */
html:before{
height:10px;
left:0;
right:0;
top:0;
}
html:after{
width:10px;
top:0;
right:0;
bottom:0;
}
body:before{
height:10px;
right:0;
bottom:0;
left:0;
}
body:after{
width:10px;
top:0;
bottom:0;
left:0;
}
Harry Roberts is an independent consultant web performance engineer. He helps companies of all shapes and sizes find and fix site speed issues.
Hi there, I’m Harry Roberts. I am an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and improving site-speed. You should hire me.
You can now find me on Mastodon.
I am available for hire to consult, advise, and develop with passionate product teams across the globe.
I specialise in large, product-based projects where performance, scalability, and maintainability are paramount.