Jump to content

Game-style borders with CSS3


Paul Brzeski
 Share

Recommended Posts

I just discovered the border-image property in CSS3 and thought I'd see what I could do with it.

 

As I mentioned in another thread, I really want to have sweet, styled up buttons and borders in my game and website UI. 

 

Here is the final result achieved with an image background (this is in place of the full webGL scene I will have there). Source code is attached.

 

904186_587388074659692_1449693269_o.png

 

These two images are all that's used. The central black area has a slight transparency to it, and that's what's doing the transparency that you see above.

 

1460139_587388187993014_99589474_n.png         1002632_587388211326345_1531551606_n.png

 

 

I used this free tool to play around with the section positions - http://border-image.com/

 

 

borders.zip

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...