Công cụ lấy mã màu - hay còn gọi là Color Picker là công cụ có sự kết hợp giữa HTML và CSS tạo nên một bảng mã màu rất có ích cho các lập trình web. Nào, giờ chúng ta bắt đầu tạo nó nhé.
 |
| Tạo trang lấy mã màu màu sắc cực đẹp cho Blogger (Blogspot) |
Tạo trang lấy mã màu màu sắc cực đẹp cho Blogger
Tiến hành
1. Các bạn vào Blogger >> Trang >> Trang mới >> Nhập tiêu đề >> Chuyển sang tab HTML >> thêm toàn bộ code sau vào:
<h2 style="text-align: center;">Responsive <span style="font-weight:700">Flat UI</span> Color Picker</h2>
<div id="flatuanhnhim">
<ul class="flatui">
<li style="background: #5C97BF;"><span class="largecode"><span class="smallcode">Mã Màu</span> #5C97BF</span>
</li>
<li style="background: #4B77BE;"><span class="largecode"><span class="smallcode">Mã Màu</span> #4B77BE</span>
</li>
<li style="background: #1F3A93;"><span class="largecode"><span class="smallcode">Mã Màu</span> #1F3A93</span>
</li>
<li style="background: #2574A9;"><span class="largecode"><span class="smallcode">Mã Màu</span> #2574A9</span>
</li>
<li style="background: #67809F;"><span class="largecode"><span class="smallcode">Mã Màu</span> #67809F</span>
</li>
<li style="background: #34495E;"><span class="largecode"><span class="smallcode">Mã Màu</span> #34495E</span>
</li>
<li style="background: #3A539B;"><span class="largecode"><span class="smallcode">Mã Màu</span> #3A539B</span>
</li>
<li style="background: #1E8BC3;"><span class="largecode"><span class="smallcode">Mã Màu</span> #1E8BC3</span>
</li>
<li style="background: #6BB9F0;"><span class="largecode"><span class="smallcode">Mã Màu</span> #6BB9F0</span>
</li>
<li style="background: #22313F;"><span class="largecode"><span class="smallcode">Mã Màu</span> #22313F</span>
</li>
<li style="background: #336E7B;"><span class="largecode"><span class="smallcode">Mã Màu</span> #336E7B</span>
</li>
<li style="background: #19B5FE;"><span class="largecode"><span class="smallcode">Mã Màu</span> #19B5FE</span>
</li>
<li style="background: #89C4F4;"><span class="largecode"><span class="smallcode">Mã Màu</span> #89C4F4</span>
</li>
<li style="background: #2C3E50;"><span class="largecode"><span class="smallcode">Mã Màu</span> #2C3E50</span>
</li>
<li style="background: #3498DB;"><span class="largecode"><span class="smallcode">Mã Màu</span> #3498DB</span>
</li>
<li style="background: #22A7F0;"><span class="largecode"><span class="smallcode">Mã Màu</span> #22A7F0</span>
</li>
<li style="background: #94E0EE;"><span class="largecode"><span class="smallcode">Mã Màu</span> #94E0EE</span>
</li>
<li style="background: #52B3D9;"><span class="largecode"><span class="smallcode">Mã Màu</span> #52B3D9</span>
</li>
<li style="background: #59ABE3;"><span class="largecode"><span class="smallcode">Mã Màu</span> #59ABE3</span>
</li>
<li style="background: #26A65B;"><span class="largecode"><span class="smallcode">Mã Màu</span> #26A65B</span>
</li>
<li style="background: #1E824C;"><span class="largecode"><span class="smallcode">Mã Màu</span> #1E824C</span>
</li>
<li style="background: #00B16A;"><span class="largecode"><span class="smallcode">Mã Màu</span> #00B16A</span>
</li>
<li style="background: #2ABB9B;"><span class="largecode"><span class="smallcode">Mã Màu</span> #2ABB9B</span>
</li>
<li style="background: #4DAF7C;"><span class="largecode"><span class="smallcode">Mã Màu</span> #4DAF7C</span>
</li>
<li style="background: #03A678;"><span class="largecode"><span class="smallcode">Mã Màu</span> #03A678</span>
</li>
<li style="background: #26C281;"><span class="largecode"><span class="smallcode">Mã Màu</span> #26C281</span>
</li>
<li style="background: #019875;"><span class="largecode"><span class="smallcode">Mã Màu</span> #019875</span>
</li>
<li style="background: #3FC380;"><span class="largecode"><span class="smallcode">Mã Màu</span> #3FC380</span>
</li>
<li style="background: #16A085;"><span class="largecode"><span class="smallcode">Mã Màu</span> #16A085</span>
</li>
<li style="background: #2ECC71;"><span class="largecode"><span class="smallcode">Mã Màu</span> #2ECC71</span>
</li>
<li style="background: #C5EFF7;"><span class="largecode"><span class="smallcode">Mã Màu</span> #C5EFF7</span>
</li>
<li style="background: #C8F7C5;"><span class="largecode"><span class="smallcode">Mã Màu</span> #C8F7C5</span>
</li>
<li style="background: #049372;"><span class="largecode"><span class="smallcode">Mã Màu</span> #049372</span>
</li>
<li style="background: #36D7B7;"><span class="largecode"><span class="smallcode">Mã Màu</span> #36D7B7</span>
</li>
<li style="background: #66CC99;"><span class="largecode"><span class="smallcode">Mã Màu</span> #66CC99</span>
</li>
<li style="background: #1BA39C;"><span class="largecode"><span class="smallcode">Mã Màu</span> #1BA39C</span>
</li>
<li style="background: #1BBC9B;"><span class="largecode"><span class="smallcode">Mã Màu</span> #1BBC9B</span>
</li>
<li style="background: #65C6BB;"><span class="largecode"><span class="smallcode">Mã Màu</span> #65C6BB</span>
</li>
<li style="background: #BFBFBF;"><span class="largecode"><span class="smallcode">Mã Màu</span> #BFBFBF</span>
</li>
<li style="background: #ABB7B7;"><span class="largecode"><span class="smallcode">Mã Màu</span> #ABB7B7</span>
</li>
<li style="background: #DADFE1;"><span class="largecode"><span class="smallcode">Mã Màu</span> #DADFE1</span>
</li>
<li style="background: #95A5A6;"><span class="largecode"><span class="smallcode">Mã Màu</span> #95A5A6</span>
</li>
<li style="background: #C5DCE2;"><span class="largecode"><span class="smallcode">Mã Màu</span> #C5DCE2</span>
</li>
<li style="background: #BDC3C7;"><span class="largecode"><span class="smallcode">Mã Màu</span> #BDC3C7</span>
</li>
<li style="background: #EEEEEE;"><span class="largecode"><span class="smallcode">Mã Màu</span> #EEEEEE</span>
</li>
<li style="background: #D2D7D3;"><span class="largecode"><span class="smallcode">Mã Màu</span> #D2D7D3</span>
</li>
<li style="background: #F0E2C5;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F0E2C5</span>
</li>
<li style="background: #EB9532;"><span class="largecode"><span class="smallcode">Mã Màu</span> #EB9532</span>
</li>
<li style="background: #E67E22;"><span class="largecode"><span class="smallcode">Mã Màu</span> #E67E22</span>
</li>
<li style="background: #F27935;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F27935</span>
</li>
<li style="background: #F9BF3B;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F9BF3B</span>
</li>
<li style="background: #F7CA18;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F7CA18</span>
</li>
<li style="background: #F9690E;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F9690E</span>
</li>
<li style="background: #F39C12;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F39C12</span>
</li>
<li style="background: #D35400;"><span class="largecode"><span class="smallcode">Mã Màu</span> #D35400</span>
</li>
<li style="background: #F4D03F;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F4D03F</span>
</li>
<li style="background: #F5AB35;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F5AB35</span>
</li>
<li style="background: #EB974E;"><span class="largecode"><span class="smallcode">Mã Màu</span> #EB974E</span>
</li>
<li style="background: #F2784B;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F2784B</span>
</li>
<li style="background: #F4B350;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F4B350</span>
</li>
<li style="background: #E87E04;"><span class="largecode"><span class="smallcode">Mã Màu</span> #E87E04</span>
</li>
<li style="background: #E74C3C;"><span class="largecode"><span class="smallcode">Mã Màu</span> #E74C3C</span>
</li>
<li style="background: #CF000F;"><span class="largecode"><span class="smallcode">Mã Màu</span> #CF000F</span>
</li>
<li style="background: #C0392B;"><span class="largecode"><span class="smallcode">Mã Màu</span> #C0392B</span>
</li>
<li style="background: #D64541;"><span class="largecode"><span class="smallcode">Mã Màu</span> #D64541</span>
</li>
<li style="background: #EF4836;"><span class="largecode"><span class="smallcode">Mã Màu</span> #EF4836</span>
</li>
<li style="background: #96281B;"><span class="largecode"><span class="smallcode">Mã Màu</span> #96281B</span>
</li>
<li style="background: #D91E18;"><span class="largecode"><span class="smallcode">Mã Màu</span> #D91E18</span>
</li>
<li style="background: #E26A6A;"><span class="largecode"><span class="smallcode">Mã Màu</span> #E26A6A</span>
</li>
<li style="background: #FF0000;"><span class="largecode"><span class="smallcode">Mã Màu</span> #FF0000</span>
</li>
<li style="background: #F22613;"><span class="largecode"><span class="smallcode">Mã Màu</span> #F22613</span>
</li>
<li style="background: #E08283;"><span class="largecode"><span class="smallcode">Mã Màu</span> #E08283</span>
</li>
<li style="background: #9B59B6;"><span class="largecode"><span class="smallcode">Mã Màu</span> #9B59B6</span>
</li>
<li style="background: #8E44AD;"><span class="largecode"><span class="smallcode">Mã Màu</span> #8E44AD</span>
</li>
<li style="background: #BE90D4;"><span class="largecode"><span class="smallcode">Mã Màu</span> #BE90D4</span>
</li>
<li style="background: #BF55EC;"><span class="largecode"><span class="smallcode">Mã Màu</span> #BF55EC</span>
</li>
<li style="background: #9A12B3;"><span class="largecode"><span class="smallcode">Mã Màu</span> #9A12B3</span>
</li>
<li style="background: #913D88;"><span class="largecode"><span class="smallcode">Mã Màu</span> #913D88</span>
</li>
<li style="background: #722D6A;"><span class="largecode"><span class="smallcode">Mã Màu</span> #722D6A</span>
</li>
<li style="background: #740A4E;"><span class="largecode"><span class="smallcode">Mã Màu</span> #740A4E</span>
</li>
</ul>
</div>
<style type="text/css">
/* Flat UI Color Picker */
#flatuanhnhim ul.flatui{position:relative;display:table;width:100%;text-align:center;color:#fff;font-size:12px;margin:auto;position:relative;padding:0}
#flatuanhnhim 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)}
#flatuanhnhim ul.flatui li:hover{z-index:4}
#flatuanhnhim 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)}
#flatuanhnhim ul.flatui li:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#flatuanhnhim ul.flatui li:after{content:'Nhấn Ctr + C Để Sao Chép';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}
#flatuanhnhim ul.flatui li:hover:after{opacity:1;visibility:visible;transform:translate(0,-10px);z-index:1;transition-delay:.8s}
#flatuanhnhim ul.flatui li .largecode{width:100%;padding:0;display:block;float:none;margin:auto;clear:both;z-index:3}
#flatuanhnhim 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){#flatuanhnhim ul.flatui li{width:33.3%;line-height:normal}}
@media screen and (max-width:640px){#flatuanhnhim ul.flatui li{width:50%}}
@media screen and (max-width:480px){#flatuanhnhim ul.flatui li{width:100%}}
#comments,#sidebar-wrapper {display:none!important;}
#post-wrapper {width:100%!important;}
</style>
2. Sau đó nhấn
Xuất bản và tận hưởng kết quả.
Lời Kết
Thủ thuật rất đơn giản, giao diện đẹp, có sẵn khi bạn cần lấy mã màu.
Các bạn có thể copy code trên rồi paste vào notepad ++ rồi bổ sung mã màu mà bạn muốn.