Home CSS Tips and Triks Membuat Table Periodic dengan CSS

Membuat Table Periodic dengan CSS

Diterbitkan



Saya masih ingat pada waktu SMA waktu pelajaran Kimia saya lupa membawa table Periodic, kemudian saya di marahi oleh ibu guru nya, oleh sebab itu saya ingin membuat table periodic bagi para pelupa, hahahahah termasuk saya sihhh :).
Oke sekarang siapkan file berikut.

Untuk css nya buat file Style.css 
* { box-sizing: border-box; }

body {
  background:linear-gradient(#dbeaf8, #dbeaf8);
  color:#222;
  font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
}

.wrapper {
  width:1050px;
  margin:30px auto;
  position:relative;
} 

.main:after {
  clear:both;
  content:"";
  display:table;
}
 
.main li {
  width:56px;
  height:60px;
  border:1px solid rgba(0,0,0,0.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);
  position:relative;
  font-size:18px;
  float:left;
  padding:0 2px;
  margin:1px;
  cursor:pointer;
  padding-top:20px;
  overflow:hidden;
  transition:all .2s ease-in;
  text-shadow:0 1px 0 rgba(255,255,255,0.2);
}

.main li span {
  display:block;
  line-height:1;
  font-size:9px;
  color:black; 
  padding-top:9px;
}

.main .empty {
  border:none; 
  box-shadow:none;
  cursor:default;
}

.deactivate {
  opacity:0.5;
  -webkit-filter:grayscale(70%);
  filter:grayscale(70%);
}

.main li:before,
.main li:after {
  content:attr(data-pos);
  position:absolute;
  top:3px;
  left:3px;
  color:black;
  font-size:8px;
  line-height:1;
}

.main li:after {
  content:attr(data-nb);
  left:auto;
  right:3px;
}

.main li:hover {
  transform:scale(2);
  z-index:100;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
} 

.main .empty:hover {
  box-shadow:none;
  transform:none;
}

.type-0 { background:#fff; }
.type-1 { background:#dddddd; }
.type-2 { background:#a8bffa; }
.type-3 { background:#F8B707; }
.type-4 { background:#f3f300; }
.type-5 { background:#3bd93b; }
.type-6 { background:#dd9999; }
.type-7 { background:#4CAFFA; }
.type-8 { background:#ffaa88; }
.type-9 { background:#ddaacc; }

.cat-0 { color:#222; }
.cat-1 { color:#0000dc; }
.cat-2 { color:#b10601; }
.cat-3 { color:#555; }

.legend {
  position:absolute;
  top:0;
  left:20%;
  padding:10px;
  font-size:11px;
  background:#f1edec;
  border:1px solid rgba(0,0,0,0.2);
  border-radius:15px;
  box-shadow:
    inset 0 1px 1px white,
    inset 0 -5px 3px #dddcdb,
    0 0 10px rgba(0,0,0,0.2);
}

.legend:after {
  content:"";
  display:table;
  clear:table;
}

.legend ul { float:left; }

.legend .list-2 {
  margin-left:40px; 
  width:200px;
}

.legend .list-1 li { margin:7px 0; }
.legend .list-1 li:first-of-type { margin-top: 2px; }

.legend .list-1 span {
  border:1px solid black; 
  display:inline-block;
  padding:3px;
  width:20px;
  text-align:center;
  height:20px; 
  margin-right:5px;
}

.legend .list-2 li {
  margin:2px;
  padding:3px;
  float:left; 
  border:1px solid rgba(0,0,0,0.2);
  width:48%;
  cursor:pointer;
}
Kemudian untuk viewernya buat file index.html 
<link href="Style.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript" src="tbperiodic.js"></script>
<div class="wrapper">
<ul class="main">
  
  <!-- ROW 1 -->
  
  <li data-pos="1" data-nb="1.0079" class="type-1 cat-2">H<span>Hydrogen</span></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  
  <li class="empty"></li>
  <li class="empty"></li>
  <li data-pos="2" data-nb="4.0026" class="type-2 cat-2">He<span>Helium</span></li>
  
  <!-- ROW 2 -->
  
  <li data-pos="3" data-nb="6.941" class="type-3 cat-0">Li<span>Lithium</span></li>
  <li data-pos="4" data-nb="9.0122" class="type-4 cat-0">Be<span>Beryllium</span></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  
  <li class="empty"></li>
  <li class="empty"></li>
  <li data-pos="5" data-nb="10.811" class="type-5 cat-0">B<span>Boron</span></li>
  <li data-pos="6" data-nb="12.011" class="type-5 cat-0">C<span>Carbon</span></li>
  <li data-pos="7" data-nb="14.007" class="type-5 cat-2">N<span>Nitrogen</span></li>
  
  <li data-pos="8" data-nb="15.999" class="type-5 cat-2">O<span>Oxygen</span></li>
  <li data-pos="9" data-nb="18.998" class="type-5 cat-2">F<span>Fluorine</span></li>
  <li data-pos="10" data-nb="20.180" class="type-2 cat-2">Ne<span>Neon</span></li>
  
  <!-- ROW 3 -->
  
  <li data-pos="11" data-nb="22.990" class="type-3 cat-0">Na<span>Sodium</span></li>
  <li data-pos="12" data-nb="24.305" class="type-4 cat-0">Mg<span>Magnesium</span></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  <li class="empty"></li>
  
  <li class="empty"></li>
  <li class="empty"></li>
  <li data-pos="13" data-nb="26.982" class="type-7 cat-0">Al<span>Aluminium</span></li>
  <li data-pos="14" data-nb="28.086" class="type-5 cat-0">Si<span>Silicon</span></li>
  <li data-pos="15" data-nb="30.974" class="type-5 cat-0">P<span>Phosphorus</span></li>
  
  <li data-pos="16" data-nb="32.065" class="type-5 cat-0">S<span>Sulfur</span></li>
  <li data-pos="17" data-nb="35.453" class="type-5 cat-2">Cl<span>Chlorine</span></li>
  <li data-pos="18" data-nb="39.948" class="type-2 cat-2">Ar<span>Argon</span></li>
  
  <!-- ROW 4 -->
  
  <li data-pos="19" data-nb="39.098" class="type-3 cat-0">K<span>Potassium</span></li>
  <li data-pos="20" data-nb="40.078" class="type-4 cat-0">Ca<span>Calcium</span></li>
  <li data-pos="21" data-nb="44.956" class="type-6 cat-0">Sc<span>Scandium</span></li>
  <li data-pos="22" data-nb="47.867" class="type-6 cat-0">Ti<span>Titanium</span></li>
  <li data-pos="23" data-nb="50.942" class="type-6 cat-0">V<span>Vanadium</span></li>
  
  <li data-pos="24" data-nb="51.996" class="type-6 cat-0">Cr<span>Chromium</span></li>
  <li data-pos="25" data-nb="54.938" class="type-6 cat-0">Mn<span>Manganese</span></li>
  <li data-pos="26" data-nb="55.845" class="type-6 cat-0">Fe<span>Iron</span></li>
  <li data-pos="27" data-nb="58.933" class="type-6 cat-0">Co<span>Cobalt</span></li>
  <li data-pos="28" data-nb="58.693" class="type-6 cat-0">Ni<span>Nickel</span></li>
  
  <li data-pos="29" data-nb="63.546" class="type-6 cat-0">Cu<span>Copper</span></li>
  <li data-pos="30" data-nb="65.39" class="type-7 cat-0">Zn<span>Zinc</span></li>
  <li data-pos="31" data-nb="69.723" class="type-7 cat-0">Ga<span>Gallium</span></li>
  <li data-pos="32" data-nb="72.64" class="type-7 cat-0">Ge<span>Germanium</span></li>
  <li data-pos="33" data-nb="74.922" class="type-5 cat-0">As<span>Arsenic</span></li>
  
  <li data-pos="34" data-nb="78.96" class="type-5 cat-0">Se<span>Selenium</span></li>
  <li data-pos="35" data-nb="79.904" class="type-5 cat-1">Br<span>Bromine</span></li>
  <li data-pos="36" data-nb="83.80" class="type-2 cat-2">Kr<span>Krypton</span></li>
  
  <!-- ROW 5 -->
  
  <li data-pos="37" data-nb="85.468" class="type-3 cat-0">Rb<span>Rubidium</span></li>
  <li data-pos="38" data-nb="87.62" class="type-4 cat-0">Sr<span>Strontium</span></li>
  <li data-pos="39" data-nb="88.906" class="type-6 cat-0">Y<span>Yttrium</span></li>
  <li data-pos="40" data-nb="91.224" class="type-6 cat-0">Zr<span>Zirconium</span></li>
  <li data-pos="41" data-nb="92.906" class="type-6 cat-0">Nb<span>Niobium</span></li>
  
 <li data-pos="42" data-nb="95.94" class="type-6 cat-0">Mo<span>Molybdenum</span></li>
  <li data-pos="43" data-nb="(96)" class="type-6 cat-0">Tc<span>Technetium</span></li>
  <li data-pos="44" data-nb="101.07" class="type-6 cat-0">Ru<span>Ruthenium</span></li>
  <li data-pos="45" data-nb="102.91" class="type-6 cat-0">Rh<span>Rhodium</span></li>
  <li data-pos="46" data-nb="106.42" class="type-6 cat-0">Pd<span>Palladium</span></li>
  
  <li data-pos="47" data-nb="107.87" class="type-6 cat-0">Ag<span>Silver</span></li>
  <li data-pos="48" data-nb="112.41" class="type-7 cat-0">Cd<span>Cadmium</span></li>
  <li data-pos="49" data-nb="114.82" class="type-7 cat-0">In<span>Indium</span></li>
  <li data-pos="50" data-nb="118.71" class="type-7 cat-0">Sn<span>Tin</span></li>
  <li data-pos="51" data-nb="121.76" class="type-7 cat-0">Sb<span>Antimony</span></li>
  
  <li data-pos="52" data-nb="127.60" class="type-5 cat-0">Te<span>Tellurium</span></li>
  <li data-pos="53" data-nb="126.90" class="type-5 cat-0">I<span>Iodine</span></li>
  <li data-pos="54" data-nb="131.29" class="type-2 cat-2">Xe<span>Xenon</span></li>
  
  <!-- ROW 6 -->
  
  <li data-pos="55" data-nb="132.91" class="type-3 cat-0">Cs<span>Caesium</span></li>
  <li data-pos="56" data-nb="137.33" class="type-4 cat-0">Ba<span>Barium</span></li>
  <li data-pos="57-71" class="type-8">La-Lu<span>Lanthanide</span></li>
  <li data-pos="72" data-nb="178.49" class="type-6 cat-0">Hf<span>Hafnium</span></li>
  <li data-pos="73" data-nb="180.95" class="type-6 cat-0">Ta<span>Tantalum</span></li>
  
  <li data-pos="74" data-nb="183.64" class="type-6 cat-0">W<span>Tungsten</span></li>
  <li data-pos="75" data-nb="186.21" class="type-6 cat-0">Re<span>Rhenium</span></li>
  <li data-pos="76" data-nb="190.23" class="type-6 cat-0">Os<span>Osmium</span></li>
  <li data-pos="77" data-nb="192.22" class="type-6 cat-0">Ir<span>Iridium</span></li>
  <li data-pos="78" data-nb="195.08" class="type-6 cat-0">Pt<span>Platinum</span></li>
  
 <li data-pos="79" data-nb="196.97" class="type-6 cat-0">Au<span>Gold</span></li>
  <li data-pos="80" data-nb="200.59" class="type-7 cat-1">Hg<span>Mercury</span></li>
  <li data-pos="81" data-nb="204.38" class="type-7 cat-0">Tl<span>Thallium</span></li>
  <li data-pos="82" data-nb="207.2" class="type-7 cat-0">Pb<span>Lead</span></li>
  <li data-pos="83" data-nb="208.96" class="type-7 cat-0">Bi<span>Bismuth</span></li>
  
  <li data-pos="84" data-nb="(209)" class="type-7 cat-0">Po<span>Polonium</span></li>
  <li data-pos="85" data-nb="(210)" class="type-5 cat-0">At<span>Astatine</span></li>
  <li data-pos="86" data-nb="(222)" class="type-2 cat-2">Rn<span>Radon</span></li>
  
  <!-- ROW 7 -->
  
  <li data-pos="87" data-nb="(223)" class="type-3 cat-0">Fr<span>Francium</span></li>
  <li data-pos="88" data-nb="(226)" class="type-4 cat-0">Ra<span>Radium</span></li>
  <li data-pos="89-103" class="type-9">Ac-Lr<span>Actinide</span></li>
  <li data-pos="104" data-nb="(261)" class="type-6 cat-3">Rf<span>Rutherfodum</span></li>
  <li data-pos="105" data-nb="(262)" class="type-6 cat-3">Db<span>Dubnium</span></li>
  
  <li data-pos="106" data-nb="(266)" class="type-6 cat-3">Sg<span>Seaborgium</span></li>
  <li data-pos="107" data-nb="(264)" class="type-6 cat-3">Bh<span>Bohrium</span></li>
  <li data-pos="108" data-nb="(277)" class="type-6 cat-3">Hs<span>Hassium</span></li>
  <li data-pos="109" data-nb="(268)" class="type-6 cat-3">Mt<span>Meitnerium</span></li>
  <li data-pos="110" data-nb="(281)" class="type-6 cat-3">Ds<span>Damstadium</span></li>
  
  <li data-pos="111" data-nb="(272)" class="type-6 cat-3">Rg<span>Roentgenium</span></li>
  <li data-pos="112" data-nb="(285)" class="type-7 cat-3">Uub<span>Ununbium</span></li>
  <li data-pos="113" data-nb="(285)" class="type-7 cat-3">Uut<span>Ununtrium</span></li>
  <li data-pos="114" data-nb="(289)" class="type-7 cat-3">Uuq<span>Ununquadium</span></li>
  <li data-pos="115" data-nb="(289)" class="type-7 cat-3">Uup<span>Ununpentium</span></li>
  
  <li data-pos="115" data-nb="(289)" class="type-7 cat-3">Uuh<span>Ununhexium</span></li>
  <li data-pos="115" data-nb="(289)" class="type-0 cat-3">Uus<span>Ununseptum</span></li>
  <li data-pos="115" data-nb="(289)" class="type-2 cat-3">Uuo<span>Ununoctium</span></li>
</ul>
  
<div class="legend">
  <ul class="list-1">
    <li class="cat-0"><span>C</span>Solid</li>
    <li class="cat-1"><span>Hg</span>Liquid</li>
    <li class="cat-2"><span>H</span>Gas</li>
    <li class="cat-3"><span>Rf</span>Unknown</li>
  </ul>
  
  <ul class="list-2">
    <li class="type-3">Alkadi metals</li>
    
    <li class="type-8">Lanthanoids</li>
    <li class="type-9">Actinoids</li>
    <li class="type-7">Poor metals</li>
    <li class="type-2">Noble gases</li>
    <li class="type-6">Transition metals</li>
    <li class="type-5">Other non-metals</li>
    <li class="type-4">Alkadine earth metals</li>
  </ul>
</div>

</div>
Kemudian untuk javascript nya kalian buat file, tbperiodic.js 
 $(function(){
    $('li[class^="type-"]').mouseover(function(){
      var currentClass = $(this).attr('class').split(' ')[0];
      if(currentClass != 'empty'){
       $('.main > li').addClass('deactivate');
       $('.' + currentClass).removeClass('deactivate');
      }
    });
   
   $('li[class^="cat-"]').mouseover(function(){
      var currentClass = $(this).attr('class').split(' ')[0];
       $('.main > li').addClass('deactivate');
       $('.' + currentClass).removeClass('deactivate');
    }); 
    
    $('.main > li').mouseout(function(){
      var currentClass = $(this).attr('class').split(' ')[0];
       $('.main > li').removeClass('deactivate');
    }); 
 
});

Kemudian File style.css dan tbperiodic.js kalian include kan di dalam file index.html. Sehinga kalau di view di browser akan menjadi seperti berikut

Semoga bermanfaat,
Depri Pramana

Artikel Terkait

Unknown

Next Post
Previous Post

2 komentar

avatar
Balas
udien delete 12 September 2012 at 04:28

cara mengincludekannya gimana..maksudnya perintah script bagaimana..maaf maklum baru belajar

avatar
Balas
Unknown delete 13 September 2012 at 22:03

@udin, Saya sudah menambahkan cara inlcude file style.css dan tbperiodic.js pada index.html nya, silakan di cek diatas.

Silakan Berikan Komentar anda yang bisa mendukung blog ini, komentar anda saya harapkan, terima kasih
EmoticonEmoticon

Subscribe to: Post Comments (Atom)