CSS Dvere
CSS Dvere, pekný príklad toho, čo sa dá v CSS vytvoriť. Nie su použité žiadne hacky. K tomuto výtvoru ma inšpirovala jedna flash animácia. Dvere je možné otvoriť pomocou hover efektu.
CSS:
* {margin: 0; padding: 0; cursor: default;}
a {text-decoration: none; color: #000;}
#drziak {position: relative; width: 700px; border: 1px solid #cab5ae; float:left;}
#drziak h1, #drzial p {float:left;}
#drziak p {position: relative; top: 60px;}
#drziak p+p {margin: 10px 0;}
#hleft, #hright {position:relative; width: 20px; height: 6px; max-height: 5px; background-color: #f9f5f4; border: 1px solid #cab5ae; float:left;z-index: 2;font-size: 0;}
#hleft {top: -3px; left: 30px;}
#hright {position: absolute;top: -3px; right: 30px;}
#hleft-tien, #hright-tien {position:relative; z-index: 1; width: 20px; height: 6px; max-height: 5px; background-color: #f2f2f2; border: 1px solid #f2f2f2; font-size: 0;float:left;}
#hleft-tien {top: 0px; left: 11px; }
#hright-tien {position: absolute; top: 0px; right: 27px; }
.ddrziak { z-index: 1; border: 2px solid #cab5ae; width: 137px; height: 230px; background-color: #fff; clear:both; position: relative; left: 30px; bottom: -28px;}
a.dvere {z-index: 1;background-color: #f9f5f4; float:left; width: 137px; height: 230px;border: 2px solid #cab5ae; position: absolute; left: -2px; top: -2px;}
a.dvere span.klucka {z-index: 2;font-size: 30px; position: absolute; top: 90px; right: 21px;color: #cab5ae;}
a.dvere span.klucka2 {z-index: 3;font-size: 20px; position: absolute; top: 96.4px; right: 23px; color: #e4d8d3;}
a.dvere:hover { background-color:#fff; position: absolute; top: 1px; left: 1px; width: 106px; height: 200px; border-right: 0; border-left: 30px solid #f9f5f4; border-bottom: 20px solid #bbb; border-top: 10px solid #fff;}
a.dvere:hover span.klucka {left: -10px; font-size: 20px;}
a.dvere:hover span.klucka2 {left: -8px; top: 97px; font-size: 10px;}
#zavit1-tien {z-index: 2;position: relative; top: 23px; width: 4px; height: 15px; border: 1px solid #cab5ae;background-color: #dcdcdc; border: 1px solid #f2f2f2;}
#zavit1 {z-index: 2; position: relative; top: 4px; left: -4px; width: 5px; height: 15px; border: 1px solid #cab5ae;background-color: #f9f5f4;line-height: 0; font-size:0;}
#zavit1b {z-index: 3;position: relative; top: -11px; left: -4px; width: 5px; height: 10px; border: 1px solid #cab5ae;background-color: #fff; line-height: 0; font-size:0;}
#zavit2-tien {z-index: 2;position: relative; top: 149px; left: 0px; width: 4px; height: 15px; border: 1px solid #cab5ae;background-color: #dcdcdc; border: 1px solid #f2f2f2;}
#zavit2 {z-index: 2;position: relative; top: 130px; left: -4px; width: 5px; height: 15px; border: 1px solid #cab5ae;background-color: #f9f5f4;line-height: 0; font-size:0;}
#zavit2b {z-index: 3;position: relative; top: 115px; left: -4px; width: 5px; height: 10px; border: 1px solid #cab5ae;background-color: #fff;line-height: 0; font-size:0;}
a {text-decoration: none; color: #000;}
#drziak {position: relative; width: 700px; border: 1px solid #cab5ae; float:left;}
#drziak h1, #drzial p {float:left;}
#drziak p {position: relative; top: 60px;}
#drziak p+p {margin: 10px 0;}
#hleft, #hright {position:relative; width: 20px; height: 6px; max-height: 5px; background-color: #f9f5f4; border: 1px solid #cab5ae; float:left;z-index: 2;font-size: 0;}
#hleft {top: -3px; left: 30px;}
#hright {position: absolute;top: -3px; right: 30px;}
#hleft-tien, #hright-tien {position:relative; z-index: 1; width: 20px; height: 6px; max-height: 5px; background-color: #f2f2f2; border: 1px solid #f2f2f2; font-size: 0;float:left;}
#hleft-tien {top: 0px; left: 11px; }
#hright-tien {position: absolute; top: 0px; right: 27px; }
.ddrziak { z-index: 1; border: 2px solid #cab5ae; width: 137px; height: 230px; background-color: #fff; clear:both; position: relative; left: 30px; bottom: -28px;}
a.dvere {z-index: 1;background-color: #f9f5f4; float:left; width: 137px; height: 230px;border: 2px solid #cab5ae; position: absolute; left: -2px; top: -2px;}
a.dvere span.klucka {z-index: 2;font-size: 30px; position: absolute; top: 90px; right: 21px;color: #cab5ae;}
a.dvere span.klucka2 {z-index: 3;font-size: 20px; position: absolute; top: 96.4px; right: 23px; color: #e4d8d3;}
a.dvere:hover { background-color:#fff; position: absolute; top: 1px; left: 1px; width: 106px; height: 200px; border-right: 0; border-left: 30px solid #f9f5f4; border-bottom: 20px solid #bbb; border-top: 10px solid #fff;}
a.dvere:hover span.klucka {left: -10px; font-size: 20px;}
a.dvere:hover span.klucka2 {left: -8px; top: 97px; font-size: 10px;}
#zavit1-tien {z-index: 2;position: relative; top: 23px; width: 4px; height: 15px; border: 1px solid #cab5ae;background-color: #dcdcdc; border: 1px solid #f2f2f2;}
#zavit1 {z-index: 2; position: relative; top: 4px; left: -4px; width: 5px; height: 15px; border: 1px solid #cab5ae;background-color: #f9f5f4;line-height: 0; font-size:0;}
#zavit1b {z-index: 3;position: relative; top: -11px; left: -4px; width: 5px; height: 10px; border: 1px solid #cab5ae;background-color: #fff; line-height: 0; font-size:0;}
#zavit2-tien {z-index: 2;position: relative; top: 149px; left: 0px; width: 4px; height: 15px; border: 1px solid #cab5ae;background-color: #dcdcdc; border: 1px solid #f2f2f2;}
#zavit2 {z-index: 2;position: relative; top: 130px; left: -4px; width: 5px; height: 15px; border: 1px solid #cab5ae;background-color: #f9f5f4;line-height: 0; font-size:0;}
#zavit2b {z-index: 3;position: relative; top: 115px; left: -4px; width: 5px; height: 10px; border: 1px solid #cab5ae;background-color: #fff;line-height: 0; font-size:0;}
Podobné články:
haluz