Mar 6
Create a table using CSS – No <table> tag
Posted on Thursday, March 6, 2008 in CSS, Experiments, XHTML
This post was migrated from my old blog. You can see the original article here
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="table.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>
<body>
<div class="table">
<ul>
<li class="title">Player Name</li>
<li class="even">Sachin</li>
<li class="odd">Gilchrist</li>
<li class="even">Dhoni</li>
<li class="odd">Ponting</li>
</ul>
<ul>
<li class="title">Country</li>
<li class="even">India</li>
<li class="odd">Australia</li>
<li class="even">India</li>
<li class="odd">Australia</li>
</ul>
<ul>
<li class="title">Ranking</li>
<li class="even">1</li>
<li class="odd">2</li>
<li class="even">6</li>
<li class="odd">10</li>
</ul>
</div>
</html>
</body>
</html>
/* CSS Document */
.table {
background:#333;
}
.table ul {
float:left;
margin:0;
padding:0;
border:1px solid #C9C9C9;
}
.table ul li {
list-style:none;
padding:5px 10px;
}
.table ul li.title {
font-weight:bold;
background:#333;
color:#fff;
}
.table ul li.even {
background:#fff
}
.table ul li.odd {
background:#FFFFE6
}
Feb 12
Create a curve using CSS (without using an image)
Posted on Tuesday, February 12, 2008 in CSS, Experiments, XHTML
This post was migrated from my old blog. You can see the original article here
Few days back i was just browsing through one of the website casually, and one thing that drew my attention was the curve used in the website. Immediately i started to inspect the code and i was amazed to see that no images were used to create that curve. It was done purely through CSS. Then i spent few hours to learn the CSS trick and i prepared my own.
I have put my HTML code and the CSS that i created. I am sure that this will help the CSS designers around the world.
<!--------------index.html----------------!>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="curvedbox.css" rel="stylesheet" type="text/css" />
<title>Create a curve using CSS ( without using an image )</title>
</head>
<body>
<div id="mainWrapper" class="curvedBox">
<span>
<span class="r1" ></span><span class="r2" ></span><span class="r3" ></span><span class="r4" ></span>
</span>
<div class="content">
<h2 class="experiment_title">Create a curve using CSS</h2>
<div id="leftContent" class="curvedBox">
<span>
<span class="r1" ></span><span class="r2" ></span><span class="r3" ></span><span class="r4" ></span>
</span>
<div class="content">
<p>From a plain HTML it is not possible to create rounded corners. The current approach to achieve this is to use images. This works out good in most of the cases. But if you want to change the color of the corners its a pain. You should edit all the images first and upload it in the server. It would be great if we can simplify the process. Here comes the power of CSS</p>
<p>Through CSS one can create a rounded corners without using images in no time. So if you want to modify the color it is enough to change the color in CSS. It works out easier.</p>
</div>
<span>
<span class="r4" ></span><span class="r3" ></span><span class="r2" ></span><span class="r1" ></span>
</span>
</div>
<div id="rightContent" class="curvedBox">
<span>
<span class="r1" ></span><span class="r2" ></span><span class="r3" ></span><span class="r4" ></span>
</span>
<div class="content">
<ul>
<li>The curves are done completely through css.</li>
<li>No images are used to make the curve.</li>
</ul>
</div>
<span>
<span class="r4" ></span><span class="r3" ></span><span class="r2" ></span><span class="r1" ></span>
</span>
</div>
<div class="clear"></div>
</div>
<span>
<span class="r4" ></span><span class="r3" ></span><span class="r2" ></span><span class="r1" ></span>
</span>
</div>
</body>
</html>
/****************curvedbox.css****************/
* {
margin:0;
padding:0;
}
body {
background-color:#000;
padding:10px;
font-family: Arial, verdana;
}
.clear {
clear:both;
}
/**************Global curve css***************/
.curvedBox {
}
.curvedBox .r1, .curvedBox .r2, .curvedBox .r3, .curvedBox .r4 {
background-color:#fff;
display:block;
overflow:hidden;
height:1px;
font-size:1px;
}
.curvedBox .r2, .curvedBox .r3, .curvedBox .r4 {
border-width:0 1px;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
.curvedBox .r1 {
margin:0 5px;
}
.curvedBox .r2 {
margin:0 3px;
}
.curvedBox .r3 {
margin:0 2px;
}
.curvedBox .r4 {
margin:0 1px;
height:2px;
}
.curvedBox .content {
background:#fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
padding:10px;
}
/************************************/
#mainWrapper {
width: 100%;
margin-top: 20px;
}
#leftContent {
float:left;
width: 70%;
}
#leftContent .content {
background:#AF1D1D;
color:#fff;
}
#leftContent .r1, #leftContent .r2, #leftContent .r3, #leftContent .r4 {
background-color:#AF1D1D;
border-left:1px solid #AF1D1D;
border-right:1px solid #AF1D1D;
}
#rightContent {
float: right;
width: 27%;
}
#rightContent .content {
background:#690;
color:#fff;
}
#leftContent .content p {
margin: 10px;
}
#rightContent .r2, #rightContent .r3, #rightContent .r4 {
background-color:#690;
border-left:1px solid #690;
border-right:1px solid #690;
}
/**********************************/
.experiment_title {
text-align: center;
padding-bottom: 10px;
}
ul li {
list-style:circle inside;
}