css Archives • Yoolk • Digital Ninja

<!-- https://codepen.io/Idered/pen/jbrzro -->
<style>
.c-color-swatch {display: table;width: 100%;table-layout: fixed;max-width: 250px;}
.c-color-swatch__item {display: table-cell;height: 16px;line-height: 16px;text-align: center;user-select: none;position: relative;transition: transform 0.25s;}
.c-color-swatch__item:hover {z-index: 1;transform: scale(1.5);}
.c-color-swatch [type=checkbox]:checked + label:after {content: "";font-size: 9px;vertical-align: top;color: #fff;font-family: FontAwesome;}
</style>
<div class="c-color-swatch">
  <input type="checkbox" name="colors[]" id="color-F9ED69" hidden/>
  <label class="c-color-swatch__item" for="color-F9ED69" style="background: #F9ED69"></label>
  <input type="checkbox" name="colors[]" value="F08A5D" id="color-F08A5D" hidden/>
  <label class="c-color-swatch__item" for="color-F08A5D" style="background: #F08A5D"></label>
  <input type="checkbox" name="colors[]" value="B83B5E" id="color-B83B5E" hidden checked/>
  <label class="c-color-swatch__item" for="color-B83B5E" style="background: #B83B5E"></label>
  <input type="checkbox" name="colors[]" value="6A2C70" id="color-6A2C70" hidden/>
  <label class="c-color-swatch__item" for="color-6A2C70" style="background: #6A2C70"></label>
  <input type="checkbox" name="colors[]" value="2B3964" id="color-2B3964" hidden/>
  <label class="c-color-swatch__item" for="color-2B3964" style="background: #2B3964"></label>
  <input type="checkbox" name="colors[]" value="3482AA" id="color-3482AA" hidden/>
  <label class="c-color-swatch__item" for="color-3482AA" style="background: #3482AA"></label>
  <input type="checkbox" name="colors[]" value="6DB3B5" id="color-6DB3B5" hidden/>
  <label class="c-color-swatch__item" for="color-6DB3B5" style="background: #6DB3B5"></label>
  <input type="checkbox" name="colors[]" value="477D7F" id="color-477D7F" hidden/>
  <label class="c-color-swatch__item" for="color-477D7F" style="background: #477D7F"></label>
  <input type="checkbox" name="colors[]" value="1F5357" id="color-1F5357" hidden/>
  <label class="c-color-swatch__item" for="color-1F5357" style="background: #1F5357"></label>
  <input type="checkbox" name="colors[]" value="64BD97" id="color-64BD97" hidden/>
  <label class="c-color-swatch__item" for="color-64BD97" style="background: #64BD97"></label>
</div>

Vertical align anything #css

/* traditional */
.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
/* Modern with flexbox */
.element-parent {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
    width:100%;
    padding:80px 0;
    text-align: center;
 }

No more items to load