css
Nicer Tables (rounded Corners, Hover Highlight, Even/Odd coloring, Header coloring)
posted Sep 21, 2017, 10:36 AM by Chris Franklin [ updated Sep 21, 2017, 10:39 AM ]
css.tble-info { border: 1px solid #ddd; border-collapse: separate; border-left: 0; border-radius: 4px; border-spacing: 0px; margin-top: 5%; } .tble-info thead { display: table-header-group; vertical-align: middle; border-color: inherit; border-collapse: separate; } .tble-info tr { display: table-row; vertical-align: inherit; border-color: inherit; background-color: #fbfbfb; } .tble-info th, .tble-info td { padding: 5px 4px 6px 4px; text-align: left; vertical-align: top; border-left: 1px solid #ddd; } .tble-info th { background-color: #4CAF50; color: white; } .tble-info td { border-top: 1px solid #ddd; } .tble-info thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child { border-radius: 4px 0 0 0; } .tble-info thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child { border-radius: 0 0 0 4px; } .tble-info tr:nth-child(even) { background-color: #f2f2f2; } .tble-info tr:hover { background-color: #ddd; } html<table class="tble-info"> <thead> <tr> <th>Added on</th> <th>Asset Tag</th> <th>Service Tag</th> <th>Building</th> <th>Mac Address</th> </tr> </thead> <tbody> <tr> <td>2017-09-21 11:01:57</td><td>H15890</td><td>2JH12H2</td><td>BOE</td><td>00H1F8CC846D</td> </tr> <tr> <td>2017-09-21 13:18:04</td><td>H15891</td><td>2JH1H1</td><td>MHS</td><td>0028F8CH1161</td> </tr> <tr> <td>2017-09-21 13:18:35</td><td>H15892</td><td>2JNH1H3</td><td>BHS</td><td>00H118CC8463</td> </tr> </tbody> </table> |
Exclamation mark in a yellow triangle
posted Sep 21, 2017, 4:30 AM by Chris Franklin [ updated Sep 21, 2017, 4:30 AM ]
css.exclamation { position: relative; top: -10px; } .exclamation_mark { position: absolute; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 22px solid #FFFF00; top: 0px; left: 0px; } .exclamation_mark::after { content: "!"; position: absolute; font-size: 20px; color: red; top: 2px; left: -3px; font-weight: bold; } html<div class="exclamation"> <div class="exclamation_mark"></div> </div> |
Check Mark in green Circle
posted Sep 21, 2017, 4:26 AM by Chris Franklin [ updated Sep 21, 2017, 4:26 AM ]
css.checkmark { display:inline-block; width: 22px; height:22px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: 3px; } .checkmark_circle { position: absolute; width:22px; height:22px; background-color: green; border-radius:11px; left:0; top:0; } .checkmark_stem { position: absolute; width:3px; height:9px; background-color:#fff; left:11px; top:6px; } .checkmark_kick { position: absolute; width:3px; height:3px; background-color:#fff; left:8px; top:12px; } html<span class="checkmark"> <div class="checkmark_circle"></div> <div class="checkmark_stem"></div> <div class="checkmark_kick"></div> </span> |
Background Color Shifting
posted Sep 21, 2017, 4:14 AM by Chris Franklin [ updated Sep 21, 2017, 4:14 AM ]
CSSbody { /* Background color shifting */ background: linear-gradient(270deg, #00d3f5, #7354ee); background-size: 400% 400%; -webkit-animation: AnimationName 30s ease infinite; -moz-animation: AnimationName 30s ease infinite; -o-animation: AnimationName 30s ease infinite; animation: AnimationName 30s ease infinite; } /* Background color shifting */ @-webkit-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-o-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } |
1-5 of 5