Periodic Table
I could have used a table, but wasn't really in the mood for it. Thanks @Tim Pietrusky for some jQuery selector help and filter:grayscale idea.
<div class="wrapper">
<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><script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
* { box-sizing: border- box; padding:0; margin:0; }
* { box-sizing: border-box; padding:0; margin:0; }body {background:linear-gradient(#dbeaf8, #dbeaf8);
color:#222;
padding: 20px;
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:7px;
}
.main .empty {
border:none;
box-shadow:none;
cursor:default;
}
.deactivate {opacity:0.5;
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; list-style: none; }
.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;
}
$(function(){
$(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');
});
});