CSS3 border-image : My new best friend

I have been playing around with various techniques for getting a wooden effect border around my main container on the site.  I was conscious that I didn’t want to use a big full length image that the viewer would have to download.  After some google research I found out that there is an intriguing CSS3 function called border-image which will create a border from, well – an image!  http://www.w3schools.com/cssref/css3_pr_border-image.asp

First of all I created a section of wood using the Illustrator techniques learned from Youtube (see previous post).  Here are my results:

With knots (using distort-transform>roughen for knots):


Without knots: (which will be used for container border on site):


This I lightened and reduced down to a small image that would be repeated on the page to create a border:


This small image will only be called by the browser once and will be repeated to the length of the page to create a border around the .container using border-image:

border-left:40px solid transparent;
border-right:40px solid transparent;
-webkit-border-image:url(images/wood_border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(images/wood_border.png) 30 30 round; /* Opera */
border-image:url(images/wood_border.png) 30 30 round;

Another version of this small wood image to be used for the background body:


So here is the latest look of the page so far…..





Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s