Switch výsledků v2 (jen css)

by Petr Haluza

HTML

<section id="PoweRR">    
Zvol stroj: 
<input id="tab1" type="radio" name="stroje" checked="" />  <label class="stroj" for="tab1">MCR BASIC</label>   
<input id="tab2" type="radio" name="stroje" />  <label class="stroj" for="tab2">MCR PRO</label>   
<input id="tab3" type="radio" name="stroje" />  <label class="stroj" for="tab3">MCR ELITE</label>  
<br />
Zvol rozlišení: 
<input id="tab11" type="radio" name="rozliseni" checked="" />  <label for="tab11">FullHD</label>   
<input id="tab12" type="radio" name="rozliseni" />  <label for="tab12">QHD</label>   
<input id="tab13" type="radio" name="rozliseni" />  <label for="tab13">4K</label>

<table>
    <tbody>
        <tr>
            <!-- OVERWATCH -->
            <td class="gameLogo"><img src="http://www.hal3000.cz/_pub/images/testy/overwatch.png" alt="" /><a>v1.123</a></td>
            <td>
              <div class="nadpisDetaily">Nízké detaily</div>
              <div class="FPSblok Stroj1">
               <span class="FPS FPSvR1" data-fps="400"><small>fps</small></span>
               <span class="FPS FPSvR2" data-fps="335"><small>fps</small></span>
               <span class="FPS FPSvR3" data-fps="256"><small>fps</small></span>
              </div>
              <div class="FPSblok Stroj2">
                <span class="FPS FPSvR1" data-fps="130"><small>fps</small></span>
                <span class="FPS FPSvR2" data-fps="86"><small>fps</small></span>
                <span class="FPS FPSvR3" data-fps="44"><small>fps</small></span>
              </div>
              <div class="FPSblok Stroj3">
                <span class="FPS FPSvR1">r1-s3<small>fps</small></span>       
                <span class="FPS FPSvR2">r2-s3<small>fps</small></span>       
                <span class="FPS FPSvR3">r3-s3<small>fps</small></span>
              </div>
            </td>
            <td>
              <div class="nadpisDetaily">Střední detaily</div>
              <div class="FPSblok Stroj1">
                <span class="FPS...

CSS

body {background:#222; color:#eee;}

#PoweRR {text-align:center;width: calc(100% - 30px);
border: 2px solid #ea0000;border-radius: 15px;}
#PoweRR .gameLogo img {padding:15px 5px; }
#PoweRR .gameLogo {position:relative;}
#PoweRR .gameLogo a {position:absolute; font-size:8px; bottom:3px; left:3px; z-index:+1; color:#aaa; }
#PoweRR table {margin:0 auto;}
#PoweRR table tr td { min-width: 80px; border-bottom: 1px solid red;}
#PoweRR table tr:last-child td { border-bottom: none;}
input { display: none;}
label { display: inline-block; padding:10px 15px; margin: 0 2px 5px; background:#444;}
label.stroj {border-radius: 0 0 10px 10px;}

label:hover {  color: #789;  cursor: pointer;}
input:checked + label {  background: #ea0000;}

.nadpisDetaily { text-align:center; font-size:9px; padding: 3px; margin-top: -20px;}
.FPSblok { position:absolute; width:80px; height:20px; background:#333; padding:3px 2px;}
.FPS { position:absolute; width:80px; height:20px; text-align:center; display:block; font-size:18px;}
.FPS small { font-size:12px; padding-left:3px;}
.FPS:before { content:attr(data-fps);}
[data-fps="49"],[data-fps="44"] {color:#f99;} 
[data-fps="22"] {color:#f22;}

/*skrýt vše*/
.FPS { visibility: hidden;  opacity: 0; }
.Stroj1,.Stroj2,.Stroj3 {visibility: hidden;  opacity: 0;}

/*odkrýt jen čeknutý*/
#tab11:checked ~ table tr td .FPSvR1,
#tab12:checked ~ table tr td .FPSvR2,
#tab13:checked ~ table tr td .FPSvR3 {  visibility: visible;  opacity: 1;}
#tab1:checked ~ table tr td .Stroj1,
#tab2:checked ~ table tr td .Stroj2,
#tab3:checked ~ table tr td .Stroj3 {  visibility: visible;  opacity: 1;}