CSS
HTML5 Table CSS
The below code create changes the appearance of a simple HTML Table
Final Output
<!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
<!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