you now have one more tool to prettify your posts: frameborder! (Disclaimer: like so many more pretty things, it doesn't work in IE.) We already have frame, framepic, frametrans... so what does this frameborder do, you ask? Why, it lets you use a picture as a frame border. Example:
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nisl nisi, hendrerit at pulvinar vel, pellentesque sit amet erat. In laoreet mauris est, tincidunt vehicula mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum cursus gravida turpis, nec tristique enim elementum nec. Vivamus facilisis tristique lacus at auctor. Donec ac leo at nibh hendrerit tristique a id eros. Mauris mattis nisi non tortor mattis et tristique tellus consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec id ipsum ac massa tempor tincidunt. Morbi in ultrices mauris. Suspendisse velit quam, ullamcorper ac semper nec, euismod quis lectus. Suspendisse at odio justo. Cras commodo aliquam enim, at laoreet ligula euismod vitae. Nulla molestie nisi vel justo bibendum consequat. Aliquam non venenatis orci. Ut vitae nulla sed felis aliquet tincidunt. Vivamus mollis porttitor sapien, non adipiscing nunc semper sit amet. Mauris sagittis ornare fringilla. Proin ac diam neque |
Which was obtained from this transparent PNG:
and this code:
- Code: Select all
[frameborder=36,36,36,36,0,round,http://www.mizahar.com/forums/gallery/pic.php?mode=large&pic_id=12740] ... [/frameborder]
The general format is:
- Code: Select all
[frameborder=TOP,LEFT,BOTTOM,RIGHT,INSIDE_PADDING,SLICING_MODE,IMAGE_URL] ... [/frameborder]
Let's see them one by one.
- TOP,LEFT,BOTTOM,RIGHT control the thickness of the border on the four sides. In the above example, the frame is 36 pixels thick on all sides.
- INSIDE_PADDING specifies padding pixels inside the frame: the smaller it is, the closer the text is to the frame. With 0 it's packed against the frame. With a negative value it will sink into it.
- SLICING_MODE tells the code how to slice your picture. One of three keywords: stretch, repeat or round. Stretch will make your frame, well, stretch from side to side with no repetition. Repeat will make it, ummm, repeat across the frame. And round is like repeat, except there are no partial repeats, i.e. the middle portion is repeated 8 or 9 times to fit the frame, but not 8.5. It's also ignored on Chrome/Safari where it works like repeat.
- Finally, IMAGE_URL is pretty straightforward.
Let's see a further example...
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacus est, ultricies nec pulvinar nec, consequat ac mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ullamcorper dictum dui, ut egestas sem suscipit et. Donec vitae purus in nisl feugiat viverra in id nisi. Nulla facilisi. Cras sem nisi, rhoncus quis fermentum ut, pulvinar in massa. Fusce et elit id tellus pretium malesuada. Sed vitae arcu ornare arcu viverra porta. Proin pulvinar consequat accumsan. Nam tincidunt ligula nec eros dapibus dictum. Vestibulum consectetur, mi non lacinia aliquet, nulla turpis sodales urna, vitae egestas urna elit id neque. Proin quis velit ut metus vehicula auctor ut lobortis magna. Aenean euismod pretium nisl, nec venenatis tortor posuere id. Morbi vel odio enim. Etiam lacus odio, accumsan et semper sit amet, cursus non elit. Aenean vulputate dapibus enim ac placerat. Proin euismod rhoncus dolor eget tempus. Sed a commodo risus. Maecenas at nunc nisi. Sed bibendum odio id tortor cursus sit amet adipiscing massa aliquam. Aenean consectetur augue blandit augue fermentum at consectetur ipsum rhoncus. Proin ac enim elementum sapien elementum dapibus. Sed ac lacus lorem. In eleifend ante pretium orci varius vulputate. Mauris dui erat, euismod ac iaculis vitae, rutrum ac mauris. Aliquam erat volutpat. Sed rhoncus cursus nulla sit amet scelerisque. Ut nec quam eget velit interdum congue eu in ante. In hac habitasse platea dictumst. Proin ultrices tincidunt lacus, sed pulvinar diam volutpat et. Vivamus mattis pulvinar felis, sollicitudin laoreet ante volutpat ut. Suspendisse gravida neque id leo tincidunt at feugiat felis ullamcorper. Nunc nulla purus, suscipit vitae rhoncus ac, volutpat non nibh. Ut in massa elit. Maecenas congue lobortis magna, a fringilla leo dictum a. Vivamus est lectus, mattis et gravida sed, consectetur ullamcorper ante. Sed ut elementum nulla. Morbi mi est, dictum vitae ultricies elementum, condimentum non ipsum. Duis non justo neque, non congue mauris. Quisque vehicula feugiat orci, et pretium libero vulputate eget. Phasellus pellentesque, ligula sed semper aliquet, mi sem lacinia quam, sit amet euismod tortor orci ac nibh. In nisl urna, porta in pellentesque ut, porta id odio. In congue auctor vestibulum. Nulla pharetra dignissim faucibus. Sed pharetra lectus ac lorem convallis sagittis. Morbi mi nibh, pharetra et fermentum sed, porttitor at sem. Nulla vulputate ante vitae neque faucibus ullamcorper. Maecenas sed tortor et felis porta mattis. Phasellus suscipit mi quis diam sollicitudin posuere. Maecenas molestie mauris non arcu iaculis bibendum. Nullam dapibus mi ut tortor faucibus sit amet sagittis lectus auctor. Phasellus fermentum dui sit amet ligula facilisis scelerisque vitae id mi. |
It comes from this picture:
and this code - notice how the border is 70 pixel at the top and bottom and 111 on the left and right (the column's width):
- Code: Select all
[frameborder=70,111,70,111,0,repeat,http://www.mizahar.com/forums/gallery/pic.php?mode=large&pic_id=12741] ... [/frameborder]
It's not as hard as it seems. Of course, you can put other frames inside.
And if you need more information, google "css image-border". Have fun!
