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):

Image

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

Image

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

Image 

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:

Image

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

Image

 

 

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s