<input type="checkbox" id="active" class="active" value="" placeholder="">
<div class="container">
<header>
<h1>Pure <strong>CSS</strong> Box</h1>
<p>... a Star Wars hologram effect.</p>
</header>
<div class="cube-base active">
<div class="holo">
<div class="holo-image">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 -4 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<defs>
<pattern id="image-gradient-0" width="1" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(90 50 50)">
<line stroke="white" stroke-width="1px" y2="10" />
</pattern>
<pattern id="image-gradient-1" width="1" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(90 50 50)">
<line stroke="rgba(192, 229, 253, .85)" stroke-width="1px" y2="10" />
</pattern>
<!-- <linearGradient id="image-gradient" gradientTransform="rotate(90)" spreadMethod="repeat">
<stop offset="0" stop-color="#57caf4" stop-opacity="1" />
<stop offset="1px" stop-color="#57caf4" stop-opacity="0"/>
</linearGradient> -->
<filter id="drop-shadow" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<path class="image-gradient-shape" d="M49.5,63.236c-0.6,0-1,0.5-1,1c0,0.1,0,0.1,0,0.2c0.1-0.5,0.5-0.9,1-0.9s1,0.4,1,0.9c0-0.1,0-0.1,0-0.2 C50.6,63.736,50.1,63.236,49.5,63.236z M79.407,39.93L79.407,39.93L79.407,39.93c-0.6-15.304-5.601-23.306-5.601-23.406 c-2.901-5.501-8.202-8.002-12.103-9.102s-7.302-1.1-7.802-1.1c-4.601-3.101-8.802,0-8.802,0c-0.4,0-3.801,0-7.802,1.1 c-3.901,1.1-9.202,3.601-12.103,9.102c0,0.1-5.001,8.002-5.601,23.306l0,0l0,0c0,0,0.3,2.301-2,7.602 c-0.1,0.2-6.602,18.204-7.802,24.906h0.3c1.2-6.702,7.802-24.706,7.802-24.906c2.301-5.201,2.101-7.602,2.101-7.802 c0.6-14.904,5.501-22.806,5.501-22.906c2.901-5.401,8.102-7.902,11.903-9.002c4.201-1.2,7.702-1.1,7.802-1.1l0,0l0,0 c0,0,4.101-3.001,8.502,0l0,0l0,0c0,0,3.601-0.1,7.802,1.1c3.801,1.1,9.002,3.601,11.903,9.002c0.1,0.1,4.901,8.002,5.601,23.206 c0,0.2-0.3,2.601,2.101,7.802c0.1,0.2,6.602,18.204,7.802,24.906h0.3c-1.2-6.702-7.802-24.806-7.802-24.906 C79.107,42.331,79.407,40.03,79.407,39.93z M48.5,85.942c0,0,0.4,0.4,1,0.4s1-0.4,1-0.4l5.601-4.101c1.1-0.8,1.2-1.2,1.2-1.2 c0-0.4-1.2-0.3-1.2-0.3L51,84.842c-0.9,0.7-1.5,0.7-1.5,0.7s-0.6,0-1.5-0.7l-5.101-4.601c0,0-1.3-0.1-1.2,0.3c0,0,0.1,0.4,1.2,1.2 L48.5,85.942z M49.5,94.75c0,0-16.004,0.594-25.506-15.51c0,0,5.901,15.704,25.506,15.704S75.006,79.24,75.006,79.24 C65.604,95.444,49.5,94.75,49.5,94.75z M35.297,77.24c0.1,0.2,0.2,0.3,0.2,0.3S35.397,77.44,35.297,77.24z M63.804,77.24 c-0.1,0.1-0.2,0.3-0.2,0.3S63.704,77.44,63.804,77.24z M48.5,75.339c0,0.6,0.5,1,1,1c0.6,0,1-0.5,1-1v-8.502h-2V75.339z M65.604,33.829c-0.1,0-0.1,0-0.2,0C65.404,33.729,65.504,33.829,65.604,33.829z M49.5,47.432c-0.9,0-1.5,0.3-1.5,0.6h3.101 C51,47.632,50.3,47.432,49.5,47.432z M49.5,49.433c-0.9,0-1.5,0.3-1.5,0.6h3.101C51,49.633,50.3,49.433,49.5,49.433z M49.5,51.333 c-0.7,0-1.3,0.3-1.3,0.6h2.701C50.8,51.633,50.2,51.333,49.5,51.333z M49.5,53.434c-0.5,0-0.9,0.3-0.9,0.6h1.8 C50.4,53.634,50,53.434,49.5,53.434z M87.709,73.239c0,0-1.1,0.7-1.6-0.3c0,0-0.1-0.4-0.4-1.1c-2.101-0.2-11.003-1.2-15.704-1.3 c0.1,0.9,0.9,3.101,4.901,8.302c0,0-0.6-0.1-1.5-0.7l0,0C68.5,94.042,49.458,94.333,49.458,94.333S30.5,94.083,25.594,78.24l0,0 c-1,0.6-1.5,0.7-1.5,0.7c4.001-5.201,4.801-7.402,4.901-8.302c-4.701,0-13.603,1-15.704,1.3c-0.2,0.7-0.4,1.1-0.4,1.1 c-0.5,1-1.6,0.3-1.6,0.3s0.7,0.3,0.9-0.4c0,0,4.201-19.205,7.902-26.306c0,0,2.801-5.401,3.001-5.701s0.8-1.7,0.2-2 c0,0-0.263-0.306-1.1,0.4c0,0-1.2,1-1.6,0.9c0,0,0.6-19.005,7.402-25.306c0,0,3.001-3.801,8.202-4.201c0,0,4.401-2.101,9.402-2 c0,0,2-0.9,3.901-0.9c2.001,0,3.901,0.9,3.901,0.9c5.001-0.1,9.402,2,9.402,2c5.201,0.3,8.202,4.201,8.202,4.201 c6.802,6.302,7.402,25.306,7.402,25.306c-0.4,0.1-1.6-0.9-1.6-0.9c-0.777-0.675-1.1-0.4-1.1-0.4c-0.6,0.3,0,1.7,0.2,2 c0.2,0.3,3.001,5.701,3.001,5.701c3.601,7.102,7.902,26.306,7.902,26.306C87.009,73.639,87.709,73.239,87.709,73.239z M67.504,33.529c-0.8,0.3-1.5,0.3-1.9,0.3c-0.1,0-0.1,0-0.2,0c0,0,0.1,0,0.2,0c0.5,0.1,1.3,0.4,1.3,0.4c1.1,0.4,1.7,0.4,1.7,0.4 c1.8,0.2,4.801,2,4.801,2c-1.7-2.401-3.301-2.801-3.301-2.801C69.305,33.329,67.504,33.529,67.504,33.529z M58.502,31.328 c0,0,3.601,5.801,4.401,8.802c0,0,0.2,0.9,0.8,1.4c0,0,4.001-0.4,6.802,0.7l-1.9-1c0,0,1-0.3,0.3-0.9c0,0-3.201-2.001-4.401-4.301 c0,0-1.6-2-1.2-2.401c0,0,1.1-0.7,2.101-0.5c0,0,2.301,0.3,2.401-1.5c0,0,0.1-5.001-0.7-6.302c0,0,0.2-6.302-3.401-8.302 c0,0-1.9-1.3-2.601-1.1c0,0-0.9,1.6-1.3,5.601C59.903,21.526,58.802,30.128,58.502,31.328z M68.205,53.334c-0.2,0.6,0.2,0.8,0.2,0.8 c0.6-0.1,0.6-3.001,0.6-3.001c0-5.001-6.102-6.402-6.102-6.402c-5.001-1.1-10.503,1.4-10.503,1.4c0-0.4,0.5-1.1,0.5-1.1 c0.1-0.4-1.5-0.5-2.501-0.5h-0.8l0,0l0,0l0,0l0,0h-0.8c-1,0-2.701,0.1-2.501,0.5c0,0,0.5,0.7,0.5,1.1c0,0-5.501-2.501-10.503-1.4 c0,0-6.102,1.4-6.102,6.402c0,0,0,2.901,0.6,3.001c0,0,0.4-0.2,0.2-0.8c0,0-1.4-3.601,2.201-6.602c0,0,2.901-2.901,11.003-0.8 c0,0,2,0.6,2.201,0.8c0,0,0.4-0.2,0.3,0.9l0.1,8.602h-0.4c0,0,0.2-0.6,0.1-1.1l-0.3-7.002c0,0,0.1-1.2-1.3-1.6 c0,0-2.201-1.1-6.502-0.8c0,0-2.801,0.2-4.101,2.101c0,0-2.101,2.801-2.301,3.801c0,0-0.307,1.272,0,1.6 c0,0,2.201,2.801,5.901,3.601c0,0,5.101,0.7,8.202-0.5c0,0-2.901,2.101-10.603,0.2c0,0-0.3,0.2,0,0.6c0,0,0.3,0.3,0.1,0.7 c0,0-0.2,0.8,0.3,1.1c0,0,1.2,1.4,5.301,0.6c0,0,4.201-1.3,5.001-2.301l0,0c0,0.3-0.4,4.001,2.801,4.101l0,0l0,0c0.2,0,0.4,0,0.6,0 s0.4,0,0.6,0c-0.2,0-0.4,0-0.6,0c0,0,0.2,0,0.6,0c0.5-5.401,0.1-6.702,0.1-6.702s0,0,0.7,0.6c0,0,0.6,0.3,1.3,1.2l0.6,0.8 c0.8,1,5.001,2.301,5.001,2.301c4.101,0.9,5.301-0.6,5.301-0.6c0.5-0.3,0.3-1.1,0.3-1.1c-0.2-0.4,0.1-0.7,0.1-0.7 c0.3-0.3,0-0.6,0-0.6c-7.602,2-10.603-0.2-10.603-0.2c3.001,1.3,8.202,0.5,8.202,0.5c3.701-0.9,5.901-3.601,5.901-3.601 c0.401-0.452,0-1.6,0-1.6c-0.1-1.1-2.301-3.801-2.301-3.801c-1.3-1.9-4.101-2.101-4.101-2.101c-4.401-0.3-6.502,0.8-6.502,0.8 c-1.4,0.4-1.3,1.6-1.3,1.6l-0.3,7.002c0,0.5,0.1,1.1,0.1,1.1h-0.4l0.1-8.602c0-1.1,0.3-0.9,0.3-0.9c0.2-0.3,2.201-0.8,2.201-0.8 c8.102-2.101,11.003,0.8,11.003,0.8C69.605,49.733,68.205,53.334,68.205,53.334z M53.901,65.037c0,0,5.401,3.601,7.702,8.702 c0,0,1.4-2.101,3.201-6.502l1.5-4.501c0,0-9.102-2.501-13.703,0.1l0.5,2.401c0,0,0.2,1.3,0.9,2.501l6.302,9.702 c0.1,0,0.4-0.2,0.7-0.9c-0.2-0.1-0.5-0.3-0.8-0.5l-5.701-8.802C54.501,67.237,54.101,66.237,53.901,65.037z M45.199,65.037 c-0.2,1.2-0.7,2.201-0.7,2.201l-5.701,8.802c-0.3,0.3-0.6,0.4-0.8,0.5c0.3,0.7,0.6,0.8,0.7,0.9L45,67.738 c0.7-1.2,0.9-2.501,0.9-2.501l0.5-2.401c-4.501-2.601-13.703-0.1-13.703-0.1l1.5,4.501c1.8,4.401,3.201,6.502,3.201,6.502 C39.798,68.637,45.199,65.037,45.199,65.037z M39.398,78.74H49.5h10.103l-1.8-2.701c-0.2,0.2-0.4,0.3-0.7,0.3c-0.6,0-1-0.5-1-1v-1.9 l-1.6-2.401v4.401c0,0.6-0.5,1-1,1c-0.6,0-1-0.5-1-1v-7.402v-1.2v-2.101c0,0-0.1-2.001-2.901-2.101 c-2.801,0.1-2.901,2.101-2.901,2.101v2.101v1.2v7.402c0,0.6-0.5,1-1,1c-0.6,0-1-0.5-1-1v-4.401l-1.7,2.501v1.9c0,0.6-0.5,1-1,1 c-0.3,0-0.5-0.1-0.7-0.3L39.398,78.74z M53.901,36.33c0.8-9.702-0.3-17.804-0.3-17.804C51.3,21.126,53.901,36.33,53.901,36.33z M45.199,36.33c0,0,2.601-15.204,0.3-17.804C45.499,18.425,44.399,26.627,45.199,36.33z M44.199,42.331 c-3.501-0.8-8.502-0.8-8.502-0.8s3.901,0.1,7.902,1c0,0,2.901,0.5,5.901,0.6c3.001,0,5.901-0.6,5.901-0.6c4.001-0.9,7.902-1,7.902-1 c-2.301-0.4-8.502,0.8-8.502,0.8c-1,0.2-5.301,0.3-5.301,0.3C46.299,42.631,44.199,42.331,44.199,42.331z M31.896,25.327 c-0.7,1.4-0.7,6.302-0.7,6.302c0.1,1.8,2.401,1.5,2.401,1.5c1-0.2,2.101,0.5,2.101,0.5c0.4,0.4-1.2,2.401-1.2,2.401 c-1.2,2.301-4.401,4.301-4.401,4.301c-0.7,0.6,0.3,0.9,0.3,0.9l-1.8,1c2.801-1.2,6.802-0.7,6.802-0.7c0.7-0.4,0.8-1.4,0.8-1.4 c0.7-2.901,4.401-8.802,4.401-8.802c-0.3-1.3-1.4-9.802-1.4-9.802c-0.4-3.901-1.3-5.601-1.3-5.601c-0.7-0.2-2.601,1.1-2.601,1.1 C31.696,19.025,31.896,25.327,31.896,25.327z M25.594,36.63c0,0,3.001-1.8,4.801-2c0,0,0.5,0,1.7-0.4c0,0,0.9-0.3,1.3-0.4 c0.1,0,0.2,0,0.2,0c-0.1,0-0.1,0-0.2,0c-0.3,0-1,0.1-1.9-0.3c0,0-1.8-0.2-2.701,0.3C28.895,33.829,27.295,34.229,25.594,36.63z M20.293,49.333c1.9-3.301,7.502-7.002,7.502-7.002c0-1.3,0.7-2.201,0.7-2.201h-1C22.993,44.432,20.293,49.333,20.293,49.333z M27.995,62.636L27.995,62.636c-0.7-2.001-1.6-4.301-2.201-5.701c-0.2-0.2-0.4-0.3-0.4-0.3c-1.5-1.9-0.8-11.603-0.8-11.603l0,0l0,0 c-0.2,0.1-0.3,0.3-0.5,0.4c-0.8,5.401,0,10.102,0,10.102c0.2,0.7,1.4,1.7,1.4,1.7l1.9,5.101c-1.3,0.4-1,2-1,2 c0,0.6,1.5,3.001,2.501,4.501c-1.2-2-1.8-3.801-1.8-3.801C26.094,63.136,27.995,62.636,27.995,62.636z M34.696,72.538 c-1.8-6.802-5.401-11.603-7.502-14.103c0.3,1.8,0.8,3.701,1.1,5.101c1.1,2.801,1.7,3.101,1.7,3.101 C31.596,68.237,33.596,70.938,34.696,72.538z M62.703,79.74L62.703,79.74L62.703,79.74L62.703,79.74z M68.205,72.138 c-0.1-0.1-0.1-0.2-0.2-0.3c-0.2,0.3-0.5,0.5-0.7,0.8c0,0-2.701,3.401-3.501,4.601c0.3-0.5,1-1.5,0.7-1.8c0,0-0.3-0.2-0.8,0.1l0,0 l-1.1,1.6c0,0-1.6-0.1-1.8,0.8c0,0-0.5,1.3,0.3,1.7H49.5H37.997c0.8-0.5,0.3-1.7,0.3-1.7c-0.2-1-1.8-0.8-1.8-0.8l-1.1-1.6l0,0 c-0.5-0.3-0.8-0.1-0.8-0.1c-0.2,0.3,0.4,1.3,0.7,1.8c-0.9-1.2-3.501-4.601-3.501-4.601c-0.2-0.2-0.5-0.5-0.7-0.8 c-0.1,0.1-0.1,0.2-0.2,0.3l4.901,6.502c0-0.3,0.1-0.5,0.2-0.7c0,0.1-0.1,0.3-0.1,0.4c0,0.7,0.6,1.2,1.2,1.2c0.4,0,0.8-0.2,1-0.5 c-0.1,0.3-0.3,0.6-0.6,0.7l2.401,0.3l8.202,6.302c0,0,0.5,0.6,1.5,0.6c0.9,0,1.5-0.6,1.5-0.6l8.202-6.302l2.401-0.3 c-0.3-0.1-0.5-0.4-0.6-0.7c0.2,0.3,0.6,0.5,1,0.5c0.7,0,1.2-0.6,1.2-1.2c0-0.1,0-0.3-0.1-0.4c0.1,0.2,0.2,0.4,0.2,0.7L68.205,72.138 z M70.705,63.636c0.4-1.4,0.9-3.301,1.1-5.101c-2.101,2.401-5.601,7.202-7.502,14.103c1.1-1.6,3.101-4.301,4.701-5.801 C69.005,66.737,69.605,66.437,70.705,63.636z M71.078,62.703c0,0,1.727,0.333,0.827,2.334c0,0-0.6,1.6-1.7,3.401 c1-1.5,2.301-3.701,2.301-4.201c0,0,0.3-1.5-1-2.001l1.9-5.101c0,0,1.2-1,1.2-1.7c0.2,0.099,1.1-4.602,0.2-10.003 c0,0,0.1,0.1,0.3,0.3c-0.2-0.2-0.5-0.5-0.8-0.7l0,0c0,0,0.7,9.702-0.8,11.603c0,0-0.1,0.1-0.4,0.3 C72.606,58.235,71.779,60.703,71.078,62.703z M78.807,49.333c0,0-2.701-4.901-7.202-9.202h-1c0,0,0.7,0.9,0.7,2.201 C71.205,42.331,76.907,46.132,78.807,49.333z"
/>
</svg>
</div>
<div class="holo-shine">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<defs>
<radialGradient id="gradient" cx="50%" cy="90%" r="70%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(162, 229, 253);stop-opacity:.65;" />
<stop offset="70%" style="stop-color:rgb(162, 229, 253);stop-opacity:0;" />
</radialGradient>
<filter id="blur" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation=".5" />
</filter>
</defs>
<polygon fill="#FFFFFF" points="14,20 6,20 0,0 20,0 " />
</svg>
</div>
</div>
<div class="cube-face face-one">
<div class="cube-face bevel"></div>
<div class="cube-face face-two">
<!-- <div class="label center">
<em>23</em>
</div> -->
<!-- <div class="cube-face bevel"></div> -->
<div class="cube-face face-three">
<div class="label">
<em>27</em>
<div>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="21px" height="21px" viewBox="-0.5 -0.5 21 21" enable-background="new -0.5 -0.5 21 21" xml:space="preserve">
<path d="M9.869-0.369C4.148-0.369-0.5,4.279-0.5,9.999c0,5.721,4.648,10.37,10.369,10.37s10.369-4.649,10.369-10.37
C20.238,4.279,15.59-0.369,9.869-0.369z M10.382,0.703c3.062,0.179,5.722,1.81,7.286,4.224l-0.446,0.268
c-0.335-0.514-0.693-0.961-1.117-1.385l-0.738,0.737c-0.96-0.96-2.167-1.676-3.531-2.033l0.269-1.006
c-0.559-0.157-1.14-0.247-1.722-0.268V0.703z M9.355,0.703v0.514c-0.603,0.044-1.162,0.134-1.72,0.269l0.268,1.006
c-1.363,0.357-2.57,1.072-3.53,2.034L3.634,3.787C3.231,4.212,2.853,4.659,2.517,5.172L2.07,4.904
C3.634,2.513,6.294,0.882,9.355,0.703z M1.579,14.223C0.93,12.949,0.572,11.52,0.572,9.999c0-1.497,0.358-2.927,0.984-4.179
l0.446,0.269C1.735,6.603,1.533,7.162,1.377,7.698l1.006,0.268C2.204,8.614,2.114,9.307,2.114,9.999c0,0.715,0.09,1.387,0.269,2.034
l-1.006,0.268c0.156,0.559,0.358,1.118,0.648,1.655L1.579,14.223z M9.355,19.295c-3.039-0.156-5.699-1.788-7.263-4.178l0.448-0.269
c0.313,0.493,0.692,0.939,1.095,1.342l0.738-0.738c0.96,0.961,2.167,1.677,3.53,2.034l-0.268,1.004
c0.559,0.157,1.139,0.247,1.72,0.269V19.295z M9.869,16.19c-0.402,0-0.782-0.045-1.14-0.113l0.581-3.038
c-0.715-0.135-1.318-0.492-1.766-1.027l-2.345,2.01c-0.247-0.29-0.47-0.603-0.671-0.938c-0.201-0.334-0.358-0.693-0.491-1.05
l2.927-1.028c-0.111-0.313-0.179-0.67-0.179-1.028s0.068-0.693,0.179-1.028L4.037,7.921C4.17,7.564,4.327,7.206,4.528,6.87
c0.202-0.334,0.425-0.647,0.671-0.938l2.345,2.011c0.448-0.514,1.073-0.894,1.766-1.027L8.729,3.876
c0.38-0.067,0.759-0.112,1.14-0.112c0.38,0,0.782,0.045,1.14,0.112l-0.582,3.039c0.715,0.134,1.319,0.492,1.766,1.027l2.346-2.011
c0.245,0.292,0.469,0.604,0.67,0.938c0.201,0.335,0.357,0.694,0.491,1.051l-2.927,1.028c0.112,0.313,0.179,0.67,0.179,1.028
s-0.067,0.693-0.179,1.028l2.927,1.028c-0.134,0.357-0.29,0.716-0.491,1.05c-0.201,0.335-0.425,0.648-0.67,0.938l-2.346-2.01
c-0.447,0.513-1.073,0.892-1.766,1.027l0.582,3.038C10.651,16.145,10.271,16.19,9.869,16.19z M10.382,19.295v-0.513
c0.604-0.044,1.163-0.134,1.722-0.268l-0.269-1.007c1.363-0.358,2.57-1.073,3.531-2.034l0.738,0.738
c0.401-0.403,0.759-0.849,1.095-1.34l0.447,0.267C16.059,17.507,13.422,19.118,10.382,19.295z M17.712,13.956
c0.269-0.537,0.492-1.096,0.648-1.655l-1.005-0.268c0.179-0.647,0.268-1.341,0.268-2.034c0-0.715-0.089-1.385-0.268-2.034
l1.005-0.268c-0.157-0.536-0.357-1.095-0.626-1.608l0.447-0.269c0.626,1.251,0.984,2.682,0.984,4.179
c0,1.521-0.358,2.95-1.006,4.224L17.712,13.956z" />
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="21px" height="21px" viewBox="-0.5 -0.5 21 21" enable-background="new -0.5 -0.5 21 21" xml:space="preserve">
<path d="M7.394,0.554c0,0.149-0.12,0.273-0.27,0.274C6.75,0.831,3.478,0.958,3.478,4.441V5.29c0,0.15-0.12,0.272-0.272,0.272
S2.934,5.44,2.934,5.29V4.441c0-4.009,3.757-4.155,4.184-4.158H7.12C7.27,0.284,7.392,0.404,7.394,0.554z M15.93,7.458
c0.047,0.077,0.058,0.174,0.02,0.258c-0.08,0.185-0.816,1.794-1.75,1.794c-0.828,0-3.656-1.494-3.975-1.664
c-0.11-0.058-0.167-0.186-0.135-0.306c0.029-0.121,0.137-0.206,0.264-0.206h5.349C15.793,7.336,15.879,7.382,15.93,7.458z
M15.26,7.88h-3.778c1.086,0.537,2.328,1.088,2.719,1.088C14.554,8.968,14.986,8.37,15.26,7.88z M8.429,7.534
C8.46,7.651,8.412,7.776,8.307,7.84c-0.279,0.17-2.763,1.671-3.599,1.671c-0.935,0-1.668-1.611-1.75-1.794
c-0.037-0.085-0.03-0.181,0.021-0.259c0.051-0.076,0.135-0.123,0.228-0.123h4.959C8.287,7.336,8.393,7.416,8.429,7.534z M7.159,7.88
H3.645c0.297,0.534,0.728,1.088,1.063,1.088C5.095,8.968,6.205,8.415,7.159,7.88z M2.761,13.653
c-0.464,0.087-0.89,0.286-1.265,0.595c-0.118,0.094-0.135,0.264-0.04,0.381c0.054,0.066,0.132,0.102,0.21,0.102
c0.061,0,0.12-0.021,0.171-0.063c0.306-0.246,0.649-0.409,1.024-0.478c0.146-0.028,0.244-0.172,0.216-0.319
C3.05,13.723,2.907,13.624,2.761,13.653z M1.62,13.529c0.03,0,0.059-0.006,0.091-0.016c0.245-0.084,0.511-0.129,0.785-0.129
c0.149,0,0.274-0.122,0.274-0.272c0-0.149-0.125-0.271-0.274-0.271c-0.335,0-0.661,0.055-0.964,0.16
c-0.142,0.049-0.217,0.205-0.168,0.346C1.401,13.459,1.508,13.529,1.62,13.529z M18.646,11.448c1.442,1.671,1.231,2.694-1.016,4.894
c-0.027,0.411-0.225,1.852-1.584,3.209c-0.62,0.621-1.468,0.949-2.427,0.949c-0.151,0-0.303-0.008-0.458-0.023
c-0.892-0.095-1.796-0.467-2.257-0.926c-0.127-0.127-0.268-0.233-0.412-0.326c-0.107,0.215-0.324,0.366-0.58,0.366
c-0.147,0-0.278-0.058-0.388-0.142c-0.11,0.084-0.24,0.142-0.39,0.142c-0.248,0-0.456-0.145-0.567-0.347
c-0.144,0.092-0.285,0.18-0.414,0.307c-0.458,0.459-1.365,0.831-2.256,0.926C5.743,20.492,5.591,20.5,5.441,20.5
c-0.958,0-1.808-0.328-2.428-0.949c-1.36-1.357-1.555-2.798-1.585-3.209c-2.247-2.2-2.456-3.223-1.015-4.894
c0.838-0.972,1-1.49,1.009-1.527V7.606c0-0.226,0.063-0.399,0.149-0.546C1.518,7.032,1.471,6.992,1.445,6.93
C1.401,6.829,1.423,6.713,1.5,6.635l0.649-0.673V4.44c0-4.883,4.921-4.94,4.97-4.94h2.354l0,0l0,0h2.448
c0.049,0,4.875,0.057,4.875,4.94v1.513l0.728,0.671c0.083,0.076,0.11,0.194,0.069,0.298c-0.024,0.057-0.062,0.1-0.112,0.13
c0.088,0.149,0.155,0.323,0.155,0.554v2.312C17.646,9.958,17.807,10.474,18.646,11.448z M16.911,10.395
c0.151-0.141,0.179-0.384,0.182-0.423l-0.001-2.364c0-0.222-0.085-0.346-0.181-0.417v0.417V10.395z M2.694,5.801h13.56v-1.36
c0-4.336-4.154-4.396-4.332-4.396H9.476H9.474l0,0H7.12c-0.179,0-4.426,0.06-4.426,4.396V5.801L2.694,5.801z M2.337,6.553h14.308
l-0.228-0.208H2.537L2.337,6.553z M16.365,7.607V7.097H2.694v0.511c0,1.011,0.17,1.74,0.502,2.169
c0.272,0.352,0.651,0.516,1.199,0.516c0.787,0,1.759-0.348,2.701-0.687c0.917-0.327,1.786-0.638,2.49-0.638
c0.71,0,1.571,0.311,2.481,0.64c0.921,0.33,1.871,0.675,2.634,0.675C15.477,10.283,16.365,9.978,16.365,7.607z M15.973,10.432v0.671
c0.104-0.167,0.209-0.334,0.315-0.523c0.018-0.032,0.051-0.04,0.076-0.061v-0.492C16.253,10.188,16.119,10.318,15.973,10.432z
M13.362,13.382c0.217,0,0.479-0.042,0.787-0.191c0.421-0.292,0.86-0.715,1.317-1.331c-0.013-0.031-0.038-0.055-0.038-0.09v-1.061
c-0.219,0.069-0.455,0.116-0.727,0.116c-0.859,0-1.855-0.358-2.817-0.707C11.018,9.806,10.2,9.511,9.586,9.511
c-0.61,0-1.435,0.295-2.307,0.608c-0.986,0.353-2.003,0.718-2.884,0.718c-0.345,0-0.649-0.061-0.917-0.175v1.108
c0,0.012-0.012,0.021-0.015,0.033c0.078,0.101,0.156,0.216,0.229,0.305c0.917,1.122,1.599,1.283,2.072,1.283
c0.606,0,1.178-0.301,1.787-0.624c0.637-0.336,1.299-0.684,2.035-0.684c0.742,0,1.398,0.348,2.035,0.684
C12.213,13.085,12.776,13.382,13.362,13.382z M11.768,13.459v0.157c0.179,0.046,0.363,0.077,0.549,0.093
C12.131,13.637,11.95,13.549,11.768,13.459z M11.009,13.063v0.303c0.07,0.028,0.144,0.055,0.216,0.081v-0.269
C11.152,13.138,11.081,13.101,11.009,13.063z M10.185,12.727v0.321c0.09,0.034,0.182,0.069,0.279,0.106v-0.339
C10.371,12.778,10.276,12.752,10.185,12.727z M9.586,12.628c-0.059,0-0.118,0.014-0.177,0.02v0.246c0.014,0,0.032-0.006,0.045-0.006
c0.059,0,0.124,0.026,0.186,0.034v-0.288C9.624,12.632,9.605,12.628,9.586,12.628z M8.644,12.843v0.234
c0.074-0.027,0.149-0.057,0.22-0.081v-0.23C8.791,12.792,8.718,12.813,8.644,12.843z M7.866,13.219v0.171
c0.079-0.031,0.156-0.061,0.232-0.092v-0.199C8.021,13.138,7.943,13.178,7.866,13.219z M6.921,13.678
c0.136-0.025,0.27-0.058,0.402-0.098v-0.082C7.191,13.563,7.058,13.62,6.921,13.678z M2.768,10.111
c-0.026-0.031-0.049-0.065-0.074-0.101v0.626c0.017,0.028,0.032,0.051,0.048,0.079c0.067,0.112,0.127,0.203,0.192,0.305v-0.738
C2.877,10.226,2.816,10.176,2.768,10.111z M1.966,9.993c0.004,0.024,0.032,0.262,0.183,0.401V7.607V7.191
C2.053,7.264,1.966,7.388,1.966,7.607V9.993z M0.303,14.159c-0.047-0.89,0.436-1.576,0.858-1.996
c0.536-0.535,0.778-0.946,0.894-1.198c-0.167-0.067-0.295-0.174-0.39-0.301c-0.169,0.285-0.427,0.659-0.838,1.137
C0.099,12.646-0.214,13.227,0.303,14.159z M3.739,14.388L2.437,11.42c-0.167,0.295-0.443,0.679-0.892,1.127
c-0.97,0.97-0.937,2.052,0.093,3.222C1.935,15.309,2.594,14.537,3.739,14.388z M8.481,15.879c0-0.061-0.049-0.109-0.11-0.109
s-0.11,0.049-0.11,0.109v2.309c0,0.122,0.22,0.122,0.22,0V15.879z M9.245,15.127c0-0.061-0.047-0.107-0.11-0.107
c-0.061,0-0.11,0.047-0.11,0.107v0.752v2.309v0.751c0,0.12,0.22,0.12,0.22,0V15.127L9.245,15.127z M10.022,15.127
c0-0.061-0.049-0.107-0.11-0.107s-0.11,0.047-0.11,0.107v3.812c0,0.12,0.22,0.122,0.22,0V15.127z M10.845,15.879
c0-0.061-0.049-0.109-0.11-0.109s-0.11,0.049-0.11,0.109v2.309c0,0.122,0.22,0.122,0.22,0V15.879z M17.089,16.283
c-0.115-0.238-0.748-1.378-2.175-1.378c-0.091,0-0.177-0.048-0.226-0.124c-0.051-0.074-0.059-0.174-0.021-0.258l0.697-1.59
c-0.29,0.291-0.577,0.516-0.867,0.674c-1.111,0.788-2.128,0.74-2.997,0.499c-0.002,0-0.002,0.002-0.004,0.002
c-0.006,0-0.01-0.007-0.018-0.009c-0.358-0.102-0.691-0.233-0.992-0.355c-0.411-0.167-0.766-0.311-1.033-0.311
c-0.27,0-0.62,0.145-1.025,0.315c-0.573,0.238-1.257,0.525-2.033,0.525c-0.814,0-1.729-0.332-2.709-1.356l0.707,1.606
c0.038,0.084,0.027,0.184-0.021,0.258c-0.05,0.076-0.137,0.124-0.229,0.124c-1.411,0-2.054,1.14-2.172,1.375
c0.016,0.264,0.16,1.618,1.427,2.888c0.768,0.766,1.753,0.842,2.444,0.768c0.892-0.094,1.625-0.465,1.93-0.768
c0.139-0.14,0.286-0.256,0.439-0.361c-0.279-0.072-0.494-0.316-0.494-0.619v-1.676c-0.234,0.231-0.498,0.47-0.921,0.623
c0.371,0.264,0.609,0.639,0.609,1.061c0,0.791-0.82,1.435-1.828,1.435c-0.002,0-0.004-0.002-0.008-0.002
c-0.006,0-0.012,0.002-0.017,0.002c-0.575,0-1.043-0.468-1.043-1.044l0.002-0.002l-0.002-0.143c-0.002-0.529-0.006-1.078,0.327-1.41
c0.177-0.18,0.427-0.271,0.742-0.271c0.032,0,0.061,0.006,0.093,0.008c0.007-0.002,0.009-0.008,0.017-0.008
c1.01,0,1.338-0.325,1.718-0.7c0.072-0.075,0.146-0.146,0.224-0.217c0.03-0.027,0.069-0.025,0.105-0.037
c0.039-0.325,0.304-0.58,0.641-0.58c0.038,0,0.072,0.016,0.108,0.021v-0.121c0-0.359,0.293-0.652,0.654-0.652
c0.149,0,0.28,0.059,0.39,0.141c0.11-0.082,0.24-0.141,0.39-0.141c0.36,0,0.652,0.293,0.652,0.652v0.133
c0.055-0.015,0.11-0.033,0.171-0.033c0.336,0,0.605,0.261,0.639,0.59c0.014,0.008,0.032,0.004,0.046,0.016
c0.083,0.074,0.157,0.151,0.236,0.227c0.38,0.377,0.707,0.702,1.717,0.702c0.008,0,0.01,0.008,0.019,0.008
c0.031,0,0.059-0.008,0.09-0.008c0.314,0,0.567,0.091,0.742,0.271c0.332,0.332,0.33,0.881,0.328,1.41l-0.001,0.141
c0,0.002,0.001,0.002,0.001,0.004c0,0.578-0.468,1.046-1.044,1.046c-0.006,0-0.01-0.004-0.016-0.004
c-0.003,0-0.003,0.004-0.009,0.004c-1.008,0-1.824-0.646-1.824-1.435c0-0.424,0.236-0.799,0.605-1.062
c-0.396-0.145-0.653-0.36-0.877-0.578v1.631c0,0.315-0.227,0.566-0.525,0.628c0.15,0.103,0.293,0.219,0.427,0.353
c0.305,0.303,1.037,0.672,1.929,0.768c0.69,0.074,1.676-0.002,2.444-0.768C16.928,17.9,17.074,16.549,17.089,16.283z M14.008,18.586
v-0.004c-0.002-0.271-0.224-0.492-0.498-0.492c-0.276,0-0.5,0.224-0.5,0.496c0,0.276,0.224,0.502,0.5,0.502
c0.274,0,0.498-0.224,0.5-0.5C14.01,18.588,14.008,18.588,14.008,18.586z M13.953,17.652c-0.023-0.097-0.059-0.186-0.112-0.238
c-0.073-0.074-0.189-0.107-0.356-0.107c-0.695,0-1.281,0.406-1.281,0.891c0,0.203,0.12,0.385,0.293,0.537
c-0.006-0.049-0.03-0.096-0.03-0.148c0-0.574,0.468-1.039,1.043-1.039C13.668,17.547,13.818,17.588,13.953,17.652z M6.595,18.586
c0,0.053-0.021,0.1-0.032,0.151c0.175-0.155,0.295-0.337,0.295-0.54c0-0.484-0.586-0.891-1.282-0.891
c-0.166,0-0.284,0.035-0.356,0.107c-0.055,0.055-0.086,0.142-0.11,0.238c0.133-0.064,0.281-0.105,0.441-0.105
C6.126,17.547,6.595,18.012,6.595,18.586z M5.55,18.09c-0.274,0-0.497,0.222-0.497,0.494v0.002l-0.002,0.002
c0.002,0.274,0.225,0.5,0.499,0.5c0.277,0,0.5-0.226,0.5-0.502C6.05,18.313,5.827,18.09,5.55,18.09z M17.516,12.547
c-0.451-0.448-0.726-0.832-0.892-1.127l-1.304,2.967c1.146,0.151,1.804,0.921,2.101,1.382C18.453,14.6,18.484,13.518,17.516,12.547z
M18.233,11.802c-0.411-0.479-0.669-0.854-0.837-1.137c-0.097,0.127-0.226,0.234-0.392,0.301c0.115,0.251,0.36,0.663,0.896,1.198
c0.421,0.421,0.904,1.106,0.856,1.996C19.274,13.227,18.962,12.646,18.233,11.802z M16.3,13.653
c-0.146-0.029-0.292,0.069-0.319,0.217s0.069,0.291,0.219,0.319c0.372,0.068,0.716,0.231,1.021,0.478
c0.049,0.042,0.109,0.063,0.171,0.063c0.079,0,0.157-0.035,0.213-0.102c0.095-0.117,0.075-0.287-0.04-0.381
C17.189,13.939,16.763,13.74,16.3,13.653z M16.292,13.112c0,0.152,0.121,0.274,0.271,0.274c0.276,0,0.54,0.043,0.788,0.129
c0.027,0.008,0.06,0.014,0.089,0.014c0.112,0,0.218-0.069,0.258-0.183c0.049-0.14-0.025-0.295-0.167-0.346
c-0.306-0.104-0.631-0.16-0.968-0.16C16.414,12.841,16.292,12.963,16.292,13.112z" />
</svg>
</div>
</div>
<!-- <div class="cube-face bevel"></div> -->
<div class="cube-face face-four">
<!-- <div class="cube-face bevel"></div> -->
</div>
</div>
</div>
</div>
<div class="cube-face face-base"></div>
</div>
<label for="active" data-text-active="Deactivate" data-text-inactive="Activate"></label>
</div>
@import 'compass/reset';
@import 'compass/css3';
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
@import url(https://fonts.googleapis.com/css?family=Oswald:700,300);
// @import url(https://fonts.googleapis.com/css?family=Covered+By+Your+Grace);
$yellow: #f1c40f;
$lime: #76c900;
$navy: #0a4069;
$cyan: #57caf4;
$red: #ec008c;
$white: #fefefe;
$gray: #444;
$lightGray: lighten($gray, 30);
$holoColor: rgba(#EAFDFF, 1);
$holoShine: rgba(#A2E5FD, .8);
$transitionDuration: .5s;
$transition: all $transitionDuration ease-in-out;
html,
body
{
height: 100%;
}
body
{
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 1em;
text-align: center;
color: $gray;
}
h1
{
font-size: 2.5em;
margin: 2em 0 .5em;
}
h2
{
margin-bottom: 3em;
}
em,
strong
{
font-weight: 700;
}
input
{
display: none;
}
header
{
color: lighten($gray, 20);
mix-blend-mode: difference;
p
{
margin-bottom: 0;
}
}
section
{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
algign-self: stretch;
padding: 0;
&:last-of-type
{
margin-bottom: 0;
}
article
{
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
width: 20em;
margin-bottom: 2em;
p,
&:last-of-type
{
margin-bottom: 0;
}
}
}
p
{
line-height: 1.5em;
max-width: 20em;
margin: 1.5em auto 2em;
padding-bottom: 1.5em;
span
{
display: block;
}
}
$facesColor: #E6BB85;
$facesColorDark: mix(black, $facesColor, 02%);
$facesColorLight: mix(white, $facesColor, 10%);
$facesShadow: rgba(black, .4);
.container
{
z-index: 1;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
// padding-bottom: 4em;
height: 100%;
background-image: radial-gradient(rgba($holoShine, 0) -200%, transparent 70%),
linear-gradient(180deg, #d0d0d0, #878787);
// background-image: radial-gradient(rgba($holoShine, .6) -200%, transparent 70%), linear-gradient(180deg, #464646, #2E2E2E);
background-size: 100% 100%, 100% 100%;
background-position: 0 100%, center center;
background-repeat: no-repeat;
label
{
// mix-blend-mode: difference;
color: $gray;
width: 9em;
text-align: center;
padding: 1em 0;
border: 1px solid $gray;
&:before
{
content: attr(data-text-inactive);
}
}
}
.cube-face
{
display: inline-block;
position: absolute;
left: 0;
top: 0;
width: 1em;
height: 1em;
border-radius: .01em;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: all $transitionDuration ease-in-out;
background-color: $white;
background-size: .05em 100%;
background-repeat: repeat;
background-position: left top;
z-index: 1;
// opacity: .5;
&:after
{
width: 100%;
height:100%;
content: '';
display: inline-block;
position: absolute;
left: 0;
top: 0;
background-size: 100% 100%;
transition: all $transitionDuration ease-in-out;
}
&.bevel
{
top: auto;
bottom: 100%;
width: 1em;
height: 1em;
// height: .5em;
// overflow: hidden;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: rotateX(90deg) translateY(0);
transform: rotateX(90deg) translateY(0);
border-radius: .025em .025em 0 0;
transition-duration: 1s;
// transition-timing-function: cubic-bezier(0.44,-0.49, 0.57, 1.47);
&:after
{
width: .2em;
height:100%;
content: '';
display: inline-block;
position: absolute;
top: 0;
left: 100%;
margin-left: 1px;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
background-color: #6A6A6A;
background-image: radial-gradient(circle, $gray 50%, transparent 50%);
background-size: .1em .1em;
background-repeat: no-repeat;
background-position: center .05em;
}
}
&.face-one
{
z-index: 2;
-webkit-transform: rotateX(-90deg) translateZ(0);
transform: rotateX(-90deg) translateZ(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
&.face-two,
&.face-three,
&.face-four
{
left: 100%;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
}
&.face-one
{
&:after
{
background-image: linear-gradient(5deg, rgba($facesShadow, .4), transparent);
}
> .bevel
{
z-index: 4;
box-shadow: 0 -.05em .25em -.1em rgba($facesShadow, .4), inset -.01em 0 0 0 rgba(lighten($facesColorLight, 10), .2);
&:after
{
// background-image: linear-gradient(120deg, rgba($facesShadow, .1), transparent);
}
}
}
&.face-two:after
{
transition-delay: $transitionDuration;
background-image: linear-gradient(-15deg, rgba($facesShadow, .15), transparent),
linear-gradient(-40deg, rgba($facesShadow, .15) 20%, transparent 100%);
background-size: 100% 100%, 100% 300%;
background-position: left bottom;
}
&.face-three:after
{
background-color: rgba($facesShadow, .2);
background-image: linear-gradient(-180deg, rgba($facesShadow, .25) 30%, transparent 80%);
background-size: 100% 500%;
background-position: left bottom;
}
&.face-four:after
{
background-image: linear-gradient(5deg, $facesShadow, transparent);
}
}
.label
{
$thisPadding: .35em;
em
{
// font-weight: 400;
padding-right: $thisPadding / 2;
margin-right: $thisPadding / 2;
border-right: 1px solid rgba(black, .3);
color: #6A6A6A;
}
p
{
text-transform: uppercase;
font-size: .4em;
line-height: 1em;
padding: 0;
margin: 0;
}
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
padding: $thisPadding;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
font-weight: 700;
font-size: .16em;
line-height: 1em;
font-family: 'Oswald', cursive;
font-weight: 400;
text-align: left;
color: #6A6A6A;
&.top
{
top: 0;
bottom: auto;
}
&.center
{
border: none;
em
{
border: none;
margin: 0;
padding: .6em;
border-radius: 100%;
background-color: #6A6A6A;
border: 1px dashed $white;
color: white;
}
font-size: .24em;
padding: 0;
height: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
position: relative;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
svg
{
display: inline-block;
font-size: .6em;
line-height: 1em;
width: 1.313em;
height: 1.313em;
path
{
fill: #6A6A6A;
}
}
}
.cube-base
{
font-size: 7.5em;
display: inline-block;
position: relative;
margin-top: 1.6em;
width: 1em;
height: 1em;
line-height: 1em;
-webkit-perspective: 5000px;
perspective: 5000px;
-webkit-transform: rotateX(65deg) rotateZ(145deg);
transform: rotateX(65deg) rotateZ(145deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: all ($transitionDuration * 3) cubic-bezier(0.41,-0.01, 0.61, 1.15);
box-shadow: 0 0 1em .5em rgba(black, .1),
0 0 .2em .01em rgba(black, .05),
0 0 1em .8em rgba(black, .05);
&:after
{
content: '';
width: 1em;
height: 1em;
display: inline-block;
// background-color: black;
opacity: .6;
transition: all ($transitionDuration * 3) ease-in-out;
// -webkit-filter: blur(10px);
background-color: rgba(black, .5);
-webkit-transform: translateZ(0) scale(1);
transform: translateZ(0) scale(1);
box-shadow: .05em -.05em .2em .02em rgba(black, .4),
.03em -.03em .1em -.01em rgba(black, .6);
}
&:hover,
&.active
{
// transform: rotateX(60deg) rotateZ(-225deg) translateZ(.25em);
// box-shadow: 0 0 1em .5em rgba(black, .1),
// 0 0 .2em .01em rgba(black, .15),
// 0 0 1em .8em rgba(black, .15);
.bevel
{
// transform: rotateX(-160deg);
}
&:after
{
// transform: translateZ(-.25em) scale(.9);
box-shadow: 0 0 .2em .02em rgba(black, .4),
0 0 .1em -.01em rgba(black, .6);
opacity: .4;
}
.face-two
{
&:after
{
background-size: 100% 200%;
}
// > .bevel:after
// {
// background-size: 180% 390%;
// }
}
.face-three
{
&:after
{
// background-size: 100% 100%;
}
> .bevel:after
{
// background-size: 440% 100%;
}
}
// .holo
// {
// transform: rotateX(-90deg) rotateY(-40deg) rotateZ(0deg) translateY(-1.5em) scale(1);
// }
}
}
.holo
{
position: absolute;
width: 1em;
height: 1em;
z-index: 3;
border-radius: 1em;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
background-color: #EAFDFF;
box-shadow: 0 0 .08em .04em #EAFDFF,
0 -.2em .5em .2em $holoShine;
-webkit-transform: rotateX(90deg) rotateY(45deg) rotateZ(180deg) translateY(-.5em) scale(.8);
transform: rotateX(90deg) rotateY(45deg) rotateZ(180deg) translateY(-.5em) scale(.8);
opacity: 0;
.holo-image
{
opacity: 0;
position: relative;
z-index: 1;
-webkit-transform: translateY(-1.65em) scale(1.8);
transform: translateY(-1.65em) scale(1.8);
-webkit-filter: drop-shadow(0 0 .06em $holoShine)
drop-shadow(0 -.04em .01em darken($holoShine, 40));
.image-gradient-shape
{
-webkit-filter: url(#drop-shadow);
filter: url(#drop-shadow);
fill: url(#image-gradient-0);
@media (min-width: 700px) {
fill: transparent;
-webkit-animation: blinkDotHolo .006s linear infinite;
animation: blinkDotHolo .006s linear infinite;
}
}
}
.holo-shine
{
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
z-index: 2;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
svg
{
width: 100%;
height: 100%;
-webkit-transform: scaleY(4) scaleX(3.3) translateY(-0.55em);
transform: scaleY(4) scaleX(3.3) translateY(-0.55em);
polygon
{
fill: url(#gradient);
-webkit-filter: url(#blur);
filter: url(#blur);
}
}
}
}
.active:checked
{
+ .container
{
-webkit-animation: illumination 1.5s linear forwards;
animation: illumination 1.5s linear forwards;
-webkit-animation-delay: 1s;
animation-delay: 1s;
label
{
color: lighten($cyan, 20);
border-color: lighten($cyan, 20);
&:before
{
content: attr(data-text-active);
}
}
.cube-base
{
-webkit-transform: rotateX(65deg) rotateZ(-225deg) translateZ(.15em);
transform: rotateX(65deg) rotateZ(-225deg) translateZ(.15em);
&:after
{
-webkit-transform: translateZ(-.15em) scale(.9);
transform: translateZ(-.15em) scale(.9);
box-shadow: 0 0 .2em .02em rgba(black, .4),
0 0 .1em -.01em rgba(black, .6);
opacity: .4;
}
.holo
{
-webkit-animation: activation 1.5s linear forwards;
animation: activation 1.5s linear forwards;
-webkit-animation-delay: 1s;
animation-delay: 1s;
.holo-shine
{
opacity: 1;
}
.holo-image
{
-webkit-animation: hologram .25s cubic-bezier(0.47,-0.44, 0.55, 1.51) forwards;
animation: hologram .25s cubic-bezier(0.47,-0.44, 0.55, 1.51) forwards;
-webkit-animation-delay: 2.3s;
animation-delay: 2.3s;
}
}
}
.cube-face
{
&.bevel
{
-webkit-transform: rotateX(0) translateY(1em);
transform: rotateX(0) translateY(1em);
&:after
{
-webkit-animation: blinkDot .5s linear infinite;
animation: blinkDot .5s linear infinite;
// background-image: radial-gradient(circle, $cyan 50%, transparent 50%);
}
}
&.face-one:after
{
-webkit-animation: illuminationFace 1.5s linear forwards;
animation: illuminationFace 1.5s linear forwards;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
}
}
}
@-webkit-keyframes blinkDotHolo
{
0%{
fill: url(#image-gradient-0);
}
50%,
100%{
fill: url(#image-gradient-1);
}
}
@keyframes blinkDotHolo
{
0%{
fill: url(#image-gradient-0);
}
50%,
100%{
fill: url(#image-gradient-1);
}
}
@-webkit-keyframes blinkDot
{
0%
{
background-image: radial-gradient(circle, $gray 40%, transparent 40%);
}
50%,
100%
{
background-image: radial-gradient(circle, $cyan 20%, transparent 20%);
}
}
@keyframes blinkDot
{
0%
{
background-image: radial-gradient(circle, $gray 40%, transparent 40%);
}
50%,
100%
{
background-image: radial-gradient(circle, $cyan 20%, transparent 20%);
}
}
@-webkit-keyframes hologram
{
0%
{
-webkit-transform: translateY(-1.65em) scale(.6);
transform: translateY(-1.65em) scale(.6);
opacity: 0;
}
100%
{
-webkit-transform: translateY(-1.5em) scale(1.8);
transform: translateY(-1.5em) scale(1.8);
opacity: 1;
}
}
@keyframes hologram
{
0%
{
-webkit-transform: translateY(-1.65em) scale(.6);
transform: translateY(-1.65em) scale(.6);
opacity: 0;
}
100%
{
-webkit-transform: translateY(-1.5em) scale(1.8);
transform: translateY(-1.5em) scale(1.8);
opacity: 1;
}
}
@-webkit-keyframes illuminationFace
{
0%
{
background-image: linear-gradient(5deg, rgba($facesShadow, .4), transparent);
}
4%
{
background-image: linear-gradient(5deg, rgba($facesShadow, .9), transparent);
}
8%
{
background-image: linear-gradient(5deg, rgba($facesShadow, .4), transparent);
}
25%
{
background-image: linear-gradient(5deg, rgba($facesShadow, .9), transparent);
}
27%
{
background-image: linear-gradient(5deg, rgba($facesShadow, .4), transparent);
}
99%
{
background-image: linear-gradient(5deg, rgba($facesShadow, .4), transparent);
}
100%
{
background-image: linear-gradient(5deg, rgba($facesShadow, .9), transparent);
}
}
@keyframes illuminationFace
{
0%
{
background-image: linear-gradient(5deg, rgba($facesShadow, .4), transparent);
}
4%
{
background-image: linear-gradient(5deg, rgba($facesShadow, .9), transparent);
}
8%
{
background-image: linear-gradient(5deg, rgba($facesShadow, .4), transparent);
}
25%
{
background-image: linear-gradient(5deg, rgba($facesShadow, .9), transparent);
}
27%
{
background-image: linear-gradient(5deg, rgba($facesShadow, .4), transparent);
}
99%
{
background-image: linear-gradient(5deg, rgba($facesShadow, .4), transparent);
}
100%
{
background-image: linear-gradient(5deg, rgba($facesShadow, .9), transparent);
}
}
@-webkit-keyframes illumination
{
0%
{
background-image: radial-gradient(rgba($holoShine, 0) -200%, transparent 70%),
linear-gradient(180deg, #d0d0d0, #878787);
}
4%
{
background-image: radial-gradient(rgba($holoShine, 1) -100%, transparent 70%),
linear-gradient(180deg, #464646, #2E2E2E);
}
8%
{
background-image: radial-gradient(rgba($holoShine, 0) -200%, transparent 70%),
linear-gradient(180deg, #d0d0d0, #878787);
}
25%
{
background-image: radial-gradient(rgba($holoShine, 1) -100%, transparent 70%),
linear-gradient(180deg, #464646, #2E2E2E);
}
39%
{
background-image: radial-gradient(rgba($holoShine, 0) -200%, transparent 70%),
linear-gradient(180deg, #d0d0d0, #878787);
}
100%
{
background-image: radial-gradient(rgba($holoShine, 1) -100%, transparent 100%),
linear-gradient(180deg, #464646, #2E2E2E);
}
}
@keyframes illumination
{
0%
{
background-image: radial-gradient(rgba($holoShine, 0) -200%, transparent 70%),
linear-gradient(180deg, #d0d0d0, #878787);
}
4%
{
background-image: radial-gradient(rgba($holoShine, 1) -100%, transparent 70%),
linear-gradient(180deg, #464646, #2E2E2E);
}
8%
{
background-image: radial-gradient(rgba($holoShine, 0) -200%, transparent 70%),
linear-gradient(180deg, #d0d0d0, #878787);
}
25%
{
background-image: radial-gradient(rgba($holoShine, 1) -100%, transparent 70%),
linear-gradient(180deg, #464646, #2E2E2E);
}
39%
{
background-image: radial-gradient(rgba($holoShine, 0) -200%, transparent 70%),
linear-gradient(180deg, #d0d0d0, #878787);
}
100%
{
background-image: radial-gradient(rgba($holoShine, 1) -100%, transparent 100%),
linear-gradient(180deg, #464646, #2E2E2E);
}
}
@-webkit-keyframes activation
{
0%
{
opacity: 0;
}
4%
{
opacity: 1;
}
8%
{
opacity: 0;
}
25%
{
opacity: 1;
}
39%
{
opacity: 0;
}
70%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}
@keyframes activation
{
0%
{
opacity: 0;
}
4%
{
opacity: 1;
}
8%
{
opacity: 0;
}
25%
{
opacity: 1;
}
39%
{
opacity: 0;
}
70%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.