CSS Color Picker Flat UI

CSS Color Picker Flat UI
Tuesday, May 26, 2020

  1. Open Blogger.com
  2. Click "Pages"
  3. Create a new page
  4. Enter Page Title
  5. Switch to HTML mode, then enter the code below:

<div id="flatufirefudh">
    <ul class="flatui">
      <li style="background: rgb(92, 151, 191);"><span class="bigcode"><span class="smallcode">Color Code</span> #5C97BF</span>
      </li>
      <li style="background: rgb(75, 119, 190);"><span class="bigcode"><span class="smallcode">Color Code</span> #4B77BE</span>
      </li>
      <li style="background: rgb(31, 58, 147);"><span class="bigcode"><span class="smallcode">Color Code</span> #1F3A93</span>
      </li>
      <li style="background: rgb(37, 116, 169);"><span class="bigcode"><span class="smallcode">Color Code</span> #2574A9</span>
      </li>
      <li style="background: rgb(103, 128, 159);"><span class="bigcode"><span class="smallcode">Color Code</span> #67809F</span>
      </li>
      <li style="background: rgb(52, 73, 94);"><span class="bigcode"><span class="smallcode">Color Code</span> #34495E</span>
      </li>
      <li style="background: rgb(58, 83, 155);"><span class="bigcode"><span class="smallcode">Color Code</span> #3A539B</span>
      </li>
      <li style="background: rgb(30, 139, 195);"><span class="bigcode"><span class="smallcode">Color Code</span> #1E8BC3</span>
      </li>
      <li style="background: rgb(107, 185, 240);"><span class="bigcode"><span class="smallcode">Color Code</span> #6BB9F0</span>
      </li>
      <li style="background: rgb(34, 49, 63);"><span class="bigcode"><span class="smallcode">Color Code</span> #22313F</span>
      </li>
      <li style="background: rgb(51, 110, 123);"><span class="bigcode"><span class="smallcode">Color Code</span> #336E7B</span>
      </li>
      <li style="background: rgb(25, 181, 254);"><span class="bigcode"><span class="smallcode">Color Code</span> #19B5FE</span>
      </li>
      <li style="background: rgb(137, 196, 244);"><span class="bigcode"><span class="smallcode">Color Code</span> #89C4F4</span>
      </li>
      <li style="background: rgb(44, 62, 80);"><span class="bigcode"><span class="smallcode">Color Code</span> #2C3E50</span>
      </li>
      <li style="background: rgb(52, 152, 219);"><span class="bigcode"><span class="smallcode">Color Code</span> #3498DB</span>
      </li>
      <li style="background: rgb(34, 167, 240);"><span class="bigcode"><span class="smallcode">Color Code</span> #22A7F0</span>
      </li>
      <li style="background: rgb(148, 224, 238);"><span class="bigcode"><span class="smallcode">Color Code</span> #94E0EE</span>
      </li>
      <li style="background: rgb(82, 179, 217);"><span class="bigcode"><span class="smallcode">Color Code</span> #52B3D9</span>
      </li>
      <li style="background: rgb(89, 171, 227);"><span class="bigcode"><span class="smallcode">Color Code</span> #59ABE3</span>
      </li>
      <li style="background: rgb(38, 166, 91);"><span class="bigcode"><span class="smallcode">Color Code</span> #26A65B</span>
      </li>
      <li style="background: rgb(30, 130, 76);"><span class="bigcode"><span class="smallcode">Color Code</span> #1E824C</span>
      </li>
      <li style="background: rgb(0, 177, 106);"><span class="bigcode"><span class="smallcode">Color Code</span> #00B16A</span>
      </li>
      <li style="background: rgb(42, 187, 155);"><span class="bigcode"><span class="smallcode">Color Code</span> #2ABB9B</span>
      </li>
      <li style="background: rgb(77, 175, 124);"><span class="bigcode"><span class="smallcode">Color Code</span> #4DAF7C</span>
      </li>
      <li style="background: rgb(3, 166, 120);"><span class="bigcode"><span class="smallcode">Color Code</span> #03A678</span>
      </li>
      <li style="background: rgb(38, 194, 129);"><span class="bigcode"><span class="smallcode">Color Code</span> #26C281</span>
      </li>
      <li style="background: rgb(1, 152, 117);"><span class="bigcode"><span class="smallcode">Color Code</span> #019875</span>
      </li>
      <li style="background: rgb(63, 195, 128);"><span class="bigcode"><span class="smallcode">Color Code</span> #3FC380</span>
      </li>
      <li style="background: rgb(22, 160, 133);"><span class="bigcode"><span class="smallcode">Color Code</span> #16A085</span>
      </li>
      <li style="background: rgb(46, 204, 113);"><span class="bigcode"><span class="smallcode">Color Code</span> #2ECC71</span>
      </li>
      <li style="background: rgb(197, 239, 247);"><span class="bigcode"><span class="smallcode">Color Code</span> #C5EFF7</span>
      </li>
      <li style="background: rgb(200, 247, 197);"><span class="bigcode"><span class="smallcode">Color Code</span> #C8F7C5</span>
      </li>
      <li style="background: rgb(4, 147, 114);"><span class="bigcode"><span class="smallcode">Color Code</span> #049372</span>
      </li>
      <li style="background: rgb(54, 215, 183);"><span class="bigcode"><span class="smallcode">Color Code</span> #36D7B7</span>
      </li>
      <li style="background: rgb(102, 204, 153);"><span class="bigcode"><span class="smallcode">Color Code</span> #66CC99</span>
      </li>
      <li style="background: rgb(27, 163, 156);"><span class="bigcode"><span class="smallcode">Color Code</span> #1BA39C</span>
      </li>
      <li style="background: rgb(27, 188, 155);"><span class="bigcode"><span class="smallcode">Color Code</span> #1BBC9B</span>
      </li>
      <li style="background: rgb(101, 198, 187);"><span class="bigcode"><span class="smallcode">Color Code</span> #65C6BB</span>
      </li>
      <li style="background: rgb(191, 191, 191);"><span class="bigcode"><span class="smallcode">Color Code</span> #BFBFBF</span>
      </li>
      <li style="background: rgb(171, 183, 183);"><span class="bigcode"><span class="smallcode">Color Code</span> #ABB7B7</span>
      </li>
      <li style="background: rgb(218, 223, 225);"><span class="bigcode"><span class="smallcode">Color Code</span> #DADFE1</span>
      </li>
      <li style="background: rgb(149, 165, 166);"><span class="bigcode"><span class="smallcode">Color Code</span> #95A5A6</span>
      </li>
      <li style="background: rgb(197, 220, 226);"><span class="bigcode"><span class="smallcode">Color Code</span> #C5DCE2</span>
      </li>
      <li style="background: rgb(189, 195, 199);"><span class="bigcode"><span class="smallcode">Color Code</span> #BDC3C7</span>
      </li>
      <li style="background: rgb(238, 238, 238);"><span class="bigcode"><span class="smallcode">Color Code</span> #EEEEEE</span>
      </li>
      <li style="background: rgb(210, 215, 211);"><span class="bigcode"><span class="smallcode">Color Code</span> #D2D7D3</span>
      </li>
      <li style="background: rgb(240, 226, 197);"><span class="bigcode"><span class="smallcode">Color Code</span> #F0E2C5</span>
      </li>
      <li style="background: rgb(235, 149, 50);"><span class="bigcode"><span class="smallcode">Color Code</span> #EB9532</span>
      </li>
      <li style="background: rgb(230, 126, 34);"><span class="bigcode"><span class="smallcode">Color Code</span> #E67E22</span>
      </li>
      <li style="background: rgb(242, 121, 53);"><span class="bigcode"><span class="smallcode">Color Code</span> #F27935</span>
      </li>
      <li style="background: rgb(249, 191, 59);"><span class="bigcode"><span class="smallcode">Color Code</span> #F9BF3B</span>
      </li>
      <li style="background: rgb(247, 202, 24);"><span class="bigcode"><span class="smallcode">Color Code</span> #F7CA18</span>
      </li>
      <li style="background: rgb(249, 105, 14);"><span class="bigcode"><span class="smallcode">Color Code</span> #F9690E</span>
      </li>
      <li style="background: rgb(243, 156, 18);"><span class="bigcode"><span class="smallcode">Color Code</span> #F39C12</span>
      </li>
      <li style="background: rgb(211, 84, 0);"><span class="bigcode"><span class="smallcode">Color Code</span> #D35400</span>
      </li>
      <li style="background: rgb(244, 208, 63);"><span class="bigcode"><span class="smallcode">Color Code</span> #F4D03F</span>
      </li>
      <li style="background: rgb(245, 171, 53);"><span class="bigcode"><span class="smallcode">Color Code</span> #F5AB35</span>
      </li>
      <li style="background: rgb(235, 151, 78);"><span class="bigcode"><span class="smallcode">Color Code</span> #EB974E</span>
      </li>
      <li style="background: rgb(242, 120, 75);"><span class="bigcode"><span class="smallcode">Color Code</span> #F2784B</span>
      </li>
      <li style="background: rgb(244, 179, 80);"><span class="bigcode"><span class="smallcode">Color Code</span> #F4B350</span>
      </li>
      <li style="background: rgb(232, 126, 4);"><span class="bigcode"><span class="smallcode">Color Code</span> #E87E04</span>
      </li>
      <li style="background: rgb(231, 76, 60);"><span class="bigcode"><span class="smallcode">Color Code</span> #E74C3C</span>
      </li>
      <li style="background: rgb(207, 0, 15);"><span class="bigcode"><span class="smallcode">Color Code</span> #CF000F</span>
      </li>
      <li style="background: rgb(192, 57, 43);"><span class="bigcode"><span class="smallcode">Color Code</span> #C0392B</span>
      </li>
      <li style="background: rgb(214, 69, 65);"><span class="bigcode"><span class="smallcode">Color Code</span> #D64541</span>
      </li>
      <li style="background: rgb(239, 72, 54);"><span class="bigcode"><span class="smallcode">Color Code</span> #EF4836</span>
      </li>
      <li style="background: rgb(150, 40, 27);"><span class="bigcode"><span class="smallcode">Color Code</span> #96281B</span>
      </li>
      <li style="background: rgb(217, 30, 24);"><span class="bigcode"><span class="smallcode">Color Code</span> #D91E18</span>
      </li>
      <li style="background: rgb(226, 106, 106);"><span class="bigcode"><span class="smallcode">Color Code</span> #E26A6A</span>
      </li>
      <li style="background: rgb(255, 0, 0);"><span class="bigcode"><span class="smallcode">Color Code</span> #FF0000</span>
      </li>
      <li style="background: rgb(242, 38, 19);"><span class="bigcode"><span class="smallcode">Color Code</span> #F22613</span>
      </li>
      <li style="background: rgb(224, 130, 131);"><span class="bigcode"><span class="smallcode">Color Code</span> #E08283</span>
      </li>
      <li style="background: rgb(155, 89, 182);"><span class="bigcode"><span class="smallcode">Color Code</span> #9B59B6</span>
      </li>
      <li style="background: rgb(142, 68, 173);"><span class="bigcode"><span class="smallcode">Color Code</span> #8E44AD</span>
      </li>
      <li style="background: rgb(190, 144, 212);"><span class="bigcode"><span class="smallcode">Color Code</span> #BE90D4</span>
      </li>
      <li style="background: rgb(191, 85, 236);"><span class="bigcode"><span class="smallcode">Color Code</span> #BF55EC</span>
      </li>
      <li style="background: rgb(154, 18, 179);"><span class="bigcode"><span class="smallcode">Color Code</span> #9A12B3</span>
      </li>
      <li style="background: rgb(145, 61, 136);"><span class="bigcode"><span class="smallcode">Color Code</span> #913D88</span>
      </li>
      <li style="background: rgb(114, 45, 106);"><span class="bigcode"><span class="smallcode">Color Code</span> #722D6A</span>
      </li>
      <li style="background: rgb(116, 10, 78);"><span class="bigcode"><span class="smallcode">Color Code</span> #740A4E</span>
      </li>
    </ul>
</div>
<style scoped="" type="text/css">
/* Flat UI Color */
#flatufirefudh ul.flatui{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}
#flatufirefudh ul.flatui li{position:relative;display:flex;float:left;width:25%;min-height:160px;padding:4%;list-style:none;background:#444;text-align:center;font-family:inherit;color:rgba(255,255,255,);font-size:1.1rem;margin:auto;font-weight:700;backface-visibility:hidden;transition:all .3s cubic-bezier(1,0.015,0.295,1.225)}
#flatufirefudh ul.flatui li:hover{z-index:4}
#flatufirefudh ul.flatui li:before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:;z-index:1;opacity:0;visibility:hidden;transform:scale(0.4)}
#flatufirefudh ul.flatui li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#flatufirefudh ul.flatui li:after{content:'Copy Color Code';display:block;position:absolute;padding:10px 0;font-weight:400;font-size:.8rem;left:0;right:0;bottom:0;opacity:0;color:rgba(255,255,255,.5);font-weight:700;visibility:hidden;transform:translate(0,30px);transition:all .3s cubic-bezier(1,0.015,0.295,1.225);transition-delay:.1s}
#flatufirefudh ul.flatui li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}
#flatufirefudh ul.flatui li .bigcode{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}
#flatufirefudh ul.flatui li .smallcode{width:100%;padding:0;display:block;float:none;margin:0 auto 10px auto;font-weight:400;font-size:.8rem;clear:both;z-index:3}
@media screen and (max-width:800px){#flatufirefudh ul.flatui li{width:33.3%;line-height:normal}}
@media screen and (max-width:640px){#flatufirefudh ul.flatui li{width:50%}}
@media screen and (max-width:480px){#flatufirefudh ul.flatui li{width:100%}}

#comments,#sidebar-wrapper {display:none;}
#post-wrapper {float:none;width:100%;margin:0 auto;max-width:100%;}

</style>
6. Save and publish page.

Result:
 

See the Pen CSS Flat UI Color Pict by Firefudh (@firefudh) on CodePen.

Source:
  • www.arlinadzgn.com

0 Response to "CSS Color Picker Flat UI"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel