CSS

CSS

HTML5 Table CSS

The below code create changes the appearance of a simple HTML Table

Final Output

HTML Table CSS

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

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>
Posted in CSS, HTML5 Tagged with: , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news