digip Posted October 17, 2007 Share Posted October 17, 2007 This is not anything specia (or new)l, but someone might find it handy for adding rounded corners without using images. It's my attempt to try and make borders around objects, like rounded corners, but instead using special characters or fonts, like windings, etc, you can come up with more than just Rounded Corners. The following is just an example. Save it as an html file and you will see what I came up with. <html> <head> <!-- ## Based on code from: http://www.html.it/articoli/nifty/index.html ## I came up with the idea that you could do more than just rounded ## corners. Given the patience and effort, you can create any number ## of combinations using CSS. My goal is at some point to try and mimic the ## Ascii art of the BBS days with color transparencies and full pictures, ## using html and without some premade executable that converts images to Ascii text. ## The only problem I am having is different browsers render the fonts ## differently and the height of the font may not be the same. Also, some special ## characters only show up on certain browsers, but not the others. ## This probably has no real world use, but if you wanted to make some art ## or just play with borders around objects on your page, this could come in handy. - DigiP ## 10/17/2007 --> <style type="text/css"> body{padding: 0px;background-color: black; font: 16px tahoma;} .container{ margin: 0 0;background: #9BD1FA} .container2{ margin: 0 0; background: #9BD1FA;} .container3{ margin: 0 0; background: #fff; } b.rtop, b.rbottom{display:block; background:white} b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #9BD1FA} b.r1{margin: 0 5px} b.r2{margin: 0 3px} b.r3{margin: 0 2px} b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px} i.rtop {display:block; background: black; } i.rbottom{display:block; background: black; } i.rtop i, i.rbottom i{display:block;height: 1px; overflow: hidden; background: #fff;} i.r1{margin: 0 5px; } i.r2{margin: 0 3px; } i.r3{margin: 0 2px; } i.rtop i.r4, i.rbottom i.r4{margin: 0 1px;height: 2px; } </style> </head> <body> <div class="container3" id="circle1test2" style="width:522; position: absolute; top:3px; left: 69;"> <i class="rtop"><i class="r1"></i><i class="r2"></i><i class="r3"></i><i class="r4"></i></i> <BR><BR><BR><BR><BR> <i class="rbottom"> <i class="r4"></i> <i class="r3"></i> <i class="r2"></i> <i class="r1"></i> </i> </div> <div class="container" id="l1" style="width:500; position: absolute; top:10; left: 80; z-index:6;"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <BR> <center><font color="black"> <strong>An attempt to create smooth outlines without images. <BR>Add to it if you want to.</strong> </font></center> <BR> <b class="rbottom"><b class="r4"></b><b class="r3"></b> <b class="r2"></b><b class="r1"></b></b> </div> <div class="container2" id="circle1test" style="width:512; position: absolute; top:7px; left: 74; z-index:6"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <BR> <b class="rbottom"> <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b> </b> </div> <div id="bullet" style="position: absolute; left: 0; top: -100; z-index:7; color: white; font: 200px tahoma;">•</div> <div id="bullet1" style="position: absolute; left: 20; top: -40; z-index:7; color: black; font: 100px tahoma;">∞</div> <div id="bullet2" style="position: absolute; left: 569; top: -100; z-index:7; color: white; font: 200px tahoma">•</div> <div id="bullet4" style="position: absolute; left: 275; top: 60; z-index:5; color: white; font: 150px tahoma;">Φ</div> <div id="bullet5" style="position: absolute; left: 40; top: 36; z-index:5; color: white; font: 118px tahoma;">•</div> <div id="bullet5a" style="position: absolute; left: 570; top: 36; z-index:5; color: white; font: 118px tahoma;">•</div> <div id="bullet6" style="position: absolute; left: 198; top: 60; z-index:5; color: white; font: 250px tahoma;">↓</div> <div id="bullet7" style="position: absolute; left: 287; top: 60; z-index:5; color: white; font: 250px tahoma;">↓</div> <div id="bullet3" style="position: absolute; left: 277; top: 245; z-index:7; color: white; font: 150px tahoma;">♥ </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
remkow Posted October 17, 2007 Share Posted October 17, 2007 Wow that's actually pretty, cool. Mind if I use it for a new design?? Quote Link to comment Share on other sites More sharing options...
digip Posted October 17, 2007 Author Share Posted October 17, 2007 That's kind of the point to sharing it. Or do I detect a bit of sarcasm? Quote Link to comment Share on other sites More sharing options...
remkow Posted October 17, 2007 Share Posted October 17, 2007 nah I didn't meant it to be sarcastic, it's just I've had someone getting completely pissed at me because I used a piece of PHP for something I was coding, which he posted publically. Just asking to be sure ;) Quote Link to comment Share on other sites More sharing options...
digip Posted October 17, 2007 Author Share Posted October 17, 2007 nah I didn't meant it to be sarcastic, it's just I've had someone getting completely pissed at me because I used a piece of PHP for something I was coding, which he posted publically. Just asking to be sure ;) Yeah, I wouldn't post it here if it wasn't meant to be used. Also, it's not proprietary stuff here. Just HTML and CSS. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.