We can use images as borders in our html page so that borders can be more attractive
Step 1:#create file
create the html file with CSS3 style specification.
Check out my #experiments:
Step 1:#create file
create the html file with CSS3 style specification.
Note:CSS3 is the latest addition and the CSS3 specification is still under development by w3c. It supports all modern browsers but u can get compatibility issues in IE and older versions of other browsers.I use Google chrome.so,I recommend to try this on Google chrome.
Open notepad and type the codes as given below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> <html> <head> <style> div { border:15px solid transparent; width:250px; padding:10px 20px; } #tiles { border-image:url(img.png) 30 30 round;<!--insert your image url here --> } #stretch { border-image:url(img.png) 20 0 stretch;<!--insert your image url here --> } </style> </head> <body> <div id="tiles">the image is tiled</div> <br> <div id="stretch">the image is stretched</div> <p>original image:</p> <img src="img.png"><!--insert your image url here --> </body> </html> |
Step 2:#save
Save your notepad file in .html format
Step 3:#execution
You can use Google chrome for opening the .html file. well, you can try with other browsers but I can’t assure you the compatibility.
You will see the output as given below:
#fun
You can try this with different images and changing the width
border-image:url(img.png) 30 30 stretch;
try changing this values, Have fun..
No comments:
Post a Comment