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.
Ray Onion Dome
Ray Spiral Staircase
Crescent Onion Dome
Crescent Spiral Staircase
Zigzag Spiral Staircase
Flame Motif
Chrysanthemum Ceiling
Papyrus Form
Dome Family
2-4-2 X 4 Seed
1-7 X 4 Seed
1-3 X 8 Seed
15-15 X16 Seed
Walrus Ivory Tusk
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.