Rounded corners are one of the biggest web design trends. Usually rounded corners are created using images as backgrounds for the section we want to appear rounded (such as those used in the Rounders template or created using Cornershop). However, it is also possible to create rounded corners using only CSS styling!
Spiffy corners is a site which can generate the code for you, based on the foreground and background colors you specify. Then all you need to do is add the code to your blog template, and your rounded corners will appear in your sidebar, your main posts section, or indeed anywhere you wish in your blog!
The rounded corners wizard is really simple to use: all you need to do is specify the colors you wish to use and a preview image is generated for you. You can then choose the amount of "roundness" you require and the wizaed will generate two sets of code for you to use: the CSS style code, and the html code to wrap around your blog elements. Then all you need to do is copy and paste these codes into your blog template.
For Bloggers, this is very advantageous, since this dismisses the need for externally hosted images to create the rounded corner effect. Also, this helps speed up page loading time as the corners are created in the style rather than by calling images from the server.
I will certainly be using this technique in my new design for the site, and heartily recommend this as an alternative for those who wish to design Web 2.0 style corners for their blog templates. Take a look at the Spiffy Corners site and let me know what you think too.
Technorati Tags: rounded+corners | web+design | blog+templates | web+2.0
where do I need to paste this code from Spiffy corners into my blog template??
ReplyDeleteTwo sections of code are provided: the first is styling code which needs to be placed inside the b:skin tags (ideally just before the closing </b:skin> tag).
ReplyDeleteThe second set is the html code which you need to wrap around the section you wish to make rounded. When you generate the code, it will clearly show where to place your content using comment tags like this:
<!-- content here -->
The easiest way to use it is to divide it in two, placing the top half before your content, and the second half after your content.
Hope this helps, but feel free to email me if you need more specific information.
Amanda,
ReplyDeleteI'm not the person above but I sent you an e-mail regarding this post. I Sent it from my yahoo account so check your spam folder in case it was sent there.
Did you know that there is a way to make rounded corners using only one line of code? I mean literally one line of code!
ReplyDeleteBut beware that this code will only work with safari and firefox. Lets just hope Opera, IE, Chrome and other browsers could catch up on this.hehe
http://bloggertinker.blogspot.com/2009/02/how-to-make-rounded-corners-without.html
Here is a link for 4 lines of code and getting rounded corners.View Source code
ReplyDeleteI am thoroughly convinced in this said post. I am currently searching for ways in which I could enhance my knowledge in this said topic you have posted here. It does help me a lot knowing that you have shared this information here freely. I love the way the people here interact and shared their opinions too. I would love to track your future posts pertaining to the said topic we are able to read.
ReplyDeleteThanks for taking the time to discuss this, I feel strongly about information and love learning more on this. If possible, as you gain expertise, It is extremely helpful for me. would you mind updating your blog with more information
ReplyDeleteThank you for the information that provided.
ReplyDelete