Switch výsledků v4
by Petr Haluza
HTML
<section id="PoweRR">
<span>Zvol Rozlišení:</span>
<input id="PoweRRtab1" type="radio" name="rozliseni" checked="" /> <label class="rozliseni" for="PoweRRtab1">FullHD</label>
<input id="PoweRRtab2" type="radio" name="rozliseni" /> <label class="rozliseni" for="PoweRRtab2">2k</label>
<input id="PoweRRtab3" type="radio" name="rozliseni" /> <label class="rozliseni" for="PoweRRtab3">4k</label>
<div id="Rozliseni1">
<table>
<tr><th colspan="2"></th> <th> Alfa Gamer<br>Ultimate 5700XT </th><th> Alfa Gamer<br>Ultimate 2060S </th><th> Alfa Gamer<br>Ultimate 2070S </th><th> Alfa Gamer<br>Ultimate 2080S </th></tr>
<tr><td class="gameLogo" rowspan="3"><img src="http://www.hal3000.cz/_pub/images/testy/csgo.png" alt=" CS:Go "></td><td><cite> Nízké </cite></td><td><span class="fps" data-fps=" 371 "></span></td><td><span class="fps" data-fps=" 416 "></span></td><td><span class="fps" data-fps=" 422 "></span></td><td><span class="fps" data-fps=" 423 "></span></td></tr>
<tr><td><cite> Střední </cite></td><td><span class="fps" data-fps=" 339 "></span></td><td><span class="fps" data-fps=" 363 "></span></td><td><span class="fps" data-fps=" 371 "></span></td><td><span class="fps" data-fps=" 376 "></span></td></tr>
<tr><td><cite> Vysoké </cite></td><td><span class="fps" data-fps=" 320 "></span></td><td><span class="fps" data-fps=" 301 "></span></td><td><span class="fps" data-fps=" 330 "></span></td><td><span class="fps" data-fps=" 335 "></span></td></tr>
<tr><td class="gameLogo" rowspan="3"><img src="http://www.hal3000.cz/_pub/images/testy/apex.png" alt=" Apex Legends "></td><td><cite> Nízké </cite></td><td><span class="fps" data-fps=" 267 "></span></td><td><span class="fps" data-fps=" 249 "></span></td><td><span class="fps" data-fps=" 276 "></span></td><td><span class="fps" data-fps=" 299 "></span></td></tr>
<tr><td><cite> Střední </cite></td><td><span class="fps" data-fps=" 210 "></span></td><td><span...CSS
body {background:#fff; color:#eee; font-family: "Segoe UI", arial}
#PoweRR { color:#222;font-weight:500; text-align:center;width: calc(100% - 30px); margin:4em 0;}
#PoweRR input { display: none;}
#PoweRR label { color:white; display: inline-block; padding:10px 15px; margin: 0 2px 5px; background:#444;}
#PoweRR label:hover { color: #789; cursor: pointer;}
#PoweRR input:checked + label { background: #ea0000;}
#Rozliseni1,#Rozliseni2,#Rozliseni3 {display:none;}
#PoweRRtab1:checked ~ #Rozliseni1,
#PoweRRtab2:checked ~ #Rozliseni2,
#PoweRRtab3:checked ~ #Rozliseni3 {display:block;}
/**/
#PoweRR table th {color:#222; background:linear-gradient(#666666, rgba(22,22,22,0) ); padding:5px 10px;}
#PoweRR table th:first-child {background:none;}
#PoweRR .gameLogo img { max-height:50px; max-width: 100px; padding: 5px; }
#PoweRR table tr:nth-child(3n+4) td { background:#2c2c2c; }
#PoweRR table tr:nth-child(3n+3) td { background:#3c3c3c; }
#PoweRR table tr:nth-child(3n+2) td { background:#494949; }
#PoweRR table tr td { padding:4px 5px;}
#PoweRR table tr td.gameLogo { background:#2c2c2c; text-align:center;}
#PoweRR table cite {font-style:normal; font-weight:300;}
#PoweRR table { color:white; margin:0 auto; /*border-collapse: collapse;*/ border-spacing: 4px; }
#PoweRR table tr td { min-width: 80px; }
#PoweRR table tr td span { text-align:right; display: block;}
#PoweRR table tr td span:before { content:attr(data-fps); font-weight:600;}
#PoweRR table tr td span:after { content:"fps " url(http://www.hal3000.cz/_pub/images/testy/ik-gr.png); font-size:0.6em;}
#PoweRR table tr td span[data-fps~="44"]:after,
#PoweRR table tr td span[data-fps~="43"]:after,
#PoweRR table tr td span[data-fps~="42"]:after,
#PoweRR table tr td span[data-fps~="41"]:after,
#PoweRR table tr td span[data-fps~="40"]:after,
#PoweRR table tr td span[data-fps~="39"]:after,
#PoweRR table tr td span[data-fps~="38"]:after,
#PoweRR table tr td span[data-fps~="37"]:after,
#PoweRR table tr td...