• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 12. Box Properties > border-image-transform Set of Properties

12.17. border-image-transform Set of Properties

The final set of properties relating to adding images to borders is the border-image-transform set of properties. Compared to the myriad of properties comprising the border-image and border-fit sets of properties, the border-image-transform set of properties is made up of only two separate properties: border-image-transform and border-corner-image-transform. The former is for use on “side” border images, while the latter is for use on corner images. The idea with these properties is that you set one corner or side image, and then tell it how it should be reflected or otherwise “transformed” for display on the other three corners or sides, respectively. With border-image-transform it applies its transformation on whatever image is set to border-top-image (i.e., the image set to the top border), and for border-corner-image-transform it is the image assigned to border-top-left-image (i.e., the top-left corner). Using these properties you can easily conserve on the total number of images used for your border, letting the browser do all the work of inverting, flipping and rotating border images for you.

The border-image-transform property comes with five primary values: none, rotate, reflect-xy, reflect-right and reflect-left. The none value is the default, and leaves the image as is — that is, nothing is done to it and it is not reflected on the other four sides of the border. The rotate value simply takes the initial image and rotates it first 90 degrees for the right side, 180 degrees for the bottom side, and 270 degrees for the left side — in all cases the “inner” part of the border image continues to point to the inside of the block. With reflect-xy, what happens is that the bottom border image is a reflection of the top, and the right border image is a reflection of that seen on the left. Using reflect-right, the top border image is rotated 90 degrees and used for the right side; it is then reflected to the left side, and the top image is similarly reflected to the bottom. reflect-left uses the same idea, but instead places the rotated image to the left border first, which is then reflected to the right; the bottom image is still a reflection of that used on the top. All of this may seem hard to visualize, but you can see clear illustrations of the effects of each of these values in the first two rows of Figure 12-19.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint