Archive for the 'CSS' Category

Changing CSS class through PHP

Its a very simple way of changing css class using php, all you have to do is to run a for loop and each loop it will change the class.

Changing CSS class through PHP

First we define css classes as gray blue green and black, and we’ll use it in table using php.

<html>
<title>Changing CSS class through PHP - Demo</title>
<head>
<style>

.gray{background-color:red; color:white;font-size:20px; font-weight:bold; }
.blue{background-color:blue; color:white;font-size:20px; font-weight:bold; }
.green{background-color:green; color:white;font-size:20px; font-weight:bold; }
.black{background-color:black; color:white;font-size:20px; font-weight:bold; }
</style>
</head>
<body>

<table width=”500″ border=”6″ cellspacing=”6″ cellpadding=”6″ >

<?php
for($row=1; $row<=10; $row++)
{ echo “<tr>”;
for($column=1; $column<=4; $column++)
{
switch($column){
case 1: $class=”gray”; break;
case 2: $class=”blue”; break;
case 3: $class=”green”; break;
default: $class=”black”;
}
echo “<td class=\”$class\” align=\”center\”>[$row,$column]</td>”;
}

echo “</tr>”;
}
?>
</table>
</body>

Watch demo

css border shades without images

Its a very simple css code, and creat a shaded like affect using multiple borders. It has 7 borders with blending shades.

shaded css border

<html>
<head>
<style>
html,body{ margin:0; padding:0; text-align:center; height:100%;}
#sh1{ margin:0 auto; width:800px; border-left:1px solid #fdfdfd; border-right:1px solid #fdfdfd;text-align:left; height:100%;_margin-right:-3px; }
#sh2{ border-left:1px solid #f8f8f8;border-right:1px solid #f8f8f8;height:100%}
#sh3{border-left:1px solid #f1f1f1;border-right:1px solid #f1f1f1; height:100%}
#sh4{border-left:1px solid #e7e7e7;border-right:1px solid #e7e7e7;height:100%}
#sh5{border-left:1px solid #dadada;border-right:1px solid #dadada; height:100%}
#sh6{border-left:1px solid #cacaca;border-right:1px solid #cacaca;height:100%}
#sh7{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea;height:100%}
</style>
</head>
<body>
<div id=”sh1″>
<div id=”sh2″>
<div id=”sh3″>
<div id=”sh4″>
<div id=”sh5″>
<div id=”sh6″>
<div id=”sh7″>
Your Content goes here..<br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

The advantage of using this method over using images is that you can easily change the width of your site without changing the background image.

Watch demo