Subscribe to posts

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 ]


  • No JavaScript or images 
  • No extra padding in the corders

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 ]

  • No javascript or images

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 ]

  • no Javascript or Images

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>



X in a red circle

posted Sep 21, 2017, 4:22 AM by Chris Franklin   [ updated Sep 21, 2017, 4:22 AM ]


  • No Javascript or Images

css

.xmark {
 padding: 0px;
}
.xmark_circle {
 width: 22px;
 height: 22px;
 border-radius: 22px;
 font-size: 12px;
 color: #fff;
 line-height: 22px;
 text-align: center;
 background: #FF0000;
}

html

<span class="xmark">
 <div class="xmark_circle">X</div>
</span>


Background Color Shifting

posted Sep 21, 2017, 4:14 AM by Chris Franklin   [ updated Sep 21, 2017, 4:14 AM ]

  • #00d3f5 is your starting color
  • #7354ee is your ending color

CSS

body {
 /* 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