CSS
HTML5 Table CSS
The below code create changes the appearance of a simple HTML Table
Final Output
HTML Table CSS
<!DOCTYPE HTML>
<html>
<head>
<style>
.kstable
{
margin:0px;
padding:0px;
width:100%;
box-shadow: 10px 10px 5px #999999;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
border-bottom-left-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-right-radius:10px;
}
.kstable table
{
border:0px solid #000000;
border-width:1px 0px 0px 1px;
border-spacing: 0px;
width: 100%;
height:100%;
margin:0px;
padding:0px;
background-color: #ffeedd;
}
.kstable td
{
border:0px solid #000000;
border-width:0px 1px 1px 0px; //top, right, bottom, left
font-size:15px;
padding:5px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: lighter;
}
.kstable th
{
background:-o-linear-gradient(bottom, #999999 5%, #0c0600 100%);
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #999999), color-stop(1, #0c0600) );
background:-moz-linear-gradient( center top, #999999 5%, #0c0600 100% );
border:1px solid #000000;
text-align:center;
border-width:0px 1px 2px 0px;
font-size:18px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: lighter;
color:#ffffff;
}
.kstable tr:nth-child(odd)
{
background-color:#e5eff9;
}
.kstable tr:nth-child(even)
{
background-color:#ffffff;
}
</style>
</head>
<body>
<div class="kstable">
<table>
<tr>
<th>Employee Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>1000</td>
<td>Debasis</td>
<td>Das</td>
<td><a href="mailto:debasis_das@knowstack.com?Subject=Regarding Knowstack">debasis_das@knowstack.com</a></td>
<td>408-000-0000</td>
</tr>
<tr>
<td>1001</td>
<td>John</td>
<td>Doe</td>
<td>johndoe@knowstack.com</td>
<td>408-000-0000</td>
</tr>
<tr>
<td>1002</td>
<td>Jane</td>
<td>Doe</td>
<td>janedoe@knowstack.com</td>
<td>408-000-0000</td>
</tr>
<tr>
<td>1003</td>
<td>Mary</td>
<td>Jane</td>
<td>maryjane@knowstack.com</td>
<td>408-000-0000</td>
</tr>
</table>
</body>
</html>
Button CSS
CSS Button
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.btnOne {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 4;
-moz-border-radius: 4;
border-radius: 4px;
text-shadow: 0px 0px 0px #666666;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
box-shadow: 0px 1px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
border: solid #1f628d 1px;
text-decoration: none;
}
.btnOne:hover {
background: #0c61ab;
background-image: -webkit-linear-gradient(top, #0c61ab, #3498db);
background-image: -moz-linear-gradient(top, #0c61ab, #3498db);
background-image: -ms-linear-gradient(top, #0c61ab, #3498db);
background-image: -o-linear-gradient(top, #0c61ab, #3498db);
background-image: linear-gradient(to bottom, #0c61ab, #3498db);
text-decoration: none;
}
</style>
</head>
<body>
<div >
<button type="button" class="btnOne">Button One</button>
</div>
</body>
</html>
Leave a Reply