CSS disketa
Na dnes taká menšia oddychová vec. Nepodarilo sa mi urobiť nejaké drobnosti presne podľa návrhu, resp. by s tým bola piplačka. Disketa je animovaná v prehliadačoch Google Chrome, Firefox 3.6 a Safari 3.
CSS:
#obal {margin: 0px 0 0 40px; clear: both; width: 235px; height: 235px; border: 5px solid #000; background-color: #35499f;}
#vrch {float: left; position: relative; top: -5px; left: 30px; background-color: #fff; border: 5px solid #000; border-top: 0; width: 140px; height: 8px;}
#bok {float: left; position: relative; top: -8px; left: 61px; background-color: #fff; border: 5px solid #000; border-left: 0; border-right: 0; border-top: 0;width: 40px; height: 20px; transform: rotate(45deg) skew(0deg, 0deg);}
#vsuvka {float:left; position: relative; top: -22px; left: 30px; width: 140px; height: 70px; background-color: #3a4d85; border: 5px solid #000; border-top: 0;}
#stitok {float: left; position: relative; top: -8px; left: 35px; width: 100px; height: 73px; border: 5px solid #000; border-bottom: 0; background-color: #cacaca; transition: all 0.5s ease-in-out; border-radius-bottomleft: 1em; border-radius-bottomright: 1em;}
#obal:hover #stitok {left: -5px;}
.pruzok {float: left; position: relative; top: 8px; left: 55px; width: 15px; height: 45px; background-color: #3a4d85; border: 5px solid #000;}
#popis {clear: both; float:left; position: relative; top: 2px; left: 30px; width: 165px; height: 130px; background-color: #e1e1df; border: 5px solid #000; border-bottom: 0;}
#popis .pruzok {width: 165px; height: 8px; top: 25px; left: 0; border: 0; background-color: #ac4c75;}
#popis .pruzok+.pruzok {top: 45px;}
#popis .pruzok+.pruzok+.pruzok {left: -3px; top: 65px; height: 50px; background-color: #db4560; width: 170px;}
.dierka {float: left; clear: both; position: relative; top: -35px; left: 8px; width: 6px; height: 18px; background-color: #fff; border: 5px solid #000;}
.dierka+.dierka {clear: none; left: 195px;}
#vrch {float: left; position: relative; top: -5px; left: 30px; background-color: #fff; border: 5px solid #000; border-top: 0; width: 140px; height: 8px;}
#bok {float: left; position: relative; top: -8px; left: 61px; background-color: #fff; border: 5px solid #000; border-left: 0; border-right: 0; border-top: 0;width: 40px; height: 20px; transform: rotate(45deg) skew(0deg, 0deg);}
#vsuvka {float:left; position: relative; top: -22px; left: 30px; width: 140px; height: 70px; background-color: #3a4d85; border: 5px solid #000; border-top: 0;}
#stitok {float: left; position: relative; top: -8px; left: 35px; width: 100px; height: 73px; border: 5px solid #000; border-bottom: 0; background-color: #cacaca; transition: all 0.5s ease-in-out; border-radius-bottomleft: 1em; border-radius-bottomright: 1em;}
#obal:hover #stitok {left: -5px;}
.pruzok {float: left; position: relative; top: 8px; left: 55px; width: 15px; height: 45px; background-color: #3a4d85; border: 5px solid #000;}
#popis {clear: both; float:left; position: relative; top: 2px; left: 30px; width: 165px; height: 130px; background-color: #e1e1df; border: 5px solid #000; border-bottom: 0;}
#popis .pruzok {width: 165px; height: 8px; top: 25px; left: 0; border: 0; background-color: #ac4c75;}
#popis .pruzok+.pruzok {top: 45px;}
#popis .pruzok+.pruzok+.pruzok {left: -3px; top: 65px; height: 50px; background-color: #db4560; width: 170px;}
.dierka {float: left; clear: both; position: relative; top: -35px; left: 8px; width: 6px; height: 18px; background-color: #fff; border: 5px solid #000;}
.dierka+.dierka {clear: none; left: 195px;}
HTML:
<div id="obal">
<div id="vrch"></div>
<div id="bok"></div>
<div id="vsuvka">
<div id="stitok">
<div class="pruzok"></div>
</div>
</div>
<div id="popis">
<div class="pruzok"></div>
<div class="pruzok"></div>
<div class="pruzok"></div>
</div>
<div class="dierka"></div>
<div class="dierka"></div>
</div>
<div id="vrch"></div>
<div id="bok"></div>
<div id="vsuvka">
<div id="stitok">
<div class="pruzok"></div>
</div>
</div>
<div id="popis">
<div class="pruzok"></div>
<div class="pruzok"></div>
<div class="pruzok"></div>
</div>
<div class="dierka"></div>
<div class="dierka"></div>
</div>