Rounded corners remain one of the most used page styles in web designing. Designers frequently look for ways to create ‘near-perfect’ rounded corners. Many a time they settle for a technique that may not be suitable for their page design.
2 popular ways to create rounded corners are by using corner images and by using JavaScript. Both need cascading styles suitable to make them work well.
If you feel comfortable using corner images with corresponding cascading style, you may refer to this video article we did some time back. The article informs how free software can help in creating perfectly rounded corners which may then be used with CSS styling.
In this article we will use the free and widely acclaimed JavaScript, the Nifty Corners Cube, to create simple 2-column content with same height. The corners are rounded at 25px.
After you download from that site, a few changes may be made in the CSS and JS codes to make the 2-column content work as under (coming after the video below). It can also be seen here:
HTML Code
The HTML code for the above demo is given below. The CSS styles are also given therein. Note you’ll need the ‘niftyCorners.css’ file for the rounded corners to work.
The ‘niftyCorners.css’ file is not referred to in the main HTML code, but it is called from within the ‘niftycube.js’ file.
The code snippet that specifies the ‘big’ diameter of rounded corners and same height of the 2 columns is highlighted for convenience.
Feel free to copy the code and alter it for your use.
<html><head>
<title>2-Column Rounded Corners With NiftyCube</title>
<style type="text/css">
body{padding: 0px;margin:0;background: #FFF;color: #3C0012;
font:85%/1.45 "Lucida Sans Unicode","Lucida Grande",Arial,sans-serif}
h1,h2{margin: 0 0 10px 0;padding: 0 10px;letter-spacing: -1px;font-weight:100;color: #FFF;line-height:1.1;}
h1{font-size: 200%}
h2{font-size: 140%}
p{margin:0;padding: 0 10px 1em}
img{border: 0;float: right;margin:5px 10px;}
div#container{width:600px;margin: 0;padding:0;text-align:left}
div#content{float:left;width:400px;padding:10px 0;background: #FA0}
div#nav{float:right;width:195px;padding:10px 0;background:#3C3}
</style>
<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("div#content,div#nav","big same-height");
}</script>
</head>
<body>
<!-- Outer Container -->
<div id="container">
<!-- Inner Left Column -->
<div id="content">
<h1>Big Rounded Corners With NiftyCube</h1>
<p>This is a simple demonstration of using rounded corners with NiftyCube JavaScript.</p>
<h2>An Image Thumbnail To The Right</h2>
<img src="2-column-rounded-corners-TN.png" />
<p>Include an image thumbnail and float it to the right or left with suitable margins.</p>
<p>You guessed right...the thumbnail is another replica of this demo.</p>
<p>Copy the codes and create similar thing in your webpage.</p>
</div>
<!-- Inner Right Column -->
<div id="nav">
<h2>Simple. Just JS and CSS.</h2>
<p>Both the left and this column are of same height.</p>
<p>This means even if this column has less content, the height of both will be same.</p>
</div>
</div>
</body></html> This article of December 4th, 2009 is authored by Partha Bhattacharya, who runs this website. Catering to the clients' video needs aside, Partha also writes guest articles for other web publications. |
[...] Go here to read the rest: Simple 2-Column Content With Rounded Corners Using Free JavaScript … [...]