Border Images – I wanted to test the use of the border-image property in a production environment, so I came up with dimensions and a layered image. Since my site must be easily viewed and understood from mobile to workstation the dimensions of the border image had to fit a wide image size range. I was hoping to have the dimensions of the border-image scale with screen size. My understanding is this is not currently possible. I had to keep scaling the dimensions down. The third try was a ‘charm.’ I used this third layered file as a template and rapidly created fourteen unique border-image files for fourteen pages, one per page. Click on the border-image to go to the page where it is used. I find that by using a well designed template the resulting border-image performs well and its CSS is trivial to create.
I am using the ‘border-image’ CSS Backgrounds and Borders Module Level 3 property. It has a Candidate Recommendation. I hope it is endorsed by the committee. Border Images have great design potential.
I am using the ‘border-image’ CSS Backgrounds and Borders Module Level 3 property. It has a Candidate Recommendation. I hope it is endorsed by the committee. Border Images have great design potential.
This is the CSS style for each of the following border image maps:
/* Border Image */
.generic {
border-width: 29px 29px 23px 29px;
-moz-border-image: url("/wp-content/uploads/year/month/generic.jpg") 96 96 192 192 round;
-webkit-border-image: url("/wp-content/uploads/year/month/generic.jpg") 96 96 192 192 round;
border-image: url("/wp-content/uploads/year/month/generic.jpg") 96 96 192 192 round;
border-style: solid;
margin: 0;
width: 100%;
}
Please Comment:
I value your opinion and feedback.Feel free to voice your views.