Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
CSS
/* --------------------------------------------------------------------- Base Styles ------------------------------------------------------------------------ */ .isHidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; margin: 0 !important; clip: rect(1px 1px 1px 1px) !important; clip: rect(1px, 1px, 1px, 1px) !important; overflow: hidden !important; } img { max-width: 100%; } /* --------------------------------------------------------------------- Base ------------------------------------------------------------------------ */ body { background-color: black; background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px), radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px), radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px), radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px); background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; background-position: 0 0, 40px 60px, 130px 270px, 70px 100px; -webkit-animation: move-back 3s infinite linear; } @-webkit-keyframes move-back { 0% {background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;} 100% {background-position: 550px 0, 390px 60px, 380px 270px, 220px 100px;} } .stage { position: relative; margin: 50px 0 0 100px; } /* --------------------------------------------------------------------- Text ------------------------------------------------------------------------ */ .info { position: absolute; top:600px; left: 50px; color: #f6f6f6; text-transform: uppercase; font-size: 22px; font-family: 'Orbitron', sans-serif; text-align: center; text-shadow: 3px 3px 5px #5590c6; } .info-hd { margin-bottom: 15px; } .hdg { font-size: 60px; font-weight: 700; letter-spacing: 4px; } /* --------------------------------------------------------------------- Disc ------------------------------------------------------------------------ */ .disc { position: absolute; opacity: 1; border-radius: 50%; -webkit-transform: rotate(-28deg); } .disc_main { width: 635px; height: 300px; top: 70px; left: 20px; z-index: 42; box-shadow: -2px 0px 1px 1px #6b6b6b; background: rgb(206,206,206); /* Old browsers */ background: -moz-linear-gradient(45deg, rgba(206,206,206,1) 0%, rgba(228,228,228,1) 27%, rgba(239,239,239,1) 60%, rgba(255,255,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(206,206,206,1)), color-stop(27%,rgba(228,228,228,1)), color-stop(60%,rgba(239,239,239,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* IE10+ */ background: linear-gradient(45deg, rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .disc_shadow { width: 645px; height: 320px; top: 70px; left: 20px; z-index: 41; background: rgb(54,54,54); /* Old browsers */ background: -moz-linear-gradient(left, rgba(54,54,54,1) 1%, rgba(131,131,131,1) 11%, rgba(228,228,228,1) 26%, rgba(228,228,228,1) 56%, rgba(255,255,255,1) 79%, rgba(255,255,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(54,54,54,1)), color-stop(11%,rgba(131,131,131,1)), color-stop(26%,rgba(228,228,228,1)), color-stop(56%,rgba(228,228,228,1)), color-stop(79%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(54,54,54,1) 1%,rgba(131,131,131,1) 11%,rgba(228,228,228,1) 26%,rgba(228,228,228,1) 56%,rgba(255,255,255,1) 79%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(54,54,54,1) 1%,rgba(131,131,131,1) 11%,rgba(228,228,228,1) 26%,rgba(228,228,228,1) 56%,rgba(255,255,255,1) 79%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(54,54,54,1) 1%,rgba(131,131,131,1) 11%,rgba(228,228,228,1) 26%,rgba(228,228,228,1) 56%,rgba(255,255,255,1) 79%,rgba(255,255,255,1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(54,54,54,1) 1%,rgba(131,131,131,1) 11%,rgba(228,228,228,1) 26%,rgba(228,228,228,1) 56%,rgba(255,255,255,1) 79%,rgba(255,255,255,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#363636', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ } .disc_ring1 { width: 460px; height: 210px; top: 95px; left: 110px; z-index: 43; box-shadow: 2px 2px 3px 2px #fff; background: rgb(206,206,206); /* Old browsers */ background: -moz-linear-gradient(45deg, rgba(206,206,206,1) 0%, rgba(228,228,228,1) 27%, rgba(239,239,239,1) 60%, rgba(255,255,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(206,206,206,1)), color-stop(27%,rgba(228,228,228,1)), color-stop(60%,rgba(239,239,239,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* IE10+ */ background: linear-gradient(45deg, rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .disc_ring1:after { position: absolute; border-radius: 50%; content: ""; width: 460px; height: 210px; top: 0px; left: 0px; box-shadow: -3px 0px 2px 0px #6b6b6b; } .disc_ring2 { width: 350px; height: 160px; top: 115px; left: 165px; z-index: 44; box-shadow: 5px 0px 0px -1px #6b6b6b; } .disc_ring2:after { position: absolute; border-radius: 50%; content: ""; width: 350px; height: 160px; top: 0px; left: 0px; box-shadow: -5px 0px 0px -1px #fff; } .disc_ring3 { width: 295px; height: 125px; top: 128px; left: 195px; z-index: 45; box-shadow: 2px 2px 3px 2px #fff; background: rgb(206,206,206); /* Old browsers */ background: -moz-linear-gradient(45deg, rgba(206,206,206,1) 0%, rgba(228,228,228,1) 27%, rgba(239,239,239,1) 60%, rgba(255,255,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(206,206,206,1)), color-stop(27%,rgba(228,228,228,1)), color-stop(60%,rgba(239,239,239,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* IE10+ */ background: linear-gradient(45deg, rgba(206,206,206,1) 0%,rgba(228,228,228,1) 27%,rgba(239,239,239,1) 60%,rgba(255,255,255,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .disc_ring3:after { position: absolute; border-radius: 50%; content: ""; width: 295px; height: 125px; top: 0px; left: 0px; box-shadow: -3px 0px 2px 0px #6b6b6b; } .disc_bridge1 { width: 30px; height: 20px; top: 170px; left: 323px; z-index: 61; border: 1px solid #d9d9d9; background: rgb(75,75,75); /* Old browsers */ background: -moz-linear-gradient(left, rgba(75,75,75,1) 0%, rgba(188,188,188,1) 23%, rgba(255,255,255,1) 44%, rgba(255,255,255,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(75,75,75,1)), color-stop(23%,rgba(188,188,188,1)), color-stop(44%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(75,75,75,1) 0%,rgba(188,188,188,1) 23%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(75,75,75,1) 0%,rgba(188,188,188,1) 23%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(75,75,75,1) 0%,rgba(188,188,188,1) 23%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(75,75,75,1) 0%,rgba(188,188,188,1) 23%,rgba(255,255,255,1) 44%,rgba(255,255,255,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b4b4b', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ } .disc_bridge2 { width: 40px; height: 30px; top: 166px; left: 319px; z-index: 60; box-shadow: 2px 2px 1px 1px #fff; background: #e5e5e5; } .disc_bridge2:after { position: absolute; border-radius: 50%; content: ""; width: 40px; height: 30px; top: 0px; left: 0px; box-shadow: -3px 0px 1px 1px #6b6b6b; } /* --------------------------------------------------------------------- Spine ------------------------------------------------------------------------ */ .spine { position: absolute; opacity: 1; } .spine_discTip { top: 120px; left: 145px; width: 100px; height: 200px; background: #c8c8c8; border-radius: 50%; z-index: 30; } .spine_discFront { top: 145px; left: 143px; width:0; height:35px; border-right:350px solid #c8c8c8; border-top:14px solid transparent; border-bottom:14px solid transparent; z-index: 59; -webkit-transform: skew(-40deg) rotate(13deg); } .spine_discBack { top: 203px; left: 437px; width:0; height: 61px; border-left:156px solid #c8c8c8; border-top: 2px solid transparent; border-bottom: 0px solid transparent; z-index: 59; -webkit-transform: skew(-39deg) rotate(14deg); } .spine_discSide1 { top: 167px; left: 152px; width:0; height: 6px; border-left: 91px solid #4b4b4b; border-top: 0px solid transparent; border-bottom: 8px solid transparent; z-index: 58; -webkit-transform: rotate(20deg); } .spine_discSide2 { top: 209px; left: 236px; width:0; height: 6px; border-right: 160px solid #4b4b4b; border-top: 0px solid transparent; border-bottom: 3px solid transparent; z-index: 58; -webkit-transform: rotate(19.5deg); } .spine_discSide3 { top: 250px; left: 370px; width:0; height: 12px; border-right: 135px solid #4b4b4b; border-top: 0px solid transparent; border-bottom: 22px solid transparent; z-index: 58; -webkit-transform: rotate(18deg); } .spine_discSide4 { top: 268px; left: 458px; width: 32px; height:0; border-top:50px solid #4b4b4b; border-left:50px solid transparent; border-right:0px solid transparent; z-index: 58; -webkit-transform: rotate(16deg); } .spine_curve1 { top: 177px; left: 192px; width: 29px; height: 5px; border-radius: 50%; background: #eaeaea; z-index: 59; -webkit-transform: rotate(14deg); } .spine_curve2 { top: 211px; left: 236px; width: 148px; height: 10px; border-radius: 50%; background: #eaeaea; z-index: 59; -webkit-transform: rotate(21deg); } .spine_curve3 { top: 260px; left: 399px; width: 33px; height: 5px; border-radius: 50%; background: #eaeaea; z-index: 59; -webkit-transform: rotate(25deg); } .spine_pulseEngine1 { top: 219px; left: 552px; width:50px; height:40px; opacity: 1; -webkit-transform: rotate(14deg); background: rgb(234,46,65); /* Old browsers */ background: -moz-linear-gradient(left, rgba(234,46,65,1) 81%, rgba(132,26,45,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(81%,rgba(234,46,65,1)), color-stop(100%,rgba(132,26,45,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(234,46,65,1) 81%,rgba(132,26,45,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(234,46,65,1) 81%,rgba(132,26,45,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(234,46,65,1) 81%,rgba(132,26,45,1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(234,46,65,1) 81%,rgba(132,26,45,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea2e41', endColorstr='#841a2d',GradientType=1 ); /* IE6-9 */ } .spine_pulseEngine2 { top: 254px; left: 503px; width:90px; height:50px; z-index: 31; -webkit-transform: rotate(-42deg); background: #ea2e41; } .spine_pulseEngine3 { top: 264px; left: 503px; width:90px; height: 49px; opacity: 1; z-index: 57; -webkit-transform: rotate(15deg); background: rgb(234,46,65); /* Old browsers */ background: -moz-linear-gradient(left, rgba(234,46,65,1) 37%, rgba(75,75,75,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(37%,rgba(234,46,65,1)), color-stop(100%,rgba(75,75,75,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(234,46,65,1) 37%,rgba(75,75,75,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(234,46,65,1) 37%,rgba(75,75,75,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(234,46,65,1) 37%,rgba(75,75,75,1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(234,46,65,1) 37%,rgba(75,75,75,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea2e41', endColorstr='#4b4b4b',GradientType=1 ); /* IE6-9 */ } .spine_engineTop1 { top: 310px; left: 495px; width:0; height: 13px; border-left: 440px solid #e3e3e3; border-top: 2px solid transparent; border-bottom: 20px solid transparent; z-index: 58; -webkit-transform: skew(-37deg) rotate(20deg); } .spine_engineTop1:before { position: absolute; top: -2px; left: -430px; content:""; width:10px; height: 34px; z-index: 70; background: rgb(200,200,200); /* Old browsers */ background: -moz-linear-gradient(left, rgba(200,200,200,1) 0%, rgba(227,227,227,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(200,200,200,1)), color-stop(100%,rgba(227,227,227,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(200,200,200,1) 0%,rgba(227,227,227,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(200,200,200,1) 0%,rgba(227,227,227,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(200,200,200,1) 0%,rgba(227,227,227,1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(200,200,200,1) 0%,rgba(227,227,227,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8c8c8', endColorstr='#e3e3e3',GradientType=1 ); /* IE6-9 */ } .spine_engineTop2 { top: 332px; left: 522px; width:0; height: 0px; border-left: 350px solid #4b4b4b; border-top: 0px solid transparent; border-bottom: 45px solid transparent; z-index: 56; -webkit-transform: rotate(22.5deg); } .spine_engineBottom1 { top: 346px; left: 640px; width:0; height: 30px; border-left: 300px solid #d7d7d7; border-top: 3px solid transparent; border-bottom: 35px solid transparent; z-index: 39; -webkit-transform: skew(-25deg) rotate(20deg); } .spine_engineBottom2 { top: 309px; left: 510px; width: 150px; height: 25px; z-index: 40; -webkit-transform: skew(-25deg) rotate(18deg); background: rgb(234,46,65); /* Old browsers */ background: -moz-linear-gradient(left, rgba(234,46,65,1) 0%, rgba(234,46,65,1) 21%, rgba(215,215,215,1) 34%, rgba(215,215,215,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(234,46,65,1)), color-stop(21%,rgba(234,46,65,1)), color-stop(34%,rgba(215,215,215,1)), color-stop(100%,rgba(215,215,215,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(234,46,65,1) 0%,rgba(234,46,65,1) 21%,rgba(215,215,215,1) 34%,rgba(215,215,215,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(234,46,65,1) 0%,rgba(234,46,65,1) 21%,rgba(215,215,215,1) 34%,rgba(215,215,215,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(234,46,65,1) 0%,rgba(234,46,65,1) 21%,rgba(215,215,215,1) 34%,rgba(215,215,215,1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(234,46,65,1) 0%,rgba(234,46,65,1) 21%,rgba(215,215,215,1) 34%,rgba(215,215,215,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea2e41', endColorstr='#d7d7d7',GradientType=1 ); /* IE6-9 */ } .spine_engineBottom3 { top: 334px; left: 595px; width: 130px; height: 30px; border-radius: 50%; z-index: 31; -webkit-transform: rotate(16deg); background: #d7d7d7; } .spine_engineBottom4 { top: 397px; left: 908px; width: 20px; height: 37px; border-radius: 50%; z-index: 60; -webkit-transform: rotate(42deg); background: #d7d7d7; } .spine_engineBottom5 { top: 357px; left: 590px; width:0; height: 40px; border-left: 370px solid #4f4f4f; border-top: 3px solid transparent; border-bottom: 35px solid transparent; z-index: 20; -webkit-transform: skew(-25deg) rotate(18deg); } .spine_engineBottom6 { top: 276px; left: 454px; width: 150px; height:50px; z-index: 20; -webkit-transform: rotate(38deg); background: #212121; } .spine_engineBottom7 { top: 298px; left: 547px; width: 130px; height: 80px; border-radius: 50%; z-index: 20; -webkit-transform: rotate(8deg); background: rgb(33,33,33); /* Old browsers */ background: -moz-linear-gradient(left, rgba(33,33,33,1) 0%, rgba(79,79,79,1) 62%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(33,33,33,1)), color-stop(62%,rgba(79,79,79,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(33,33,33,1) 0%,rgba(79,79,79,1) 62%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(33,33,33,1) 0%,rgba(79,79,79,1) 62%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(33,33,33,1) 0%,rgba(79,79,79,1) 62%); /* IE10+ */ background: linear-gradient(to right, rgba(33,33,33,1) 0%,rgba(79,79,79,1) 62%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212121', endColorstr='#4f4f4f',GradientType=1 ); /* IE6-9 */ } .spine_engineBottom8 { top: 413px; left: 904px; width: 60px; height: 47px; border-radius: 50%; z-index: 20; -webkit-transform: rotate(18deg); background: #4f4f4f; } .spine_engineBottom9 { top: 414px; left: 900px; width: 60px; height: 38px; border-radius: 50%; z-index: 21; -webkit-transform: rotate(18deg); background: rgb(63,63,63); /* Old browsers */ background: -moz-linear-gradient(top, rgba(63,63,63,1) 0%, rgba(247,247,247,1) 39%, rgba(247,247,247,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(63,63,63,1)), color-stop(39%,rgba(247,247,247,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(63,63,63,1) 0%,rgba(247,247,247,1) 39%,rgba(247,247,247,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(63,63,63,1) 0%,rgba(247,247,247,1) 39%,rgba(247,247,247,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(63,63,63,1) 0%,rgba(247,247,247,1) 39%,rgba(247,247,247,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(63,63,63,1) 0%,rgba(247,247,247,1) 39%,rgba(247,247,247,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */ } /* --------------------------------------------------------------------- Engine Wings ------------------------------------------------------------------------ */ .engine { position: absolute; opacity: 1; } .engine_wingLeft { top: 392px; left: 698px; width:55px; height:0; z-index: 10; border-bottom:55px solid #ededed; border-left:0px solid transparent; border-right:50px solid transparent; } .engine_wingRight { top: 48px; left: 850px; width:43px; height:0; z-index: 11; border-top: 380px solid #878787; border-left: 105px solid transparent; border-right:0px solid transparent; -webkit-transform: rotate(75deg); -webkit-mask-position: 0px 0px; -webkit-mask-size: 148px 380px; -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.00, rgba(0,0,0,0)), color-stop(0.15, rgba(0,0,0,0)), color-stop(0.151, rgba(0,0,0,1)), color-stop(1.00, rgba(0,0,0,1))); } .engine_wingRight:before { position: absolute; top: -390px; left: -90px; content: ""; width: 80px; height: 80px; background: #000; z-index: 100; } .engine_wingRight:after { position: absolute; top: -400px; left: 40px; content: ""; width: 5px; height: 400px; z-index: 101; -webkit-transform: rotate(0deg);background: rgb(33,33,33); /* Old browsers */ background: #616161; } .engine_wingRightLight { top: 250px; left:761px; width: 50px; height: 150px; z-index: 11; } /* --------------------------------------------------------------------- Warp Engines ------------------------------------------------------------------------ */ #engineRight { position: absolute; top: 153px; left: 950px; z-index:70; -webkit-transform: rotate(15deg); } #engineLeft { position: absolute; top: 446px; left: 710px; z-index:70; -webkit-transform: rotate(15deg) scale(1.3); } .engine_warp1 { position: absolute; width: 230px; height: 60px; background: #757575; z-index:53; } .engine_warpText { position: absolute; top: 12px; left: 23px; width: 230px; height: 60px; color: #2d2d2d; font-family: 'Orbitron', sans-serif; font-size: 32px; font-weight: 700; z-index:54; } .engine_warp2 { position: absolute; left: 250px; width:0; height: 27px; border-left: 180px solid #8d8d8d; border-top: 10px solid transparent; border-bottom: 20px solid transparent; } .engine_warp2:after { position: absolute; content: ""; top: -31px; left: -260px; width: 130px; height: 49px; border-radius: 50%; z-index: -100; -webkit-transform: rotate(-2deg); background: rgb(215,215,215); /* Old browsers */ background: -moz-linear-gradient(left, rgba(215,215,215,1) 1%, rgba(215,215,215,1) 48%, rgba(228,228,228,1) 67%, rgba(228,228,228,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(215,215,215,1)), color-stop(48%,rgba(215,215,215,1)), color-stop(67%,rgba(228,228,228,1)), color-stop(100%,rgba(228,228,228,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(215,215,215,1) 1%,rgba(215,215,215,1) 48%,rgba(228,228,228,1) 67%,rgba(228,228,228,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(215,215,215,1) 1%,rgba(215,215,215,1) 48%,rgba(228,228,228,1) 67%,rgba(228,228,228,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(215,215,215,1) 1%,rgba(215,215,215,1) 48%,rgba(228,228,228,1) 67%,rgba(228,228,228,1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(215,215,215,1) 1%,rgba(215,215,215,1) 48%,rgba(228,228,228,1) 67%,rgba(228,228,228,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7d7d7', endColorstr='#e4e4e4',GradientType=1 ); /* IE6-9 */ } .engine_warp2:before { position: absolute; content: ""; top: -10px; left: -263px; width: 130px; height: 60px; border-radius: 50%; z-index:-1; -webkit-transform: rotate(-2deg); background: rgb(117,117,117); /* Old browsers */ background: -moz-linear-gradient(left, rgba(117,117,117,1) 1%, rgba(117,117,117,1) 48%, rgba(141,141,141,1) 66%, rgba(141,141,141,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(117,117,117,1)), color-stop(48%,rgba(117,117,117,1)), color-stop(66%,rgba(141,141,141,1)), color-stop(100%,rgba(141,141,141,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(117,117,117,1) 1%,rgba(117,117,117,1) 48%,rgba(141,141,141,1) 66%,rgba(141,141,141,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(117,117,117,1) 1%,rgba(117,117,117,1) 48%,rgba(141,141,141,1) 66%,rgba(141,141,141,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(117,117,117,1) 1%,rgba(117,117,117,1) 48%,rgba(141,141,141,1) 66%,rgba(141,141,141,1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(117,117,117,1) 1%,rgba(117,117,117,1) 48%,rgba(141,141,141,1) 66%,rgba(141,141,141,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#757575', endColorstr='#8d8d8d',GradientType=1 ); /* IE6-9 */ } .engine_warp3 { position: absolute; left: -110px; width:0; height: 28px; border-right: 90px solid #5d5d5d; border-top: 0px solid transparent; border-bottom: 30px solid transparent; z-index:51; } .engine_warp3:before { position: absolute; content: ""; left: 82px; width:30px; height: 27px; z-index:-1; -webkit-transform: rotate(-2deg); background: rgb(93,93,93); /* Old browsers */ background: -moz-linear-gradient(left, rgba(93,93,93,1) 0%, rgba(117,117,117,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(93,93,93,1)), color-stop(100%,rgba(117,117,117,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(93,93,93,1) 0%,rgba(117,117,117,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(93,93,93,1) 0%,rgba(117,117,117,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(93,93,93,1) 0%,rgba(117,117,117,1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(93,93,93,1) 0%,rgba(117,117,117,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d5d5d', endColorstr='#757575',GradientType=1 ); /* IE6-9 */ } .engine_warp3:after { position: absolute; content: ""; top: 11px; left: 56px; width:130px; height: 49px; border-radius: 50%; z-index:-1; -webkit-transform: rotate(-2deg); background: rgb(93,93,93); /* Old browsers */ background: -moz-linear-gradient(left, rgba(93,93,93,1) 0%, rgba(93,93,93,1) 19%, rgba(117,117,117,1) 40%, rgba(117,117,117,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(93,93,93,1)), color-stop(19%,rgba(93,93,93,1)), color-stop(40%,rgba(117,117,117,1)), color-stop(100%,rgba(117,117,117,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(93,93,93,1) 0%,rgba(93,93,93,1) 19%,rgba(117,117,117,1) 40%,rgba(117,117,117,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(93,93,93,1) 0%,rgba(93,93,93,1) 19%,rgba(117,117,117,1) 40%,rgba(117,117,117,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(93,93,93,1) 0%,rgba(93,93,93,1) 19%,rgba(117,117,117,1) 40%,rgba(117,117,117,1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(93,93,93,1) 0%,rgba(93,93,93,1) 19%,rgba(117,117,117,1) 40%,rgba(117,117,117,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d5d5d', endColorstr='#757575',GradientType=1 ); /* IE6-9 */ } .engine_warp4 { position: absolute; top: -20px; left: 5px; width: 230px; height: 20px; background: #d7d7d7; z-index:50; -webkit-transform: skew(-30deg); } .engine_warp5 { position: absolute; top: -12px; left: 252px; width:0; height: 10px; border-left: 185px solid #e4e4e4; border-top: 5px solid transparent; border-bottom: 5px solid transparent; z-index:50; -webkit-transform: skew(-25deg) rotate(5deg); } .engine_warp6 { position: absolute; top: -14px; left: -107px; width:0; height: 10px; border-right: 90px solid #bbbbbb; border-top: 0px solid transparent; border-bottom: 8px solid transparent; z-index:50; -webkit-transform: skew(-25deg) rotate(-5deg); } .engine_warp6:before { position: absolute; content: ""; top: -1px; left: 25px; width: 130px; height: 49px; border-radius: 50%; z-index: -1; -webkit-transform: rotate(-2deg); background: rgb(187,187,187); /* Old browsers */ background: -moz-linear-gradient(left, rgba(187,187,187,1) 0%, rgba(187,187,187,1) 34%, rgba(215,215,215,1) 72%, rgba(215,215,215,1) 99%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(187,187,187,1)), color-stop(34%,rgba(187,187,187,1)), color-stop(72%,rgba(215,215,215,1)), color-stop(99%,rgba(215,215,215,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(187,187,187,1) 0%,rgba(187,187,187,1) 34%,rgba(215,215,215,1) 72%,rgba(215,215,215,1) 99%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(187,187,187,1) 0%,rgba(187,187,187,1) 34%,rgba(215,215,215,1) 72%,rgba(215,215,215,1) 99%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(187,187,187,1) 0%,rgba(187,187,187,1) 34%,rgba(215,215,215,1) 72%,rgba(215,215,215,1) 99%); /* IE10+ */ background: linear-gradient(to right, rgba(187,187,187,1) 0%,rgba(187,187,187,1) 34%,rgba(215,215,215,1) 72%,rgba(215,215,215,1) 99%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#d7d7d7',GradientType=1 ); /* IE6-9 */ } .engine_exhaust1 { position: absolute; content: ""; top: 3px; left: 275px; width: 300px; height: 32px; border-radius: 50%; z-index: -1; box-shadow: 20px 0px 10px #5590c6; background: -moz-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%, rgba(30,87,153,1) 42%, rgba(75,133,190,1) 58%, rgba(111,171,220,0.7) 71%, rgba(125,185,232,0.47) 76%, rgba(125,185,232,0) 86%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(30,87,153,1)), color-stop(42%,rgba(30,87,153,1)), color-stop(58%,rgba(75,133,190,1)), color-stop(71%,rgba(111,171,220,0.7)), color-stop(76%,rgba(125,185,232,0.47)), color-stop(86%,rgba(125,185,232,0))); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 42%,rgba(75,133,190,1) 58%,rgba(111,171,220,0.7) 71%,rgba(125,185,232,0.47) 76%,rgba(125,185,232,0) 86%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 42%,rgba(75,133,190,1) 58%,rgba(111,171,220,0.7) 71%,rgba(125,185,232,0.47) 76%,rgba(125,185,232,0) 86%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 42%,rgba(75,133,190,1) 58%,rgba(111,171,220,0.7) 71%,rgba(125,185,232,0.47) 76%,rgba(125,185,232,0) 86%); /* IE10+ */ background: radial-gradient(ellipse at center, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 42%,rgba(75,133,190,1) 58%,rgba(111,171,220,0.7) 71%,rgba(125,185,232,0.47) 76%,rgba(125,185,232,0) 86%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .engine_exhaust2 { position: absolute; content: ""; top: 3px; left: 275px; width: 300px; height: 32px; border-radius: 50%; z-index: -1; box-shadow: 60px 1px 20px #5590c6; background: transparent; -webkit-animation: flicker .07s infinite linear; } @-webkit-keyframes flicker { 0% {opacity: 1;} 100% {opacity: 0;} }
HTML
NCC-1701
CSS Enterprise
Built in HTML and CSS, for Chrome eyes only
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email