CSS Rounded Corners without using Images

3 08 2007

This post was not originally written my me… this is by my friend. Thanks to her. 

I was working on XHTML + CSS for few days and I really got fed up in using Images for rounded corners.The image size will be fixed and if I try to add more contents it will come out of the image.Or else two images should be used so that the content will fit to the image.But I was not satisfied in using two images.I referred a lot of tutorials but no where I got a solution in creating a rounded corners only using CSS without the help of Javascript and without using images.I tried,tried a lot and atlast got succeeded 🙂 .The idea may be so simple(b’coz even I am a fresher).Anyway,here’s the code.

HTML Code
<div>
<b class="roundedcornerobj">
<b class="roundedcornerobj1"><b></b></b>
<b class="roundedcornerobj2"><b></b></b>
<b class="roundedcornerobj3"><b></b></b>
<b class="roundedcornerobj4"><b></b></b>
<b class="roundedcornerobj5"></b></b>
<div id="maindiv" class="roundedcornerobjbg">
Sample Rounded Corners<br /><br /><br /><br /><br />
</div>
<b class="roundedcornerobj">
<b class="roundedcornerobj5"></b>
<b class="roundedcornerobj4"></b>
<b class="roundedcornerobj3"></b>
<b class="roundedcornerobj2"><b></b></b>
<b class="roundedcornerobj1"><b></b></b></b>
</div>

CSS

.roundedcornerobj *
{
display:block;
height:2px;
overflow:hidden;
font-size:.01em;
background:black
}
.roundedcornerobj1
{
margin-left:4px;
margin-right:4px;
padding-left:11px;
padding-right:11px;
border-left:1px solid aqua;
border-right:1px solid aqua;
background:aqua
}
.roundedcornerobj2
{
margin-left:2px;
margin-right:2px;
padding-right:5px;
padding-left:5px;
border-left:5px solid yellow;
border-right:5px solid yellow;
background:yellow
}
.roundedcornerobj3
{
margin-left:1px;
margin-right:1px;
border-left:5px solid orange;
border-right:5px solid orange;
}
.roundedcornerobj4
{
border-left:5px solid maroon;
border-right:5px solid maroon
}
.roundedcornerobj5
{
border-left:5px solid red;
border-right:5px solid red
}

.roundedcornerobjbg
{
background:pink
}

The above class denotes the “Center Part”.

As you all know <b> is used to display the text in bold.If we use any other tags like <p>
or <div> there will be a gap between one element and the other.We can avoid that but the
code will be more lengthy and confusing.Did you notice something in the HTML code?The <b>tags used next to the “main div” is in the reverse order(except the first <b> tag) of the <b> tag which is above the “maindiv”.You will be able to understand why that is done, by seeing the image below.In order to differentiate the usage of each <b> tag I have used multiple colors.The result will look like this.(Please view the full image)

sampleone1.jpg
Hope you understood now.But the color combination looks so stupid rite???Ok,let me give the same color for all.Then it will look like this.

sample2.jpg

Hope this tutorial gives you some idea on “How to make Rounded Corners without using Images”.Will come up with more tutorials in the upcoming blogs.

@Experts–Please pardon me if anything is wrong.Also share your views.





BSNL DataOne & Bitcomet: Portforwarding tutorial

18 06 2007

This post has moved to its new home. Please click the link below to view the content:

Having trouble with your BSNL Dataone Broadband and torrents? Hope this complete tutorial would soleve all your toubles and push your torrent downloadto maximum limit. The reason for slow download is that your port forwarding is not properly configured. As a result your IP is not visible to outside peers. To verify this start downloading a torrent with very good seeds & peers. Now go to peers of torrent and see under “Initiation”. If you have both ‘Local’ & ‘Remote’, then dont bother this tutorial anymore. Else if you are getting only ‘Local’, continue reading. I am using Bitcomethere coz its fast and doesnt use much of CPU. You could also use other torrent software like Azureus, Utorrent etc. You will have similar options under their settings.

Step 1: Know your IP
===============
1. Even though your IP address is dynamic, the ADSL router would always assign an IP address to your computer. Most probably it would be 192.168.1.2.
2. Go to Start>Run>cmd or in Vista, type cmd in search and press enter.
3. Type ‘ipconfig’ and press enter
4. Note the IP address of your computer, here for me it 192.168.1.2
Step 2: Configure the torrent
====================
1. First we need to decide how much to upload. For a 2mbps connection, I keep upload rate as 20KBps. If you are using lower connection like Airtel or Tata Indicomm of 128kbps, keep upload as 8KBps and for 256, 14-16KBps would do. Keep the download rate ‘No Limit/ 0′. Do this under Options>Preferences>Connection
2. At the same place, set your port number to somewhere between 40000 and 65000.
3. Next go to Options>Preferences>Advanced>Connection and uncheck “Enable UPnP port mapping”

Enlarge Image: http://farm2.static.flickr.com/1064/563998929_e2ff218df7_o.jpg
Part 3: Portforward the Router/ADSL Modem

=================================
1. First you need to access the settings or router. For this, open any browser like Internet Explorer/Firefox and navigate to ‘http://192.168.1.1′. The most common username and password is ‘admin’ & ‘admin’. I have a new UT300R2U modem with a new software. So I will give the detail tutorail for that here.
If you have a different router or a differnt software for UT300R2U, find your router herehttp://portforward.com/routers.htm and follow the guide. You can also find the deafult password of your router there.
2. Navigate to ‘Advanced Setup>NAT>DMZ Host’ in the sidebar. DMZ host refers to Demilitarized Zone.
3. Enter your IP Address that you found in Step 1 there and click Save/Apply. In my case its 192.168.1.2. You dont require a reboot here.
4. Now restart your torrent software and then check whether ‘Remote’ appears under initialization, it should!!! Enjoy!!!

Enlarged Image : http://farm2.static.flickr.com/1301/563999035_ba38bff75c_o.jpg
If you have any doubts or issues, please do leave a comment.

Thank you.