body, header, section { width:100vw; height:100vh !important; padding: 0 !important; margin: 0 !important; top: 0 !important; left: 0 !important; bottom: 0 !important; right: 0 !important; border: none !important; overflow: hidden; } body { position:relative; text-align: center; } table{ display: table; } tbody{ display: table-row-group; } tr{ position:absolute; display: table-row; } td{ display: table-cell; } header { background:-moz-linear-gradient(top,#fff 0,#c7c7c7 50%,#bfbfbf 50%,#8a8a8a);background:-webkit-gradient(linear,left top,left bottom,from(#fff),color-stop(.5,#c7c7c7),color-stop(.5,#bfbfbf),to(#8a8a8a));-moz-box-shadow:1px 1px 3px rgba(000,000,000,.5),inset 0 0 2px rgba(255,255,255,1);-webkit-box-shadow:1px 1px 3px rgba(000,000,000,.5),inset 0 0 2px rgba(255,255,255,1);box-shadow:1px 1px 3px rgba(000,000,000,.5),inset 0 0 2px rgba(255,255,255,1);text-shadow:0 -1px 0 rgba(056,056,056,1),0 1px 0 rgba(227,227,227,1); } header > spam, header > img { color: #ffffff; background: -moz-linear-gradient(top,#6b6b6b 0%,#000000);background: -webkit-gradient(linear, left top, left bottom,from(#6b6b6b),to(#000000));border: 1px solid #000000;-moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 1px rgba(255,255,255,0.7);-webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 1px rgba(255,255,255,0.7);box-shadow: 0px 1px 3px rgba(000,000,000,0.5),inset 0px 0px 1px rgba(255,255,255,0.7);text-shadow: 0px -1px 0px rgba(000,000,000,0.4),0px 1px 0px rgba(255,255,255,0.3); } header > spam { display:block; width:95vw;text-decoration:none; -webkit-border-bottom-right-radius: 50px;-webkit-border-bottom-left-radius: 50px;-moz-border-radius-bottomright: 50px;-moz-border-radius-bottomleft: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px; } img[type=button] { display:list-item; padding:5px;cursor: pointer;transition:width 1s,height 1s,transform 1s;-moz-transition:width 1s,height 1s,-moz-transform 1s;-webkit-transition:width 1s,height 1s,-webkit-transform 1s;-o-transition:width 1s,height 1s,-o-transform 1s;width:106px;height:150px;margin:15px auto!important;box-shadow:0 15px 15px -10px rgba(0,0,0,.7)!important; } img[type=button]:hover,img[type=button]:focus,spam[type=button]:hover,spam:hover { cursor: pointer;color: #050505;background: -moz-linear-gradient(top,#ffffff 0%,#ebebeb 1%,#dbdbdb 16%,#e3e3e3 64%,#ffffff);background: -webkit-gradient(linear, left top, left bottom,from(#ffffff),color-stop(0.1, #ebebeb),color-stop(0.16, #dbdbdb),color-stop(0.64, #e3e3e3),to(#ffffff));border: 1px solid #949494; } img[type=button]:hover, img[type=button]:focus { transform:scale(1.1);-moz-transform:scale(1.1);-webkit-transform:scale(1.1);-o-transform:scale(1.1); } section { display:none; background: rgb(69,72,77);background: -moz-radial-gradient(center, ellipse cover, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%);background: -webkit-radial-gradient(center, ellipse cover, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);background: radial-gradient(ellipse at center, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=1 ); } picture { float:center; margin: 0 auto; top: 0; left: 0; bottom: 0; right: 0;z-index: 998; } picture img { display: block; max-width: 100vw;max-height:100vh;padding:0;Border:none; } /* Barra lateral */ #nav{ display: grid; position: fixed; top: 50%; right: 0; text-align: center; transform: translate(0, -50%); } .nav { opacity: 0.3; font-size: 5vmin; } .nav:hover { opacity: 1.0; } #nav button { padding: 10vh 0; } #nav button:first-child { padding: 0; margin: 0 0 5vh 0; border-radius: 50px; } #nav button:nth-of-type(2) { border-radius: 50px 0 0 0; } #nav button:nth-of-type(3) { border-radius: 0 0 0 50px; } #nav select { padding: 5vmin 0; } /* Safari syntax */ :-webkit-full-screen body header { display:none; } :-webkit-full-screen body section { display:block; } } /* IE11 */ :-ms-fullscreen body header { display:none; } :-ms-fullscreen body section { display:block; } /* Standard syntax */ :fullscreen body header { display:none; } :fullscreen body section { display:block; }

¡A tu disposicion!

Publicar un comentario

Inicio