Membuat 'Color Reference' Sederhana dengan HTML dan CSS

Color Reference, dinamakan seperti itu karena memang bisa sebagai referensi warna dalam hexadecimal.



Sederhana, karena hanya beberapa warna saja yang digunakan dan tidak banyak. Ini dibuat dengan HTML dan CSS serta sedikit kode CSS3. Warna-warna tersebut didapat dari hasil browsing.

Kotak-kotak warna tersebut dibuat dengan menggunakan tag <div>. Agar kotak tersebut mengambang ke sebelah kiri, gunakan float:left; pada style CSS setiap kotak warna.

Script color.html

<!DOCTPYE html>
 <head>
  <title>Color Reference</title>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
 <h1 class="header">Color Reference</h1>
 <div id="cover">
  <div id="satu"><p>#d92400</p></div>
  <div id="dua"><p>#f0f0f0</p></div>
  <div id="tiga"><p>#343434</p></div>
  <div id="empat"><p>#f8f8f8</p></div>
  <div id="lima"><p>#1d1d1d</p></div>
  <div id="enam"><p>#f78d1d</p></div>
  <div id="tujuh"><p>#faa51a</p></div>
  <div id="delapan"><p>#f47a20</p></div>
  <div id="sembilan"><p>#0095cd</p></div>
  <div id="sepuluh"><p>#00adee</p></div>
  <div id="sebelas"><p>#0078a5</p></div>
  <div id="duabelas"><p>#00aaff</p></div>
  <div id="tigabelas"><p>#0088ff</p></div>
  <div id="empatbelas"><p>#1e8cbe</p></div>
  <div id="limabelas"><p>#005684</p></div>
 </div>
</body>
</html>


Baca juga ya..
3 Framework CSS Ini Bisa Bikin Aplikasi Web Ente Jadi Lebih Keren
Ini 3 Alasan Mengapa Ente Harus Belajar Menggunakan Boostrap
Tutorial CSS untuk Pemula: Apa sih CSS..? Lihat Sini Pengertiannya

Script style.css

*{
 margin: 0;
 padding: 0;
}

body{
 text-align: center;
 background: #f8f8f8;
 padding-top: 50px;
}
  
.header{
 width: 820px;
 margin: 0 auto;
 background: -webkit-gradient(linear, left top, left bottom, from(#343434), to(#1d1d1d));
 -moz-linear-gradient(top, #343434, #1d1d1d);
 padding: 20px;
}
  
h1{
 font-family: Consolas, Monaco, Sans-serif;
 font-size: 40px;
 color: #00aaff;
 text-shadow: 2px 1px 1px #f8f8f8;
}
  
#cover{
 margin: 0 auto;
 padding: 0 auto;
 text-align: center;
 width: 860px;
 background: #fff;
 border: 1px solid #ddd;
 box-shadow: inset 0px 0px 5px #999;
 -moz-box-shadow: inset 0px 0px 5px #999;
 -webkit-box-shadow: inset 0px 0px 5px #999;
 overflow: hidden;
}
  
#satu{
 width: 160px;
 height: 160px;
 background: #d92400;
 margin: 10px 5px 10px 10px;
 float: left;
}
  
#satu p{
 color: #fff;
 font-family: Consolas, Monaco, sans-serif;
 font-size: 20px;
 text-shadow: 1px 1px 3px #444;
 padding-top: 70px;
}
  
#dua{
 width: 160px;
 height: 160px;
 background: #f0f0f0;
 margin: 10px 5px 10px 5px;
 float: left;
}
  
#dua p{
 color: #444;
 font-family: Consolas, Monaco, sans-serif;
 font-size: 20px;
 text-shadow: 1px 1px 3px #444;
 padding-top: 70px;
}
  
#tiga{
 width: 160px;
 height: 160px;
 background: #343434;
 margin: 10px 5px 10px 5px;
 float: left;
}
  
#tiga p{
 color: #fff;
 font-family: Consolas, Monaco, sans-serif;
 font-size: 20px;
 text-shadow: 1px 1px 3px #000;
 padding-top: 70px;
}
 
#empat{
 width: 160px;
 height: 160px;
 background: #f8f8f8;
 margin: 10px 5px 10px 5px;
 float: left;
}

#empat p{
 color: #444;
 font-family: Consolas, Monaco, sans-serif;
 font-size: 20px;
 text-shadow: 1px 1px 3px #444;
 padding-top: 70px;
}
  
#lima{
 width: 160px;
 height: 160px;
 background: #1d1d1d;
 margin: 10px 5px 10px 5px;
 float: left;
}
  
#lima p{
 color: #fff;
 font-family: Consolas, Monaco, sans-serif;
 font-size: 20px;
 text-shadow: 1px 1px 3px #000;
 padding-top: 70px;
}
  
#enam{
 width: 160px;
 height: 160px;
 background: #f78d1d;
 margin: 10px 5px 10px 10px;
 float: left;
}
  
#enam p{
 color: #fff;
 font-family: Consolas, Monaco, sans-serif;
 font-size: 20px;
 text-shadow: 1px 1px 3px #444;
 padding-top: 70px;
}
  
#tujuh{
 width: 160px;
 height: 160px;
 background: #faa51a;
 margin: 10px 5px 10px 5px;
 float: left;
}
  
#tujuh p{
 color: #fff;
 font-family: Consolas, Monaco, sans-serif;
 font-size: 20px;
 text-shadow: 1px 1px 3px #444;
 padding-top: 70px;
}
  
#delapan{
 width: 160px;
 height: 160px;
 background: #f47a20;
 margin: 10px 5px 10px 5px;
 float: left;
}
  
#delapan p{
 color: #fff;
 font-family: Consolas, Monaco, sans-serif;
 font-size: 20px;
 text-shadow: 1px 1px 3px #444;
 padding-top: 70px;
 }
  
#sembilan{
 width: 160px;
 height: 160px;
 background: #0095cd;
 margin: 10px 5px 10px 5px;
 float: left;
}
  
#sembilan p{
 color: #fff;
 font-family: Consolas, Monaco, sans-serif;
 font-size: 20px;
 text-shadow: 1px 1px 3px #444;
 padding-top: 70px;
}
  
#sepuluh{
 width: 160px;
 height: 160px;
 background: #00adee;
 margin: 10px 5px 10px 5px;
 float: left;
}
  
#sepuluh p{
 color: #fff;
 font-family: Consolas, Monaco, sans-serif;
 font-size: 20px;
 text-shadow: 1px 1px 3px #444;
 padding-top: 70px;
}
  
#sebelas{
 width: 160px;
 height: 160px;
 background: #0078a5;
 margin: 10px 5px 10px 10px;
 float: left;
}
  
#sebelas p{
 color: #fff;
 font-family: Consolas, Monaco, sans-serif;
 font-size: 20px;
 text-shadow: 1px 1px 3px #444;
 padding-top: 70px;
}
  
#duabelas{
 width: 160px;
 height: 160px;
 background: #00aaff;
 margin: 10px 5px 10px 5px;
 float: left;
}
  
#duabelas p{
 color: #fff;
 font-family: Consolas, Monaco, sans-serif;
 font-size: 20px;
 text-shadow: 1px 1px 3px #444;
 padding-top: 70px;
}
  
#tigabelas{
 width: 160px;
 height: 160px;
 background: #0088ff;
 margin: 10px 5px 10px 5px;
 float: left;
}
  
#tigabelas p{
 color: #fff;
 font-family: Consolas, Monaco, sans-serif;
 font-size: 20px;
 text-shadow: 1px 1px 3px #444;
 padding-top: 70px;
}
  
#empatbelas{
 width: 160px;
 height: 160px;
 background: #1e8cbe;
 margin: 10px 5px 10px 5px;
 float: left;
}
  
#empatbelas p{
 color: #fff;
 font-family: Consolas, Monaco, sans-serif;
 font-size: 20px;
 text-shadow: 1px 1px 3px #444;
 padding-top: 70px;
}
  
#limabelas{
 width: 160px;
 height: 160px;
 background: #005684;
 margin: 10px 5px 10px 5px;
 float: left;
}
  
#limabelas p{
 color: #fff;
 font-family: Consolas, Monaco, sans-serif;
 font-size: 20px;
 text-shadow: 1px 1px 3px #444;
 padding-top: 70px;
}

Pada #cover terdapat overflow:hidden; digunakan untuk memperbaiki tampilan agar lebih rapi setelah diberi float. Coba hapus overflow:hidden; dan lihat apa yang terjadi.

Tag : Web Desain
0 Komentar untuk "Membuat 'Color Reference' Sederhana dengan HTML dan CSS"