Cheap Cluster

Make boxes with rounded corners is one of the typical questions to ask about CSS. There are several solutions to this problem, we have seen in some articles DesarrolloWeb.com, but in these cases we used images with CSS, which is more direct. 

We will now see a way to create boxes with rounded corners that do not use images, but just a little CSS and Javascript. The development of this technique is not on our own. In this case we will simply comment on a development Alessandro Fulciniti is called Nifty Corners Cube is already in its third version and can be viewed at the URL: http://www.html.it/articoli/niftycube 

As we have said, the system creates or blocks of content boxes with rounded corners and smoothed, but without using images. Instead of using images and CSS Javascript compatible with most browsers. Although as reported in the product page, Internet Explorer 5 or with Javascript disabled, you will see square boxes instead of looking rounded corners. In the first version was presented as an interesting option, but especially in the second and the third version has been improved and simplified management script, as far as possible. 

Best of all, which is under the GPL license, then anyone can use it freely in their developments. 

There are three elements to make it: 


Javascript file 
A CSS file 
Call Javascript within the pages they want to display boxes with rounded corners. 
In reality, the CSS file to make rounded corners included internally Javascript, so we simply have to include an external file. Js, which is the Javascript code with the functions that used to make rounded corners. 

<script type="text/javascript" src="niftycube.js"> </ script> 

Then it will be necessary to make some calls to Javascript to round the corners of the layers you want. This way: 

<script type="text/javascript"> 
window.onload = function () ( 
Nifty ( "div # box", "big"); 
) 
</ script> 

As you can see, it has defined a function that is executed with the onload event (when it finished loading the page). This function calls another function named Nifty () that is defined in Javascript we had included as a separate file. Nifty function () takes two parameters. The first is the CSS selector of the layer you want the second round and used to indicate specific options to rounding. 

The first parameter, said that the CSS selector, has a lot of versatility. Specify the rounding of various page elements, such as all occurrences of a specific tag, a class of CSS, a label with a specific identifier, and so on. In the product documentation can be seen all types of CSS selectors, but some are these: 

Select label: "p" or "h2" 
Are shown with rounded edges all occurrences of a label, such as paragraphs or headings h2. 

ID Selector by "div # capax" or "p # parrafoy" 
This serves as a selector with the following tags identifiers: 

<span class=codigo> 
<div id="capax"> with its identifier Div </ div> 
<p id="parrafoy"> P with its identifier </ p> 

Selector class div.nave "or" span.fuentepequena. 
Each time we apply such quw will get with rounded corners. 

Selector down div # header h1 " 
Referring to the h1 tag inside the layer with id = "header". 

There are other selectors that can be seen in the documentation. Moreover, in the first parameter can specify multiple selectors at a time, separated by a comma: 

Nifty ( "div # box div # test, p", "big"); 
This will affect the layers box, and all test labels paragraphs. 

The second parameter options are rounding shall apply to the selectors in each function. The various options should be written separated by commas. There is a fairly large list of options, but some commented that seem most useful: 

tr: just round the upper right corner. 
tl: just round up the top left corner. 
br: just round the lower right corner. 
bl: just round the lower left corner. 
top: top corners 
bottom: bottom corners 
left: the left corner of 
right: the right corners 
all: all the corners (the default option) 
none: no rounded corner 

These options can be set together rounding several corners, but not all, to make it without any discussion: 

Nifty ( "p", "tl, bl, br"); 

small: using small corners of 2px 
normal: normal 5px corners are used (default option) 
big: big corners used 10px 

These options define the size of corners. 

Then there are other options that are a little less clear, leaving everyone to consider whether they need to have: transparent, fixed-height, same-height. It seems useful option-same height, so that all layers have the same height, for if we do a design in different columns where each column has the same height. 

Very basic example of rounded corners without images 

We have done some testing of the system and we have tried to get the most basic code to test with this script. The result is the following example, which rounded the corners of every paragraph of the page. We have placed two paragraphs with two different background colors. 

<html> 
<head> 
<title> rounded corners Basic Example </ title> 
<script type="text/javascript" src="niftycube.js"> </ script> 
<script type="text/javascript"> 
window.onload = function () ( 
Nifty ( "p"); 
) 
</ script> 
</ head> 
<body> 
<p style="background:#ccccff;padding:5px;"> 
This is a test 
mola <br> quantity! 
</ p> 
<br> 
<p style="background:#cccccc;padding:5px;"> 
Again, Hello my friend! 
</ p> 
</ body> 
</ html> 

This example can be seen on a separate page. 

Testing we have found that if we put the background color of a paragraph with the name of a color code instead of RGB, it does not work. 

<p style="background: red;"> 

If we change the background color of the page, also the corners are perfectly rounded. 

<body style="background: #66ff00;"> 

But if we put the background color of the page with a name instead of RGB, does not work either.

---

Albert Sirvent - Grupo DomainGurus